—»     —»   Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
  Раздел: Образование и Изучение   Комментариев: 3  

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп



Привет всем и сегодня мы расскажем вам о создании темного шаблона в Photoshop. В этой статье будут описаны техники правильного применения отступов, шрифтов и цветовой схемы. Давайте начнем! Надеемся, что вы дойдёте до конца статьи, а затем сможете продемонстрировать собственный результат!

Для выполнения данного урока вам понадобятся следующие ресурсы:

* Сеточная система 960
* Иконки

А вот то, что мы собираемся сегодня реализовать. Кликните по изображения для полного просмотра:

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 1: Работа со структурой сайта

Перед тем, как мы начнем, скачайте сеточную систему 960 для упрощения создания каркаса. Откройте 960_download\templates\photoshop\960_grid_12_col.psd. Нам также нужно, чтобы сетка и линейки были отображены. Их можно отобразить, воспользовавшись сочетанием клавиш:

CTRL + R (Линейка)
CTRL + ; (Сетка)

Нажмите CTRL + SHIFT + C для изменения размера холста.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Используя инструмент заливки (Paint Bucket Tool – G), залейте фоновый слой цветом #242b30. Теперь вам нужно создать папки. Нам нужны папки, которые мы будем использовать по мере востребования. Постарайтесь внедрить такую систему в ваш рабочий процесс – это значительно облегчит вам дальнейшую жизнь, если придется что-то редактировать или изменять.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

С этим закончили. Теперь можно приступать к основному процессу.

Этап 2: Работаем над шапкой

Переименуйте папку layer1 в Header (шапка) и переименуйте первый слой в header_bg (фон шапки) (убедитесь, что ваши папки расположены так же, как и у меня в примере). Создайте новую линейку (View > New Guide) и установите позицию на 100 пикселей в горизонтальном положении.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), создайте выделение, как показано в скриншоте ниже и залейте его белым цветом.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Наложение градации (Gradient Overlay)

Линейная градация (Linear Gradient)
Угол (Angle): 90
#171c20
#22292f

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#0d1012

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 3: Работаем с логотипом

Создайте папку внутри папки header и назовите её logo, затем помещайте в неё все слои, связанные с логотипом. Теперь нам нужно создавать имя сайта (оно же и будет логотипом). Выберите инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Внутренняя тень (Inner Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Наложение градации (Gradient Overlay)

Линейная градация (Linear Gradient)
Угол (Angle): 90

#bcbdbd Направление: 30%
#dfdfdf Направление: 50%
#dfdfdf Направление: 100%

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Таким образом, мы закончили оформление текста, теперь давайте создадим освещение для большего его выделения. Создайте новый слой под слоем с текстом, назовите его light и создайте выделение, как показано на скриншоте ниже.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Установите белый цвет фона, возьмите кисть (Brush Tool – В), затем кликните правой кнопкой по рабочей области для отображения свойств кисти.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Для создания привлекательного радиального эффекта выделения логотипа, сделайте отрисовку кистью, как изображено на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Далее откройте опции слоя, режим смешивания установите на Soft Light, а уровень его отображения (Opacity) на 80%:

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Итак, мы закончили с логотипом, а теперь давайте перейдём к разработке меню навигации.

Этап 4: Работа с навигационным меню

Создайте папку внутри папки header и назовите ее Navigation, и далее складывайте все слои, связанные с навигационным меню, в эту папку. Сейчас мы начинаем работать с навигационным меню, а точнее, ссылками. Выберите инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Мы отделили ссылку home, так как она должна находиться в активном положении. Все другие ссылки закрашены цветом #b6aefd.

К тексту home примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Заливка цветом (Color Overlay)

#232a2f

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

А теперь давайте оформим активное положение для home. Создайте новый слой под слоем текста home, выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangular Marquee Tool – U) и установите значение радиуса на 5 пикселей.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Внутреннее свечение (Inner Glow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Наложение градации (Gradient Overlay)

Повторите то же самое, что мы делали в этапе с разработкой логотипа.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#13181b

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 5: Работа со слайд-шоу

Создайте новую линейку View > New Guide и установите положение на 140 пикселей по горизонтали. Повторите процесс, но уже с положением на 440 пикселей.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь нам нужно добавить нечто вроде держателя нашего слайд-шоу. Установите цвет фигуры на #171c20, выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) и установите радиус на 5 пикселей, а затем нарисуйте такую же фигуру, как показана на скриншоте.

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь создайте выделение фигуры, которую мы только что создали, посредством нажатия CTRL + клик по фигуре на панели слоёв.

Теперь перейдите в меню Select > Modify > Contract и установите значение в 5 пикселей. Теперь перетащите линейки к краям выделения (левому, правому, верхнему и нижнему), как отображено на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) и установите радиус на 5 пикселей. Здесь мы воспользовались цветом #36414a. Цвет данной фигуры не так важен, так как он будет выполнять роль держателя изображений в слайд-шоу.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Внутренняя тень (Inner Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Внутреннее свечение (Inner Glow)

#424f5a

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#111417

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Создайте папку внутри папки slideshow и назовите её divider. Убедитесь, что эта папка находится выше слоя с фигурой, над которой мы только что работали. Для создания разделителя, выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), и используйте цвет, как показано на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь мы разделили его на две части: левая часть будет содержать в себе описание изображения в слайд-шоу, а также кнопки вперед и назад. А правая часть будет отображать само изображение. Давайте закончим работу в левой части. Создайте еще одну папку внутри папки slideshow и назовите её toleft.

Теперь выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) и установите радиус на 5 пикселей и следуйте приведенному ниже скриншоту.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Наложение градации (Gradient Overlay)
Стиль: линейный
#242b31
#36414a

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Создайте новый слой и назовите его header. Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) с тем же значением радиуса и следуйте приведенному ниже скриншоту.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Внутреннее свечение (Inner Glow)

#424f5a

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Наложение градации (Gradient Overlay)

Стиль: линейный
#21282d
#2f3840

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#111417

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь нам нужно добавить текст заголовка, поэтому используйте инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Скопируйте слой с текстом заголовка.

Примените следующие опции слоя:

Наложение градации (Gradient Overlay)

Стиль: линейный
#d4d4d4
#ffffff

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Далее добавьте текстовое описание, используя инструмент создания текста (Text Tool – Т) и создайте текст таким же образом, как отображено на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь давайте разработаем кнопку для прочтения полной версии записи. Создайте ещё одну папку внутри папки slideshow и назовите её readmore. Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) с тем же значением радиуса в 5 пикселей и следуйте приведенному ниже скриншоту.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь давайте создадим кнопки вперед (Next) и назад (Previous). Создайте папку внутри папки slideshow и назовите её prev_next. Выберите инструмент создания многоугольника с округлыми углами (Rounded Rectangle Tool – U) с тем же значением радиуса в 5 пикселей и следуйте приведенному ниже скриншоту.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Внутренняя тень (Inner Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Внутреннее свечение (Inner Glow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Наложение градации (Gradient Overlay)

Линейная градация (Linear Gradient)

Угол (Angle): 90
#929292
#bcbdbd Расположение: 30%
#dfdfdf Расположение: 50%
#dfdfdf Расположение: 100%

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#161b1f

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь мы добавим стрелочки вперёд и назад. Выберите инструмент создания собственных фигур (Custom Shape Tool – U), найдите в перечне стрелочку и разместите так, как показано на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Расположите стрелки на макете согласно приведенному скриншоту:

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Наложение градации (Gradient Overlay)

Линейная градация (Linear Gradient)
Угол (Angle): 90
#21282d
#2f3840 50% и 100%

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь посмотрите, что из ваших прошлых работ можно поместить в слайд-шоу. Посредством панели слоев создайте новый слой над слоем image_holder и соедините их вместе. Посмотрите, как мы проделали это, на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Финальный этап нашего слайд-шоу заключается в том, что мы добавим тень для того, чтобы придать трехмерный эффект. Для этого выберите ручку (Pen Tool – T) и создайте фигуру, как показано на скриншоте, а затем залейте её черным цветом.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Выберите слой и пройдите в меню Filter > Blur > Gaussian Blur, установите значение радиуса на 5.0 пикселей. На панели слоев установите уровень отображения слоя на 80%.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 6: Работаем над перечнем услуг

Выберите папку What I Do. Теперь надо добавить заголовок - What I Do Header, и для этого выберите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Заливка градацией (Gradient Overlay)

Линейная градация (Linear Gradient)
#d4d4d4
#ffffff

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Подготовьте иконки, которые вы скачали. Мы создадим еще 4 различные папки в нашей папке What I Do. Папки будут названы I Capture Smiles, I Design Websites, Awards I Receive и I love to Socialize. Все это в разных папках. Теперь посмотрите на скриншоте, как мы размещаем текст.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Если вы сделали всё правильно, то у вас должно получиться нечто похожее.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 7: Работаем над разделителем

Выберите папку Divider, затем внутри её создайте ещё одну папку, назовите её lines. Нам нужно сделать 2 линии толщиной в 1 пиксель – это и будет наш разделитель. Затем нужно будет добавить кое-какие опции стиля. Возьмите инструмент создания линий (Line Tool – U). Для первой полосы мы применим цвет #111417, а для второй #364148.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Выберите инструмент создания многоугольника (Rectangle Tool – U), расположите его так, как показано на скиншоте и установите уровень отображения слоя на 0%.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Заливка градацией (Gradient Overlay)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Дублируйте слой, а дальше нам надо будет изменить заливку градацией.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

#242b30

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 8: Работаем с разделом About Me

Выберите папку About Me. Теперь нам нужно добавить заголовки About Me и Information. Возьмите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте. Мы используем одинаковое форматирование текста вместе с тем, которое было применено в разделе What I Do.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 9: Работаем с разделом My Portfolio

Выберите папку My Portfolio. Теперь нам нужно добавить заголовок My Portfolio. Возьмите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Выберите инструмент создания многоугольника (Rectangle Tool – U), расположите его так, как показано на скиншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Тень (Drop Shadow)

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#161b1f

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь разместите ваши примеры работ на самом верху слоя и соедините их воедино. То же самое, как мы делали в слайд-шоу.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь мы должны добавить информацию о портфолио, поэтому возьмите инструмент создания текста (Text Tool – T), и создайте текст, как на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 10: Работаем с подвалом

Выберите папку My Portfolio. Сейчас нам нужно сделать фон подвала, поэтому вам нужно взять инструмент создания многоугольника (Rectangle Tool – U) и установить цвет на #171c20, а затем расположить его так, как показано на скиншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Примените следующие опции слоя:

Внешнее свечение (Outer Glow)

#111417

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Контур (Stroke)

#364148

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь нам нужно добавить текст авторских прав по левую сторону, а также несколько ссылок по правую сторону, поэтому возьмите инструмент создания текста (Text Tool – T), и создайте текст, как показано на скриншоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Этап 11: Работаем с фоновым светом

Заметьте, что сейчас наш фон просто плоский. В этом этапе мы собираемся добавить немного света в области слайд-шоу и где-то в середине. Выберите папку Background, создайте внутри неё 2 слоя, и дайте им названия Slideshow_light и whatido_light. Выберите слой slideshow_light, выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), создайте выделение, как показано в скриншоте ниже.

Для того чтобы создать освещение, возьмите кисть (Brush Tool – B), установите размер на 700, а жесткость на 0%. Начните рисовать в середине сверху выделения, а на панели слоев установите режим смешивания на Soft Light, плотность отображения понизьте до 70%.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

У вас должно получиться нечто того, что показано на скриншоте ниже.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь слой whatido_light, выберите инструмент создания выделения в форме многоугольника (Rectangular Marquee Tool – М), создайте выделение, как показано в скриншоте ниже.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

Теперь, когда вы установите режим смешивания на Soft Light, плотность отображения понизите до 70% - это создаст эффект освещения, которое смешивается с нашим фоном. Посмотрите, как показано на скришоте.

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп

И, наконец, мы закончили! Надеемся, что вы научились чему-то интересному в этой обучающей статье, а также надеемся, что она вам понравилась. Если вы желаете прокомментировать что-либо - действуйте! Спасибо!

Финальное превью

Уроки Photoshop: Разработка темного шаблона «Rounded» в Фотошоп
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: шаблоны сайтов, Photoshop
Опубликовал Mysterious Master   Прочитано (раз): 7579   |   Оставлено комментариев: 3
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 12 февраля 2011 @ 20:19
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Полезный материал
Комментарий #2: 12 февраля 2011 @ 20:28
Написал: Design FactoRy — группа: Администраторы  
На сайте с: 21.07.2009   |   Публикаций: 3300   |   Комментариев: 500
ICQ: --- не указано ---
Михаил, а как же smile Скоро будет статья о верстке данного шаблона, так что заходите почаще, если интересует...
Комментарий #3: 15 февраля 2011 @ 02:12
Написал: HYBRID — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Урок хороший, с пользой прошел от начала до конца, есть опечатки но незначительные.
Синие указатели на темном фоне это конечно жесть, автору стоит задуматься о читабельности скринов.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июль 2017    »
ПнВтСрЧтПтСбВс
 12
3456789
10111213141516
17181920212223
24252627282930
31