Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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


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


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.


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






Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: