Шапка сайта на тему дайвинга

В конце урока вы получите такой результат:


Шапка сайта на тему дайвинга


1. Создайте новый документ размером 688×220 пикселей с разрешением 72 dpi. Залейте фон цветом #25333F.


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга


3. К этой форме примените стиль Обводка (Layer Style — Stroke).


Шапка сайта на тему дайвинга


4. Сделайте копию слоя с кнопкой и тем же инструментом, удерживая Alt, создайте фигуру, как показано ниже. Это сделает небольшой вырез копии слоя:


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


5. Примените ко второму прямоугольнику стиль Наложение градиента
(Layer Style — Gradient Overlay):


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


Обводка:


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга


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

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


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


Обводка:


Шапка сайта на тему дайвинга


8. Теперь нарисуем точечный узор в правом основании кнопки. Ниже показано увеличенное изображение узора, который вам нужно нарисовать:


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


9. Объедините все слои с кнопкой в группу. Сделайте 4 копии группы и поместите их так:


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга


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

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


Шапка сайта на тему дайвинга


Внутреннее свечение:


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


12. Используя предыдущий инструмент, создайте область для заголовка:


Шапка сайта на тему дайвинга


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

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


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


14. В новом слое, используя мягкую кисть, закрасьте углы прямоугольника цветом #D1D9D8, как показано ниже:


Шапка сайта на тему дайвинга


15. Сделайте две копии точечного узора любой кнопки и расположите их так:


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга


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

Внутреннее свечение:


Шапка сайта на тему дайвинга


Обводка:


Шапка сайта на тему дайвинга


18. Найдите фотографию с аквалангистом и поместите её так:


Шапка сайта на тему дайвинга


19. Удерживая Alt, кликните между фотографией и предыдущей фигурой. Это создаст обтравочную маску и ограничит фотографию:


Шапка сайта на тему дайвинга


20. Инструментом Горизонтальный текст (Horizontal Type Tool) напишите названия кнопок меню, используя эти настройки шрифта:


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


21. К слоям с текстом нужно применить стиль Отбрасывание тени (Layer Style — Drop Shadow):


Шапка сайта на тему дайвинга


22. Теперь напишите название сайта. Настройки шрифта показаны ниже:


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


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

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


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


24. Напишите вторую часть заголовка, соблюдая эти настройки текста:


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


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

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


Шапка сайта на тему дайвинга


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


Шапка сайта на тему дайвинга

Шапка сайта на тему дайвинга


26. Осталось добавить текст объявления:

Настройки для слова ‘WELCOME’:


Шапка сайта на тему дайвинга


Для слов ‘to our diving club’, ‘for everyone’:


Шапка сайта на тему дайвинга


Для слова ‘DIVING’:


Шапка сайта на тему дайвинга


Финальный результат:


Шапка сайта на тему дайвинга




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

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

22 сентября 2018

Nikon COOLPIX L810 – недорогая и несложная суперзум-камера. Диапазон фокусных расстояний 26х (22.5-585 экв.мм), оптическая стабилизация изображения, матрица 16 Мп формата 1/2.3", монитор высокого разрешения 921000 точек, видео HD 1280x720@30. Камера ориентирована на беспроблемную работу в автоматических режимах, возможности управлять параметрами съемки у нее минимальны.

22 сентября 2018

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

22 сентября 2018

Дата анонса: 2011/07/21 Эффективное разрешение, МП: 14.1 Диагональ ЖК-дисплея, дюймы: 2.7 Вес с батареей и картой памяти, г: 160