Создание аккуратного красочного макета для веб сайта

Урок покажет вам, как создается чистый корпоративный шаблон для вебсайта в Photoshop. Оригинальный дизайн был создан человеком, под псевдонимом Kunitz с Theme Forest. Я хотел бы поблагодарить его за разрешение написать данный урок.

Что нам потребуется:

Листья Пиксельный голубой прямоугольник

1 Шаг

Создайте новый документ (Ctrl + N) в Photoshop размерами 1200px на 750px. Затем выберите Gradient Tool (G) и растяните градиент цветом от #792700 к #000000 сверху вниз.

2 Шаг

Создайте новый слой, возьмите Brush Tool (B) и выберите мягкую кисть диаметром в 300px, добавьте цвета вашему шаблону. Я использовал красный, оранжевый и голубой. Назовите этот слой “Color”.

3 Шаг

Теперь нам нужно добавить текстуру на наш фон. Откройте в Photoshop картинку с листьями, которую вы скачивали вначале урока. Перенесите изображение на ваш документ с помощью Move Tool (V). Сделайте по этому слою клик правой кнопкой мыши и выберите пункт Convert To Smart Object. Затем открываем Filter > Artistic > Film Grain и настраиваем все в соответствии с приведенной ниже иллюстрацией. После этого открываем Filter > Pixelate > Mosaic и снова задаем настройки, которые показаны на рисунке. Установите режим смешивания этого слоя в Difference, Opacity 30% и назовите его “Texture”.

4 Шаг

Создайте новый слой, выберите Rounded Rectangle Tool (U), установите радиус углов равным 3px и нанесите на документ черный прямоугольник. Затем выполните двойной щелчок по этому слою, чтобы вызвать окно стилей и добавьте тень, активировав стиль Drop Shadow. Используйте приведенные ниже настройки. Затем задайте слою значение Opacity 70% и назовите его “Black Shape”.

5 Шаг

Зажмите Ctrl и выделите все слои, которые были сделаны до этого момента, затем сгруппируйте их (Ctrl + G). Назовите группу “Background”.

6 Шаг

Создайте новую группу (Layer > New > Group) и назовите ее “Home”. Затем внутри нее создайте еще одну с названием “Logo”.

7 Шаг

Создайте новый слой в группе “Logo”. Далее выберите Type Tool (T) и нанесите название своего шаблона цветом #f4f4f4. Выполните двойной клик по этому слою для вызова окна стилей и задайте настройки в соответствии с изображением. Затем на новом слое нанесите подпись цветом #eeeeee.

8 Шаг

Сейчас создадим две кнопки в правом верхнем углу нашего шаблона. Создайте новую группу и назовите ее “Sign up | Login”. Возьмите Rounded Rectangle Tool (U) и нанесите на макет прямоугольник, как у меня на иллюстрации. Выполните двойной щелчок по слою с фигурой для вызова окна стилей и задайте параметры, как на рисунке. Выберите основным цветом белый и с помощью Type Tool (T) нанесите слова “Sign up | Login” на кнопку. Установите непрозрачность (Opacity) текстового слоя на 75%.

9 Шаг

Создайте новую группу и назовите ее “Navigation”. На новом слое при помощи Single Row Marquee Tool создайте выделение высотой в 1px и залейте его цветом #406f94. Удалите части линии, которые находятся за пределами черного прямоугольника, используя Rectangular Marquee Tool (M). Установите Opacity слоя равным 40% и назовите его “Line”.

10 Шаг

Создайте новый слой, выберите Rectangular Marquee Tool (M) и создайте выделение, как это сделал я (для удобства можно использовать направляющие). Затем выберите Gradient Tool (G) и растяните градиент от цвета #35423e к прозрачному по направлению снизу вверх. Нажмите Ctrl + D для отмены выделения. Затем открываем Filter > Noise > Add Noise и задаем параметры, как на приведенном ниже рисунке. Назовите этот слой “Gradient” и оставьте расстояние до голубой линии “Line” в 1px. 

11 Шаг

Возьмите Type Tool (T) и с помощью него нанесите названия ссылок в навигационной панели. Затем выполните двойной клик по каждому текстовому слою для вызова окна стилей и задайте им настройки в соответствии с изображением ниже. Шрифт, который я использовал, называется Greyscale Basic.

12 Шаг

Сейчас будем рисовать разделитель. Создайте новый слой, выберите Single Column Marquee Tool и примените его на нужное место, как показано на рисунке. Затем смените инструмент на Rectangular Marquee Tool (M), выберите для него режим “Intersect With Selection” на панели опций и создайте выделение, как показано у меня. Залейте выделение белым и нажмите Ctrl + D для отмены выделения.

13 Шаг

Выполните двойной щелчок по созданному вами слою на предыдущем шаге и откройте окно стилей, задав там параметры в точности такие, как на иллюстрации. Назовите слой “Line 1”.

14 Шаг

Продублируйте слой “Line 1” (Ctrl + J) и назовите этот слой “Line 2”. Выберите Move Tool (V) и нажмите один раз стрелку вправо на клавиатуре — слой передвинется на 1px в сторону. Затем выполните двойной клик по “Layer 2”, откройте окно Layer Style и задайте слою приведенные ниже стили.

15 Шаг

Зажмите Ctrl и выделите вместе слои “Line 1” и “Line 2”. Затем нажимаем по одному из них правой кнопкой мыши и выбираем пункт Convert To Smart Object. Назовите этот объект “Separator”.

16 Шаг

Создайте новый слой под слоем “Separator”. Выберите Rectangular Marquee Tool (M), создайте выделение, как показано у меня, и залейте его цветом #35423e. Кликните правой кнопкой мыши по слою и выберите пункт Convert To Smart Object. Далее открываем Filter > Blur > Gaussian Blur и настраиваем все в соответствии с рисунком. После этого вызываем фильтр Filter > Noise > Add Noise и также задаем приведенные ниже параметры. Установите Opacity этого слоя равным 60% и переименуйте его в “Highlight”.

17 Шаг

Кликните по слою “Separator” в палитре Layers и выполните Layer > Layer Mask > Reveal All. Выберите Gradient Tool (G) и растяните градиент от черного к прозрачному сверху и до середины вашего разделителя. Так мы задали слою маску, скрывающую его часть.

18 Шаг

Удерживая клавишу Ctrl, кликните по слою “Separator” и “Highlights” в палитре Layers, чтобы выделить их. После этого переключитесь на Move Tool (V), зажмите клавиши Alt + Shift и вместе с этим щелкните и протяните мышкой по документу. Вы только что продублировали выделенные слои. Воспользуйтесь инструментом Move Tool (V) и подвиньте их вправо. Повторите все эти манипуляции столько раз, сколько вам нужно получить разделителей и разместить их на своих местах.

19 Шаг

Выделите все слои “Separator” и “Highlight” в палитре слоев и нажмите Ctrl + G, чтобы их сгруппировать. Назовите группу “Separators”.

20 Шаг

Теперь нам нужно создать фон для подсветки активной ссылки меню для выделения ее среди остальных. Выберите Rectangle Tool (U) и создайте прямоугольник, как у меня на рисунке. Поместите этот слой под слои с текстом со всеми названиями ссылок. Выполните двойной щелчок по этому слою и задайте настройки, показанные на рисунке для стиля Gradient Overlay. После этого назовите слой “Active menu” и установите значение Opacity на 50%.

21 Шаг

Создайте новую группу слоев (Layer > New > Group), назовите ее “Search” и поместите поверх группы “Navigation”. Выберите Rounded Rectangle Tool (U), задайте радиус закругления углов равным 3px и создайте прямоугольник, как показано у меня на рисунке с цветом #104f59. Назовите слой “Text field” и понизьте его Opacity до 80%.

22 Шаг

Возьмите теперь Rectangle Tool (U) и создайте прямоугольник, как показано ниже. Поместите его в правую часть формы для поиска. Выполните двойной щелчок по этому слою и задайте ему стиль Gradient Overlay с параметрами, приведенными далее на рисунке. Затем кликните правой клавишей мыши по слою и создайте обтравочную маску (выбираем пункт Create Clipping Mask).

23 Шаг

Возьмите Type Tool (T) и напишите слово “search” на кнопке белым цветом. Установите Opacity слоя равным 75%.

24 Шаг

Выбираем Line Tool (U) и создаем вертикальную полоску цветом #123036. Назовите ее “Line”, перенесите под слой “Button” и поместите между полем для поиска и кнопкой с помощью Move Tool (V).

25 Шаг

Создайте новую группу слоев (Layer > New > Group) и назовите ее “Showcase”. Создайте еще одну группу внутри нее под названием “Background”. Переключитесь на Rectangle Tool (U) и создайте прямоугольник цветом #219aad. У меня получилась фигура 983px шириной и 273px высотой (для просмотра размеров можно воспользоваться меню Window > Info). Установите Opacity этого слоя на 55% и назовите его “Bg4”.

26 Шаг

Откройте наш пиксельный голубой прямоугольник, который вы скачали вначале урока, перенесите его в свой основной документ и расположите поверх синего прямоугольника, созданного на предыдущем шаге. Установите Opacity этого слоя на 55% и назовите его “Bg3”.

27 Шаг

Выполните клик по векторной маске слоя “bg4” для его выделения, затем создайте новый слой, выберите Gradient Tool (G) и растяните градиент цветом от #56b8e5 к прозрачному по направлению сверху вниз. Затем нажмите Ctrl + D для отмены выделения.

28 Шаг

Создайте новый слой, возьмите инструмент Rectangular Marquee Tool (M) и создайте выделение, как показано у меня ниже. Затем переключитесь на Gradient Tool (G) и растяните градиент цветами от #0f2b42 к #2a607f по направлению сверху вниз. Нажмите Ctrl + D для отмены выделения. Назовите этот слой “bg1”.

29 Шаг

Создайте новую группу слоев (Layer > New Group) и назовите ее “Sign up button”. Переключитесь на Rounded Rectangle Tool (U), установите радиус закругления углов на 2px и создайте прямоугольник, как показано у меня на картинке. Выполните двойной клик по этому слою для вызова окна стилей и задайте настройки, приведенные ниже. Затем выберите Type Tool (T) и сделайте надпись “sign up” используя белый цвет.

30 Шаг

Повторите предыдущий шаг для создания еще одной кнопки, но на этот раз с другим текстом — “learn more” на ней. После этого создайте новый слой, выберите Custom Shape Tool (U) и создайте такую стрелочку, как у меня.

31 Шаг

Создайте еще одну группу слоев (Layer > New > Group) и назовите ее “Left arrow”. Выберите Ellipse Tool (U) и нанесите на рабочую область круг цветом #406f94. Выполните двойной клик по этому слою и задайте ему стили, показанные ниже.

32 Шаг

Создайте еще один слой и при помощи инструмента Custom Shape (U) нанесите на шаблон еще одну белую стрелку. Выполняем двойной клик по слою для вызова окна Layer Style и используем настройки, показанные далее. Понизьте Opacity этого слоя до 50%.

33 Шаг

Повторите предыдущие два шага для создания очередной стрелки по правую сторону голубого прямоугольника.

34 Шаг

Создайте новую группу слоев (Layer > New > Group) и назовите ее “Image”. В эту группу нужно поместить любой скриншот из ваших рекомендуемых проектов, назовите этот слой также “Image”. Делаем двойной клик по этому слою, и задаем в появившемся окне следующие стили:

35 Шаг

Открываем Layer > Layer Style > Create Layer. Это создаст под текущим слоем новый слой из стилей оригинала. Затем вызовите Layer > Layer Mask > Reveal All, переключитесь на Gradient Tool (G) и растяните градиент от черного к прозрачному, идущий снизу к середине вашего изображения. Назовите слой “Shadow”.

36 Шаг

Создаем еще одну группу слоев (Layer > New > Group), выбираем Type Tool (T) и наносим текст. Эту группу так и назовите — “Text”.

37 Шаг

Создаем еще одну группу слоев и называем ее “Content”. Внутри нее нужно создать еще одну с названием “Shadows”. Выберите Rectangle Tool (U) и создайте прямоугольник белого цвета, как показано у меня на рисунке. Назовите слой “White shape” и установите его Opacity равным 90%.

38 Шаг

Делаем Ctrl + клик по векторной маске слоя “White shape” для его выделения. Затем создаем новый слой, выбираем Gradient Tool (G) и растягиваем градиент цветом от #8f8f8f к прозрачному, как показано у меня на рисунке. Задаем Opacity слоя равным 50% и называем его “Top shadow”. Затем берем Move Tool (V) и нажимаем пару раз на стрелку вниз на клавиатуре, чтобы сдвинуть слой чуть ниже.

39 Шаг

Создайте новый слой и при помощи Rectangular Marquee Tool (M) сделайте выделение, как показано у меня. После этого при помощи Gradient Tool (G) растяните градиент цветом #8f8f8f к прозрачному. Добавьте к слою маску и с помощью мягкой черной кисти закройте центральную часть тени. Задайте Opacity слоя равным 30% и назовите его “Vertical shadow 1”. Продублируйте этот слой (Ctrl + J), назовите дубль “Vertical shadow 2” и сдвиньте его правее.

40 Шаг

Переключитесь на инструмент Line Tool (U) и создайте горизонтальную линию толщиной в 1px и цветом #aebcc7. Назовите слой “Line”.

41 Шаг

Теперь выберите Type Tool (T) и добавьте в ваш шаблон текста. Можно также использовать картинки и все, что вам угодно.

42 Шаг

Создайте новую группу слоев под названием “Footer”. Внутри этой группы создайте слой, выберите Rectangular Marquee Tool (M) и создайте выделение, как показано у меня. Затем задайте цвет #555555 основным, выберите большую мягкую кисть и закрасьте ей верхний край выделенной области. Устанавливаем Opacity слоя в 50% и называем его “Gradient”.

43 Шаг

Создаем еще один слой, выбираем Single Row Marquee Tool и создаем выделение, как показано у меня ниже. Залейте эту полоску белым цветом и нажмите Ctrl + D для отмены выделения. Теперь откройте Layer > Layer Mask > Reveal All, выберите большую мягкую кисть и закройте часть слоя, как это сделано у меня. Сверьтесь с иллюстрацией. Задайте Opacity слоя равным 15% и назовите его “Line”.

44 Шаг

Выберите Type Tool (T) и добавьте текста в ваш футер.

Ну вот и все. Я считаю, что мы достаточно потрудились на сегодня, получив в итоге отличный стильный дизайн.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта www.tutorial9.net, автор перевода указан в начале урока.