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





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

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


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

Подсказка

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

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

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


Персональный заголовок 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 сайта






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

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

Ваше Имя

Ваш E-mail

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

Введите код: