В этом уроке Вы научитесь рисовать в Adobe Photoshop шаблон для сайта в
современном стиле. Для тех, кто еще не пробовал себя в качестве
вэб-дизайнера, советую попробовать, занятие увлекательное. Урок
довольно длинный, 94 скриншота, во всех подробностях, надеюсь не зря
старалась. Те, кто только вчера открыл фотошоп, думаю будет немного
сложновато, но попробовать стоит, может я ошибаюсь :) На самом деле
ничего сложного нет, главное не упустить ничего.
1. Создаем новый документ (
File>New), я создала
1024х768px. Заливаем холст цветом
#131313.
2. Берем иснтрумент
Ellipse Tool (U) и делаем вот такой эллипс как показано на скриншоте, в "шапке" будущего шаблона, цвет - белый:
3. Выставляем параметры слоя. Это можно сделать несколькими способами:
Layer > Layer style > Blending options
или делаем двойной клик по слою на палитре слоев. В дальнейшем я не
буду расписывать как это можно сделать, а просто буду называть какие
именно стили и параметры применять к слою.
Blending Options>Outer Glow
4. Используем тот же инструмент для создания вот такого изогнутого эллипса:
Рисуете эллипс, затем берете инструмент
Direct Selection Tool (A)
и хватаясь за узлы меняете форму, можете также использовать
направляющие, небольшие линии, исходящие из узлов, они являются
касающими к кривой, надеюсь геметрию еще помним? :) С их помощью можно
лего менять кривизну линий.
И выставляем параметры слоя:
Blending Options>Inner Glow
Blending Options>Gradient Overlay
Gradients parameters:
5. Создайте копию последнего слоя и трансофрмируем объект (
Ctrl+T), уменьшив его немного, смотрим скрин:
Меняем параметры слоя на такие:
Blending Options>Gradient Overlay
Gradient’s parameters:
6. Теперь создадим узор из полосатых линий для шаблона. Для этого создадим новый документ
20х20px с прозрачным фоном. Возьмем инструмент
Rectangle Tool (U), выберем
белый цвет и сделаем высокий прямоугольник - это будет диагональной
полоской, но пока она вертикальная. Ширину определите на глаз, где-то
чуть уже, чем половина созданного документа. Теперь трансформируем его,
жмем Ctrl+T и вверху в апаремтрах выберите угол наклона в
45о. Затем в полях координат задайте значения
XY:0;0, XY:0.20; XY: 20;20 -
это позволит иметь точные косые линие, которые сольются в текстуру, а
не будут обрывками, если делать все на глаз. Вот так это должно
выглядеть:
Готовый узор (pattern):
Определим его теперь и для фотошопа как Узор (Pattern), идем
Edit > Define Pattern...
7. Создайте новый слой, используйте инструмент
Rectangle Tool (U) и сделайте такой вот прямоугольник, который будет являться частью фона:
Выставьте такие параметры к солю:
Blending Options>Gradient Overlay
Gradient’s parameters:
Blending Options>Pattern Overlay
8.
Сделайте копию последнего слоя и переместите его вправо, так чтобы на
шаблон заходила часть с видимыми полосками, примерно вот так:
9. Берем инструмент
Rounded Rectangle Tool (U), выбираем цвет для будщей панели кнопок
#010101, выставляем радиус скругления углов в 10px
и рисуем вот такую панель:
Теперь выставим параметры для этого слоя:
Blending Options>Outer Glow
10. Сделайте копию этого слоя и с помощью свободной трансформации (
Ctrl+T) уменьшим прямоугольник:
Выставим для слоя такие параметры:
Blending Options>Gradient Overlay
Gradient’s parameters:
11. Берем иснтрумент
Ellipse Tool (U) и делаем вот такую окружность справа на шаблоне, так, чтобы она заходила на панель кнопок.
Параметры слоя выставляем такие:
Fill 0% на палитре слоев (на скриншоте обведено красным)
Blending Options>Gradient Overlay
Gradient’s parameters:
 | 
