Создание веб сайтов: дизайн шапки для видео хостинга

В этом уроке мы рассмотрим, как создать современную стильную шапку для сайта в Photoshop. Шаблон очень легкий в верстке, поэтому проблем с использованием макета по назначению быть не должно.

1 Шаг

Сначала создайте документ размером 1000×190 пикселей.

2 Шаг

Выберите в панели инструментов Rectangle Tool и создайте прямоугольник, подобный моему.

3 Шаг

Выполните клик правой клавишей мыши по слою с прямоугольником, выберите пункт Blending Options и задайте слою следующий стиль:

4 Шаг

Теперь создайте новый слой и при помощи Rectangular Marquee Tool создайте выделенную область высотой 2px внизу по всей длине вашей будущей навигационной панели и залейте ее белым цветом (#FFFFFF).

5 Шаг

Теперь добавьте стили и к этому слою, как показано ниже.

6 Шаг

Вот что у вас должно получиться:

7 Шаг

Теперь повторим то же самое с верхом навигационной панели. Создайте еще один слой и выделенную область, как показано ниже. Залейте ее белым цветом (#FFFFFF).

8 Шаг

Задайте слою следующий стиль:

9 Шаг

Вы должны получить нечто, похожее на рисунок ниже.

10 Шаг

Теперь мы создадим вид активной кнопки. На новом слое создайте выделенную область, руководствуясь примером ниже, и залейте ее белым цветом: #FFFFFF.

11 Шаг

Теперь задайте этому слою следующие стили:

12 Шаг

Теперь у вас должно выйти следующее:

13 Шаг

Далее при помощи все того же Rectangular Marquee Tool на новом слое создаем выделение, как показано ниже и заливаем его опять-таки белым цветом #FFFFFF.

14 Шаг

Теперь задайте слою следующие стили:

15 Шаг

Посмотрите, что должно получиться.

16 Шаг

Добавьте текст к вашему меню, чтобы обозначить кнопки.

17 Шаг

Далее нам нужно сделать разделители между ссылками кнопок. На новом слое создайте выделение, как показано ниже (шириной 2px) и залейте его белым (#FFFFFF).

18 Шаг

Теперь задайте ему такие стили:

19 Шаг

Должно получиться, как на иллюстрации.

20 Шаг

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

21 Шаг

Далее на очередном новом слое нам нужно создать выделение, как показано на рисунке. Это делается при помощи комбинации инструментов эллиптического и прямоугольного выделения. Залейте выделенную область белым цветом.

22 Шаг

Теперь примените к этому слою следующие настройки:

23 Шаг

Должно получиться нечто подобное:

24 Шаг

Здесь я использовал обыкновенный треугольник в логотипе и нанес пару простых фраз.

25 Шаг

Последним шагом будет создание формы поиска. Поскольку планировалось создать шапку для видео хостинга, форма поиска должна выделяться на сайте явным образом. Поэтому, используя инструмент прямоугольного выделения, выделите на новом слое очередную область, как показано на рисунке и залейте ее цветом #FFFFFF.

26 Шаг

Теперь задайте этому слою следующие настройки:

27 Шаг

Теперь давайте нарисуем кнопку поиска. На новом слое создайте выделение, как показано:

28 Шаг

Задайте этому слою следующие стили:

29 Шаг

Добавьте еще немного текста и вуаля! Также я немного детализировал навигационную панель, сделав подобие личного кабинета. Удачи!

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

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

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

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

Переведено с сайта psdvibe.com, автор перевода указан в начале урока.