Создание одностраничного сайта-портфолио

/ 👁 2667

Сегодня будем создавать дизайн так называемого одностраничного сайта визитки. Таким способом можно организовать портфолио и четко дать пользователю информацию о себе. Это только один из примеров применения, стоит только включить воображение, чтобы увидеть и другие. Например так можно организовать рекламу каких-то товаров, какого-то события (например концерта или фестиваля), вообщем то, что Вашей душе угодно.
дополнительные материалы к урокам

демо версия урока

1. Для начала создаем новый документ в Adobe Photoshop. Размер 2400 х 3300рх. Идея данного примера – это сделать на абсолютно чистом фоне изображение монитора, который будет как бы служить слайдером, в котором и будут отображаться работы автора. Ключевое внимание будет привлекать именно этот элимент.
2. Итак я ставлю 2 вертикальные направляющие на отметки 450 и 1950рх. Между ними я и размещаю главный элемент – монитор с клавиатурой. Картинки монитора и клавиатуры Вы можете найти в дополнительных материалах. Вы можете использовать их, а можете и какие-то свои. Когда Вы скопируете их и вставите в наш файл, необходимо поработать с их размером, а так же с перспективой клавиатуры. Для того, чтобы она выглядела должным образом нажмите Ctrl+T, далее правой кнопкой мыши по клавиатуре и поработайте поочередно с Perspective, Distort и Warp. Регулируйте появившиеся контрольные точки, пока не получите удовлетворяющий Вас результат. После нажмите Enter. После того, как размер и вид Вас устраивают объедините слои с монитором и клавиатурой в один (выделяем оба слоя, удерживая Ctrl, щелкаем правой кнопкой мыши и выбираем Merge Layers. У меня получилось так:

3. Выделим и Вырежим с помощью Pen Tool из нашего монитора область с изображением, чтобы потом вставить туда свое изображение.

Теперь поместим нужное нам изображение внутрь экрана монитора. Под слой с монитором. Откроем его в нашем документе или вставим если оно скопированно. Перед тем как подгонять размер, превратим изображение в Smart Object.

А теперь с помощью Ctrl+T сделаем тот размер, который нам необходим. Смарт Объект позволит нам трансформировать без потери качества изображения.

4. Создадим фон нашей странички. Для начала создаем новый слой (распологаем его под остальными слоями), заливаем цветом #e6e6e5. Выше него создаем еще один слой, выбираем градиент (radial). Цвета для градиента выставляем от #e6e6e5 до #272827. И удерживая клавишу Shift проводим ровную линию от центрального верхнего края страницы до ее середины. Получился градиент – Opacity выставляем на 50%, а Fill на 70%.
Далее идем в Filter — Filter Gallery. Там выбираем Texture —- Grain. Intensity ставим на 15, Contrast на 40.

Получается примерно так:

5. Создадим блики на фоне. Для этого создадим новый слой, назовем его «Блики». Слой поместим под слои с монитором и картинкой. Возьмем большую мягкую кисть (где-то 20%). Opacity у кисти поставим 40%. А теперь щелкним ею несколько раз, добиваясь эффекта, как будто свечение исходит от центра экрана.

6. Сделаем тень от компьютера. Дублируем слой с монитором. Ставим его ниже слоя самого монитора. Теперь спускаем его немного вниз и трансформируем размер и персперктиву, чтобы получилось что-то вроде этого:

Теперь идем в Filter —- Blur —- Gaussian Blur. Устанавливаем значение на 14 и размываем по Гаусу.

Теперь делаем слой-маску для нашего слоя. Берем черную мягкую кисть и обрабатываем ей края тени, чтобы получилось что-то подобное:

А теперь просто убавляем непрозрачность слоя. Мне показалось, что неплохо при Opacity = 30%. Но Вы можете и поэксперементировать с этим значением как Вам больше понравится. У меня получилось вот так:

7.Сделаем интересную надпись наверху нашей страницы. Напимер это будет надпись о том, что это Портфолио. Я беру шрифт Brush Script Std размером 220. Напишем Portfolio и выровняем по центру. Теперь кликаю правой кнопкой мыши по миниатюре на слое с текстом —- выбираю Select Pixels (в это время должен быть активен инструмент Merquee Tool) — сдвигаю получившееся выделение на 3 рх вправо и на 3рх вниз. После этого нажимаю одновременно Ctrl+Shift+I.

Создаю новый слой под слоем с текстом. Беру мягкую кисть с Opacity = 50% и цветом #272827 и рисую примерно вот так:

Создаем этому слою слой-маску. Жмем провой кнопкой мыши на слой — выбираем Select Pixels. Теперь идем в меню Фильтр и размываем но Гаусу с радиусом = 4.

Идем на наш слой с текстом, жмем правой кнопкой по слою, выбираем Select Pixels, переносим выделение на 3рх вправо и вниз по нашей белой линии — жмем Ctrl+Shift+I. Сделаем копию нашего слоя. Приблизим документ где-то на 300%. Перейдем на ту из копий, что находится ниже, возьмем инструмент заливки и зальем все наше выделение выходящее за текст белым цветом.

Теперь удалим верхний слой с текстом, оставив только нижнюю копию. И удалим слой с фоном от кисти. Получается вот такой эффект:

8. Делаем кнопки для листания слайдов. Для начала поставим горизонтальную направляющую на 800рх и две вертикальные на 300рх и на 2100рх. Выберем инструмент Custom Shape Tool — Arrow. В примере я выбрала стрелку номер 9 и того же цвета, что и наша главная надпись. Собственно рисуем стрелку, распологаем ее по нашим направляющим. Далее копируем слой, щелкаем Ctrl+T — Fleep Horizontal —-Enter. И передвигаем новую, отраженную по горизонтали стрелку на противоположную позицию. В качестве эффектов я добавила к стрелкам Drop Shadow и Inner Glow. Вы можете поэксперементировать с эффектами и найти много интересных вариантов.

9. Теперь поставим 2 вертикальные направляющие на 130 рх и на 2270 рх. Также поставим 2 горизонтальные направляющие на 1800рх и на 2100рх. Теперь в области, образованной этими направляющими мы будем размещать наши иконки меню.
Зайдите в дополнительные материалы в папку icon. Скопируйте иконки в наш документ в Photoshope. Превратите каждую в Smart-object. Измените размер, чтобы иконки вписывались в блок.

10. Сделаем тени от иконок. Для этого продублируем каждую и объединим копии в один слой, назовем его iconshadow. С помощью свободной трансформации (Ctrl + T) сожмем получившийся слой, так чтобы формы сжатых фигур напоминали тень от них. Теперь нажмем на клавиатуре Ctrl+U и в открывшемся диалоговом окне поставим параметр Lightness на -100. Далее нажмем Ok.

Теперь размоем получившийся слой по Гаусу, применив радиус в 7 рх. Поставим прозрачность слоя (Opacity) равной 50%. Должен получиться примерно такой результат:

Добавим надписи к нашим иконкам, так сказать название пунктов нашего небольшого меню. В примере я использую шрифт Georgia 60pt, цвет: #292929.

11. Поставим 2 горизонтальные направляющие: на 2500рх и на 2580рх. И 2 вертикальные направляющие примерно одинаково разделяющие наши 3 иконки.
Теперь основываясь на этих направляющих будем выделять текстовые области и кратко описывать каждый пункт меню. Это будет что-то вроде основной мысли или краткого описания. Для последнего пункта (Contacts) используем иконки для обозначения социальных сетей. Их Вы также можете найти в дополнительных материалах. Не забывайте оставлять расстояние между колонками текста, чтобы они не сливались. Цвет шрифта используется # d7d7d6.
У меня получилось вот так:

12. Создадим новый слой и назовем его down. Прямоугольным выделением выделим нижнюю область от направляющей в 2580рх и до самого низа. Возьмем инструмент заливки и зальем наше выделение цветом #292929. Теперь идем в эффекты (fx). Выбираем Bevel and Emboss. Для него устанавливаем следующие параметры: Inner Bevel, Chisel Hard, Depth = 430%, Size = 1px, Highlight Mode Opacity = 20%. Также выбираем эффект Stroke: size= 1px, color = #000000, position = centre.

Теперь Копируем данный слой, заходим в эффекты нового слоя и исправляем Highlight Mode Opacity = 30% и Stroke: size= 3px.
Ставим горизонтальную напраляющую не 3200рх и двигаем новый слой до этой отметки. В итоге должно получиться вот так:
13. А теперь наше нижнее черное поле мы можем заполнить некой дополнительной информацией, такой как быстрые ссылки, наш e-mail, либо что-то еще. Вот вобщем –то и все. Дизайн готов!
У меня он получился вот такой:

Leave a Reply