Рисуем современный шаблон для сайта |
||||
| Автор: omorsik Дата: 10 марта 2010 | Раздел: Уроки Photoshop | |||
В этом уроке Вы научитесь рисовать в Adobe Photoshop шаблон для сайта в современном стиле. Для тех, кто еще не пробовал себя в качестве вэб-дизайнера, советую попробовать, занятие увлекательное. Урок довольно длинный, 94 скриншота, во всех подробностях, надеюсь не зря старалась. Те, кто только вчера открыл фотошоп, думаю будет немного сложновато, но попробовать стоит, может я ошибаюсь :) На самом деле ничего сложного нет, главное не упустить ничего. 1. Создаем новый документ (File>New), я создала 1024х768px. Заливаем холст цветом #131313.  [thumb]  [/thumb]3. Выставляем параметры слоя. Это можно сделать несколькими способами: Layer > Layer style > Blending options или делаем двойной клик по слою на палитре слоев. В дальнейшем я не буду расписывать как это можно сделать, а просто буду называть какие именно стили и параметры применять к слою. Blending Options>Outer Glow
 [thumb]  [/thumb]4. Используем тот же инструмент для создания вот такого изогнутого эллипса: [thumb]  [/thumb]Рисуете эллипс, затем берете инструмент Direct Selection Tool (A) и хватаясь за узлы меняете форму, можете также использовать направляющие, небольшие линии, исходящие из узлов, они являются касающими к кривой, надеюсь геметрию еще помним? :) С их помощью можно лего менять кривизну линий. И выставляем параметры слоя: Blending Options>Inner Glow
 Gradients parameters:
[center][thumb]  [/thumb]
5. Создайте копию последнего слоя и трансофрмируем объект ( Ctrl+T), уменьшив его немного, смотрим скрин:
[thumb]  [/thumb]
Меняем параметры слоя на такие: Blending Options>Gradient Overlay  [/center]Gradient’s parameters: [thumb]  [/thumb][thumb]  [/thumb]6. Теперь создадим узор из полосатых линий для шаблона. Для этого создадим новый документ 20х20px с прозрачным фоном. Возьмем инструмент Rectangle Tool (U), выберем белый цвет и сделаем высокий прямоугольник - это будет диагональной полоской, но пока она вертикальная. Ширину определите на глаз, где-то чуть уже, чем половина созданного документа. Теперь трансформируем его, жмем Ctrl+T и вверху в апаремтрах выберите угол наклона в 45о. Затем в полях координат задайте значения XY:0;0, XY:0.20; XY: 20;20 - это позволит иметь точные косые линие, которые сольются в текстуру, а не будут обрывками, если делать все на глаз. Вот так это должно выглядеть: [thumb]  [/thumb]Готовый узор (pattern):  Определим его теперь и для фотошопа как Узор (Pattern), идем Edit > Define Pattern... 7. Создайте новый слой, используйте инструмент Rectangle Tool (U) и сделайте такой вот прямоугольник, который будет являться частью фона:
[thumb]  [/thumb]
Выставьте такие параметры к солю: Blending Options>Gradient Overlay
 Gradient’s parameters:
[center][thumb]  [/thumb]
Blending Options>Pattern Overlay
 [thumb]  [/thumb]
8. Сделайте копию последнего слоя и переместите его вправо, так чтобы на шаблон заходила часть с видимыми полосками, примерно вот так:
[thumb]  [/thumb]
Теперь выставим параметры для этого слоя: Blending Options>Outer Glow
 [thumb]  [/thumb]
10. Сделайте копию этого слоя и с помощью свободной трансформации ( Ctrl+T) уменьшим прямоугольник:
[thumb]  [/thumb]
Выставим для слоя такие параметры: Blending Options>Gradient Overlay
[thumb]  [/thumb]
[thumb]  [/thumb]
11. Берем иснтрумент Ellipse Tool (U) и делаем вот такую окружность справа на шаблоне, так, чтобы она заходила на панель кнопок.
[thumb]  [/thumb]
Параметры слоя выставляем такие: Fill 0% на палитре слоев (на скриншоте обведено красным) Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
 12. Зажмите кнопку Alt и сделайте клик между слоями с белой окружностью и панелью для кнопок:
[thumb]  [/thumb]
Теперь продублируйте слой с окружностью и перетащите ее на противоположную сторону шаблона симметрично:
[thumb]  [/thumb]
13. Берем снова иснтрумент Rectangle Tool (U) и делаем прямоугольник в нижней части шаблона, цвет - #1A1A1A.
[thumb]  [/thumb]
Выставляем такие значения для параметра слоя: Blending Options>Outer Glow
 Blending Options>Bevel and Emboss [/center]
 [thumb]  [/thumb]
14. Берем инструмент Rounded Rectangle Tool (U), выставляем радиус закругления краев 5px и создаем прямоугольник для текстовой части шаблона:
[thumb]  [/thumb]
Параметры слоя: Blending Options>Drop Shadow
 Gradient’s parameters:
[thumb]  [/thumb]
[thumb]  [/thumb]
15. Делаем копию этого слоя и с помощью свободной трансформации Ctrl+T уменьшаем размер:
[thumb]  [/thumb]
Праметры слоя: Fill 0% на палитре слоев. Blending Options>Stroke
 [thumb]  [/thumb]
16. Теперь будем сипользовать 2 иснтрумента для создания более сложной формы. Для начала берем Rectangle Tool (U) и создаем прямоугольник, в районе панели для кнопок, ничего страшного если не там, потом подвинете. Далее берем иснтрумент Ellipse Tool (U), удерживаем зажатоей клавишу Alt рисуем окружность, поверх прямоугольника, таким образом мы вырежем пересечением этой окружности нужный нам кусок из прямоугольника. При помощи иснтрументов Direct Selection Tool (A) и Path Selection Tool (A), свободной трансформации Ctrl+T можно управлять размерами, положением и формами объектов. После того как результат Вас удовлетворит, копируем окружность ( Ctrl+C) и вставляем ( Ctrl+V) с противоположной стороны прямоугольника. Вот такая фигура должна получиться:
[thumb]  [/thumb]
Параметры слоя: Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
[thumb]  [/thumb]
17. Создаем еще один прямоугольник в верхней части нашего шаблона, используем для этого инструмент Rectangle Tool (U)
[thumb]  [/thumb]
Параметры слоя: Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
[thumb]  [/thumb]
18. Создаем новый слой, берем инструмент Pencil Tool (B) и рисуем 2 вертикальных линии на панели кнопок:
[thumb]  [/thumb]
Параметры слоя: Blending mode (режим наложения слоя) меняем на Soft Light, расположено на панели слоев.
19. Используем иснтрумент Ellipse Tool (U), рисуем круг-основу для нашего логотипа.
[thumb]  [/thumb]
Праметры слоя: Blending Options>Outer Glow
 Gradient’s parameters:
[thumb]  [/thumb]
 Параметры слоя:
Fill 0%, на панеле слоев. Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
 Праметры слоя:
Blending Options>Stroke
 [thumb]  [/thumb]
22. С помощью инструмента Ellipse Tool (U) рисуем еще один эллипс для создания блика на нашем логотипе:
[thumb]  [/thumb]
Параметры слоя: Fill 0%, на панели слоев. Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
 Параметры слоя:
Fill 0%, на панели слоев. Blending Options>Outer Glow
 [thumb]  [/thumb]
25. Теперь создадим "странички" в поле для контента, используем для этого уже привычный инструмент Rectangle Tool (U) :)
[thumb]  [/thumb]
Параметры для слоя: Fill 0%, на панели слоев. Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
[thumb]  [/thumb]
26. Делаем копию слоя и переносим ее в правую часть шаблона симметрично, заходим в свойства слоя и меняем угол градиентной заливки со 180о на 0о.
[thumb]  [/thumb]
27. Далее нарисуем визуальные разделители из точек сверху и снизу. Точки будут самыми настоящими :) Берем инструмент Horizontal Type Tool (T), выбираем подходящий шрифт, цвет устанавливаем в #6c6c6c и зажимаем клавишу "." пока не получим нужной длинны.
Добавим объемности разделителям, выставим для этого такие параметры слоя: Blending Options>Drop Shadow
 [thumb]  [/thumb]
[thumb]  [/thumb]
28. Теперь заполним пустующие кнопки верхнего меню, шрифт MicroN55, 10pt.
 
 Параметры слоя:
Blending Options>Gradient Overlay
 Gradient’s parameters:
[thumb]  [/thumb]
[thumb]  [/thumb]
30. Упустила небольшой момент, но мы его сейчас добавим, боковые полоски у верхней планки, берем инструмент Line Tool (U) и рисуем 2 полоски по бокам, цвет берем #8D8D8D.
[thumb]  [/thumb]
31. Далее добавим в том же стиле надписи над разделительными линиями из точек, для определения назначения части страницы, забъем примерный текст и его формат, а справа расположим галерею работ. Для этого поместим пиктограмки скришотов и применим к ним такие настройки стиля слоя: Blending Options>Stroke
 [thumb]  [/thumb]
32. Теперь все :) Скрин в полном размере:
[thumb]  [/thumb]
|
||||
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.
|
||||
Комментарии: 0 Просмотров: 126 |
НАЗАД | |||
Навигация
КистиОпрос на сайте
| Самое полезное: |
Последние поступления
Шутки
Градиенты
| ||||
| ||||
| ||||
| ||||
| ||||
Авторизация
Популярное
| ||||
| ||||
| ||||
| ||||
| ||||
| ||||
| ||||
| ||||
