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

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


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


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-дизайн

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

23 июня 2018

Светосильный нормальный объектив. Хорошо подходит для съемки в путешествиях и для съемки ростовых портретов при естественном освещении. Изображение, свободное от дисторсий и с великолепными разрешением и цветопередачей. Обеспечивает высокий контраст...

23 июня 2018

Уникальный гибридный видоискатель - с переключением между оптическим и электронным режимом, а также возможностью наложения информации. Ретродизайн с "железным" управлением диафрагмой и выдержкой. Матрица 12 Мп формата APS-C, фикс-объектив 35 экв.мм F/2, диапазон ISO 100-12800, монитор 460000 точек, видоискатель 1440000 точек, серийная съемка 5 кадр/с, HD видео 1280x720p@24.

23 июня 2018

Дата анонса: 2006/05/30 Эффективное разрешение, МП: 5.1 Диагональ ЖК-дисплея, дюймы: 2.5