Персональный заголовок web сайта

Данный урок учит создавать хороший разработанный заголовок для персональных веб-сайтов.


Персональный заголовок web сайта


1. Создайте новый документ размером 770×150 px и разрешением 72 dpi. Инструментом Заливка (Paint Bucket Tool) залейте фон цветом 2D2D2D.



Персональный заголовок web сайта


2. Создайте новый документ размером 4×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте текстуру для показанного ниже узора.



Персональный заголовок web сайта


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



Персональный заголовок web сайта


3. Создайте новый слой (Create New Layer) и инструментом Прямоугольник (Rectangle Tool) создайте фон, предназначенный для фона меню, расположенного на заголовке сайта. Цвет фона — чёрный.



Персональный заголовок web сайта


4. Примените для фона стиль Наложение узора (Layer Style — Pattern Overlay).



Персональный заголовок web сайта


Персональный заголовок web сайта


5. Теперь нам следует создать первичный слой заголовка сайта, используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) и, удерживая Alt, вырезать нижнюю часть инструментом Прямоугольник (Rectangle Tool).



Персональный заголовок web сайта


Персональный заголовок web сайта


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



Персональный заголовок web сайта


Настройки градиента:



Персональный заголовок web сайта


Персональный заголовок web сайта


7. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте блеск вдоль верхней части панели меню.



Персональный заголовок web сайта


8. Установите Заливку (Fill) слоя — 0% и примените для блеска стиль Наложение градиента (Layer Style — Gradient Overlay).



Персональный заголовок web сайта


Настройки градиента:



Персональный заголовок web сайта


Персональный заголовок web сайта


9. Создайте новый слой (Create New Layer), выберите инструмент Карандаш (Pencil Tool) и нарисуйте вертикальную двойную разделительную линию на панели меню (первый цвет — #2D2D2D, второй — #FFFFFF).



Персональный заголовок web сайта


10. Установите для этого слоя Режим наложения – Наложение (Blending Mode – Overlay).



Персональный заголовок web сайта


Персональный заголовок web сайта


11. Сделайте 3 копии последнего слоя и в режиме Свободного трансформирования
(Free Transform) расположите их так, как показано в рисунке ниже:



Персональный заголовок web сайта


12. Снова создайте новый слой (Create New Layer), выберите инструмент Карандаш (Pencil Tool) и нарисуйте указатель белого цвета, расположенный на левой стороне панели меню.



Персональный заголовок web сайта


Персональный заголовок web сайта


13. Сделайте 4 копии нового слоя и инструментом Свободное трансформирование
(Free Transform) разместите копии, как в следующем рисунке:



Персональный заголовок web сайта


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



Персональный заголовок web сайта


Персональный заголовок web сайта


15. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) создайте слой над правой стороной панели меню, разработанный для вспомогательных кнопок цветом #333333:



Персональный заголовок web сайта


Персональный заголовок web сайта


16. Примените для слоя стиль Обводка (Layer Style — Stroke).



Персональный заголовок web сайта


Персональный заголовок web сайта


17. Вставьте названия вспомогательных кнопок. Настройки указаны ниже:



Персональный заголовок web сайта


Персональный заголовок web сайта


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



Персональный заголовок web сайта


Настройки градиента:



Персональный заголовок web сайта


Персональный заголовок web сайта







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

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

19 сентября 2018

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

19 сентября 2018

Сочетание несочетаемого в быстром ультраширокоугольном зум-объективе Nikon 17-35 mm f/2.8D ED-IF AF-S Zoom-Nikkor, который имеет минимальное фокусное расстояние в размере двадцати восьми сантиметров и высокое качество по всему диапазону возможных фокусных расстояний.

19 сентября 2018

Байонет: KA/KAF/KAF2 Тип объектива: телеобъектив Фокусное расстояние: переменное