Дизайн шапки хостингового сайта

В этом уроке мы займёмся созданием такой шапки сайта:


Дизайн шапки хостингового сайта


1. Создайте новый документ размером 700x 258 пикселей с разрешением 72 dpi. Залейте фон цветом #002EAE.


Дизайн шапки хостингового сайта


2. Потом создайте ещё один документ размером 4х4 пикселя и инструментом Карандаш
(Pencil Tool) нарисуйте такой узор:


Дизайн шапки хостингового сайта


Перейдите в меню Редактировать»Определить узор (Edit>Define Pattern):


Дизайн шапки хостингового сайта


3. Вернёмся к нашему документу. В новом слое создайте фигуру цветом #0135A1, используя инструмент Прямоугольник с закруглёнными краями (Rounded Rectangle Tool):


Дизайн шапки хостингового сайта


4. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Наложение узора:


Дизайн шапки хостингового сайта


Обводка:


Дизайн шапки хостингового сайта


5. Предыдущим инструментом создайте ещё одну фигуру, как показано ниже:


Дизайн шапки хостингового сайта


6. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Отбрасывание тени:


Дизайн шапки хостингового сайта


Наложение градиента:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


7. Теперь тем же самым инструментом создайте ещё одну фигуру:


Дизайн шапки хостингового сайта


8. Перейдите в меню Стилей слоя (Layer Style — Blending Options) и примените эти стили:

Наложение градиента:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


Наложение узора:


Дизайн шапки хостингового сайта


Обводка:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


9. Инструментом Прямоугольник (Rectangle Tool) создайте полоску в верхней части предыдущей фигуры цветом #22C7FF. Потом установите Режим наложения – Мягкий свет
(Blending Mode – Soft Light).


Дизайн шапки хостингового сайта


10. Теперь найдите изображение облаков и вставьте его в наш документ так:


Дизайн шапки хостингового сайта


11. Инструментом Линия (Line Tool) очертите границу картинки в нижней части:


Дизайн шапки хостингового сайта


12. Инструментом Кисть (Brush Tool), используя мягкую кисть большого размера, обрисуйте правый нижний угол цветом #59F7FF


Дизайн шапки хостингового сайта


13. Теперь, используя инструмент Горизонтальный текст (Horizontal Type Tool) и настройки, показанные ниже, напишите вступительное объявление:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


14. К текстовому слою примените стиль Обводка (Layer Style — Stroke).


Дизайн шапки хостингового сайта


15. Инструментом Прямоугольник (Rectangle Tool) создайте фон для предыдущего текста. Установите Непрозрачность (Opacity) слоя – 20%:


Дизайн шапки хостингового сайта


16. Теперь напишем название сайта. Ниже показаны настройки для текста:

‘FAST’


Дизайн шапки хостингового сайта


‘HOSTING’


Дизайн шапки хостингового сайта


‘BEST HOSTING IN WEB’


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


17. Найдите подходящее изображение и вставьте его в наш документ:


Дизайн шапки хостингового сайта


18. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) создайте форму кнопки:


Дизайн шапки хостингового сайта


19. Чтобы она выглядела, как на изображении выше, примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


Обводка:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


20. Предыдущим инструментом создайте ещё одну фигуру, из которой мы сделаем свечение:


Дизайн шапки хостингового сайта


21. Примените стиль Наложение градиента (Layer Style — Gradient Overlay) и настройте так:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


22. Далее нужно написать текст меню и кнопки поиска. Настройки показаны ниже:

Для меню:


Дизайн шапки хостингового сайта


Для кнопки поиска:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


23. Инструментом Карандаш (Pencil Tool) нарисуйте разделительную линию двумя цветами.


Дизайн шапки хостингового сайта


Установите Режим наложения – Наложение (Blending Mode – Overlay):


Дизайн шапки хостингового сайта


24. Сделайте копию этой линии 3 раза и поместите в другие места на панели меню:


Дизайн шапки хостингового сайта


25. Теперь займёмся созданием поисковой области. Инструментом Прямоугольник
(Rectangle Tool) создайте полосу, затем инструментом Карандаш (Pencil Tool) нарисуйте линии, как показано ниже:


Дизайн шапки хостингового сайта

Дизайн шапки хостингового сайта


26. В заключении нарисуем несколько полосок над кнопками. Это можно сделать инструментом Линия (Line Tool) шириной 2 пикселя.

Цвет первой слева полоски — #42C0DF
Второй — #FF0000
Третьей — #4FD605
Четвёртой — #D605AC
Пятой — #D6A705.


Дизайн шапки хостингового сайта







Делаем Web-дизайн

Вас может также заинтересовать:

18 февраля 2018

Компактный цифровой фотоаппарат DMC-SZ3 Широкоугольный объектив LUMIX DC с фокусным расстоянием 25 мм и 4x оптическим зумом (25—250 мм в эквиваленте 35 мм камеры). Видеосъемка в разрешении 1280x720 24p Система...

18 февраля 2018

Дата анонса: 2010/09/20 Эффективное разрешение, МП: 12.1 Диагональ ЖК-дисплея, дюймы: 2.7 Вес с батареей и картой памяти, г: 148

18 февраля 2018

Байонет: Minolta A Тип объектива: стандартный Фокусное расстояние: переменное