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

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


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


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

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

24 февраля 2018

Действительно портативный телефото зум-объектив 1 NIKKOR 30–110 мм – это идеальный объектив, который можно взять с собой для съемки в выходной день. Оптимизированная оптика байонета 1 Nikon: два элемента из...

24 февраля 2018

Дата анонса: 2009-02-04 20:08:03 Эффективное разрешение, МП: 10 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 180

24 февраля 2018

Canon EOS 1100D kit 18-55 - компактная и доступная новинка в серии цифровых зеркальных камер. CMOS-матрица формата APS-C с разрешением 12 мегапикселей, мощный 14-битный процессор DIGIC 4, серийная съемка 3,2 кадра в секунду, широкий диапазон чувствительности ISO от 100 до 6400. 9-точечная система АФ по широкой зоне, полупрозрачное зеркало, 3 режима фокусировки в Live View, экспозамер по 63 зонам, ЖК-дисплей на 2,7 дюйма с разрешением 270 000 точек, съемка видео высокой четкости. В комплекте объектив 18-55 мм