Для выполнения данного урока вам понадобятся следующие ресурсы:
* Сеточная система 960
* Иконки
А вот то, что мы собираемся сегодня реализовать. Кликните по изображения для полного просмотра:
Этап 1: Работа со структурой сайта
Перед тем, как мы начнем, скачайте сеточную систему 960 для упрощения создания каркаса. Откройте 960_download\templates\photoshop\960_grid_12_col.psd. Нам также нужно, чтобы сетка и линейки были отображены. Их можно отобразить, воспользовавшись сочетанием клавиш:
CTRL + R (Линейка)
CTRL + ; (Сетка)
Нажмите CTRL + SHIFT + C для изменения размера холста.
Используя инструмент заливки (Paint Bucket Tool – G), залейте фоновый слой цветом #242b30. Теперь вам нужно создать папки. Нам нужны папки, которые мы будем использовать по мере востребования. Постарайтесь внедрить такую систему в ваш рабочий процесс – это значительно облегчит вам дальнейшую жизнь, если придется что-то редактировать или изменять.
С этим закончили. Теперь можно приступать к основному процессу.
Этап 2: Работаем над шапкой
Переименуйте папку layer1 в Header (шапка) и переименуйте первый слой в header_bg (фон шапки) (убедитесь, что ваши папки расположены так же, как и у меня в примере). Создайте новую линейку (View > New Guide) и установите позицию на 100 пикселей в горизонтальном положении.
Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), создайте выделение, как показано в скриншоте ниже и залейте его белым цветом.
Примените следующие опции слоя:
Тень (Drop Shadow)
Наложение градации (Gradient Overlay)
Линейная градация (Linear Gradient)
Угол (Angle): 90
#171c20
#22292f
Контур (Stroke)
#0d1012
Этап 3: Работаем с логотипом
Создайте папку внутри папки header и назовите её logo, затем помещайте в неё все слои, связанные с логотипом. Теперь нам нужно создавать имя сайта (оно же и будет логотипом). Выберите инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.
Примените следующие опции слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Наложение градации (Gradient Overlay)
Линейная градация (Linear Gradient)
Угол (Angle): 90
#bcbdbd Направление: 30%
#dfdfdf Направление: 50%
#dfdfdf Направление: 100%
Таким образом, мы закончили оформление текста, теперь давайте создадим освещение для большего его выделения. Создайте новый слой под слоем с текстом, назовите его light и создайте выделение, как показано на скриншоте ниже.
Установите белый цвет фона, возьмите кисть (Brush Tool – В), затем кликните правой кнопкой по рабочей области для отображения свойств кисти.
Для создания привлекательного радиального эффекта выделения логотипа, сделайте отрисовку кистью, как изображено на скриншоте.
Далее откройте опции слоя, режим смешивания установите на Soft Light, а уровень его отображения (Opacity) на 80%:
Итак, мы закончили с логотипом, а теперь давайте перейдём к разработке меню навигации.
Этап 4: Работа с навигационным меню
Создайте папку внутри папки header и назовите ее Navigation, и далее складывайте все слои, связанные с навигационным меню, в эту папку. Сейчас мы начинаем работать с навигационным меню, а точнее, ссылками. Выберите инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.
Мы отделили ссылку home, так как она должна находиться в активном положении. Все другие ссылки закрашены цветом #b6aefd.
К тексту home примените следующие опции слоя:
Тень (Drop Shadow)
Заливка цветом (Color Overlay)
#232a2f
А теперь давайте оформим активное положение для home. Создайте новый слой под слоем текста home, выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangular Marquee Tool – U) и установите значение радиуса на 5 пикселей.
Примените следующие опции слоя:
Тень (Drop Shadow)
Внутреннее свечение (Inner Glow)
Наложение градации (Gradient Overlay)
Повторите то же самое, что мы делали в этапе с разработкой логотипа.
Контур (Stroke)
#13181b
Этап 5: Работа со слайд-шоу
Создайте новую линейку View > New Guide и установите положение на 140 пикселей по горизонтали. Повторите процесс, но уже с положением на 440 пикселей.
Теперь нам нужно добавить нечто вроде держателя нашего слайд-шоу. Установите цвет фигуры на #171c20, выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) и установите радиус на 5 пикселей, а затем нарисуйте такую же фигуру, как показана на скриншоте.
Примените следующие опции слоя:
Тень (Drop Shadow)
Теперь создайте выделение фигуры, которую мы только что создали, посредством нажатия CTRL + клик по фигуре на панели слоёв.
Теперь перейдите в меню Select > Modify > Contract и установите значение в 5 пикселей. Теперь перетащите линейки к краям выделения (левому, правому, верхнему и нижнему), как отображено на скриншоте.
Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) и установите радиус на 5 пикселей. Здесь мы воспользовались цветом #36414a. Цвет данной фигуры не так важен, так как он будет выполнять роль держателя изображений в слайд-шоу.
Примените следующие опции слоя:
Внутренняя тень (Inner Shadow)
Внутреннее свечение (Inner Glow)
#424f5a
Контур (Stroke)
#111417
Создайте папку внутри папки slideshow и назовите её divider. Убедитесь, что эта папка находится выше слоя с фигурой, над которой мы только что работали. Для создания разделителя, выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), и используйте цвет, как показано на скриншоте.
Теперь мы разделили его на две части: левая часть будет содержать в себе описание изображения в слайд-шоу, а также кнопки вперед и назад. А правая часть будет отображать само изображение. Давайте закончим работу в левой части. Создайте еще одну папку внутри папки slideshow и назовите её toleft.
Теперь выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) и установите радиус на 5 пикселей и следуйте приведенному ниже скриншоту.
Примените следующие опции слоя:
Наложение градации (Gradient Overlay)
Стиль: линейный
#242b31
#36414a
Создайте новый слой и назовите его header. Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) с тем же значением радиуса и следуйте приведенному ниже скриншоту.
Примените следующие опции слоя:
Внутреннее свечение (Inner Glow)
#424f5a
Наложение градации (Gradient Overlay)
Стиль: линейный
#21282d
#2f3840
Контур (Stroke)
#111417
Теперь нам нужно добавить текст заголовка, поэтому используйте инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.
Скопируйте слой с текстом заголовка.
Примените следующие опции слоя:
Наложение градации (Gradient Overlay)
Стиль: линейный
#d4d4d4
#ffffff
Далее добавьте текстовое описание, используя инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.
Теперь давайте разработаем кнопку для прочтения полной версии записи. Создайте ещё одну папку внутри папки slideshow и назовите её readmore. Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) с тем же значением радиуса в 5 пикселей и следуйте приведенному ниже скриншоту.
Теперь давайте создадим кнопки вперед (Next) и назад (Previous). Создайте папку внутри папки slideshow и назовите её prev_next. Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) с тем же значением радиуса в 5 пикселей и следуйте приведенному ниже скриншоту.
Примените следующие опции слоя:
Тень (Drop Shadow)
Внутренняя тень (Inner Shadow)
Внутреннее свечение (Inner Glow)
Наложение градации (Gradient Overlay)
Линейная градация (Linear Gradient)
Угол (Angle): 90
#929292
#bcbdbd Расположение: 30%
#dfdfdf Расположение: 50%
#dfdfdf Расположение: 100%
Контур (Stroke)
#161b1f
Теперь мы добавим стрелочки вперёд и назад. Выберите инструмент создания собственных фигур (Custom Shape Tool – U), найдите в перечне стрелочку и разместите так, как показано на скриншоте.
Расположите стрелки на макете согласно приведенному скриншоту:
Примените следующие опции слоя:
Тень (Drop Shadow)
Наложение градации (Gradient Overlay)
Линейная градация (Linear Gradient)
Угол (Angle): 90
#21282d
#2f3840 50% и 100%
Теперь посмотрите, что из ваших прошлых работ можно поместить в слайд-шоу. Посредством панели слоев создайте новый слой над слоем image_holder и соедините их вместе. Посмотрите, как мы проделали это, на скриншоте.
Финальный этап нашего слайд-шоу заключается в том, что мы добавим тень для того, чтобы придать трехмерный эффект. Для этого выберите ручку (Pen Tool – T) и создайте фигуру, как показано на скриншоте, а затем залейте её черным цветом.
Выберите слой и пройдите в меню Filter > Blur > Gaussian Blur, установите значение радиуса на 5.0 пикселей. На панели слоев установите уровень отображения слоя на 80%.
Этап 6: Работаем над перечнем услуг
Выберите папку What I Do. Теперь надо добавить заголовок - What I Do Header, и для этого выберите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте.
Примените следующие опции слоя:
Тень (Drop Shadow)
Заливка градацией (Gradient Overlay)
Линейная градация (Linear Gradient)
#d4d4d4
#ffffff
Подготовьте иконки, которые вы скачали. Мы создадим еще 4 различные папки в нашей папке What I Do. Папки будут названы I Capture Smiles, I Design Websites, Awards I Receive и I love to Socialize. Все это в разных папках. Теперь посмотрите на скриншоте, как мы размещаем текст.
Если вы сделали всё правильно, то у вас должно получиться нечто похожее.
Этап 7: Работаем над разделителем
Выберите папку Divider, затем внутри её создайте ещё одну папку, назовите её lines. Нам нужно сделать 2 линии толщиной в 1 пиксель – это и будет наш разделитель. Затем нужно будет добавить кое-какие опции стиля. Возьмите инструмент создания линий (Line Tool – U). Для первой полосы мы применим цвет #111417, а для второй #364148.
Выберите инструмент создания многоугольника (Rectangle Tool – U), расположите его так, как показано на скиншоте и установите уровень отображения слоя на 0%.
Примените следующие опции слоя:
Заливка градацией (Gradient Overlay)
Дублируйте слой, а дальше нам надо будет изменить заливку градацией.
#242b30
Этап 8: Работаем с разделом About Me
Выберите папку About Me. Теперь нам нужно добавить заголовки About Me и Information. Возьмите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте. Мы используем одинаковое форматирование текста вместе с тем, которое было применено в разделе What I Do.
Этап 9: Работаем с разделом My Portfolio
Выберите папку My Portfolio. Теперь нам нужно добавить заголовок My Portfolio. Возьмите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте.
Выберите инструмент создания многоугольника (Rectangle Tool – U), расположите его так, как показано на скиншоте.
Примените следующие опции слоя:
Тень (Drop Shadow)
Контур (Stroke)
#161b1f
Теперь разместите ваши примеры работ на самом верху слоя и соедините их воедино. То же самое, как мы делали в слайд-шоу.
Теперь мы должны добавить информацию о портфолио, поэтому возьмите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте.
Этап 10: Работаем с подвалом
Выберите папку My Portfolio. Сейчас нам нужно сделать фон подвала, поэтому вам нужно взять инструмент создания многоугольника (Rectangle Tool – U) и установить цвет на #171c20, а затем расположить его так, как показано на скиншоте.
Примените следующие опции слоя:
Внешнее свечение (Outer Glow)
#111417
Контур (Stroke)
#364148
Теперь нам нужно добавить текст авторских прав по левую сторону, а также несколько ссылок по правую сторону, поэтому возьмите инструмент создания текста (Text Tool – T), и создайте текст, как показано на скриншоте.
Этап 11: Работаем с фоновым светом
Заметьте, что сейчас наш фон просто плоский. В этом этапе мы собираемся добавить немного света в области слайд-шоу и где-то в середине. Выберите папку Background, создайте внутри неё 2 слоя, и дайте им названия Slideshow_light и whatido_light. Выберите слой slideshow_light, выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), создайте выделение, как показано в скриншоте ниже.
Для того чтобы создать освещение, возьмите кисть (Brush Tool – B), установите размер на 700, а жесткость на 0%. Начните рисовать в середине сверху выделения, а на панели слоев установите режим смешивания на Soft Light, плотность отображения понизьте до 70%.
У вас должно получиться нечто того, что показано на скриншоте ниже.
Теперь слой whatido_light, выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), создайте выделение, как показано в скриншоте ниже.
Теперь, когда вы установите режим смешивания на Soft Light, плотность отображения понизите до 70% - это создаст эффект освещения, которое смешивается с нашим фоном. Посмотрите, как показано на скришоте.
И, наконец, мы закончили! Надеемся, что вы научились чему-то интересному в этой обучающей статье, а также надеемся, что она вам понравилась. Если вы желаете прокомментировать что-либо - действуйте! Спасибо!
Финальное превью
