Мы запустили Форум! (*beta)






Видеокурс «Photoshop Professional. От чайника до профи за один день» поможет Вам стать профессионалом в фотошопе всего за 24 часа! Курс специально построен так, чтобы Вы научились создавать работы профессионального качества уже на следующий день. МИНИМУМ ТЕОРИИ, МАКСИМУМ ПРАКТИКИ

Подробнее...




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

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


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

Подсказка

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

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

Мы займёмся созданием такого дизайна шапки сайта:


Дизайн шапки для игрового сайта


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


Дизайн шапки для игрового сайта


2. Вырежьте изображение игры Halo и поместите в наш документ:


Дизайн шапки для игрового сайта


3. Инструментом Прямоугольник (Rectangle Tool) создайте большую фигуру поверх изображения игры. Потом, удерживая Alt, создайте ещё одну фигуру внутри первой, чтобы сделать вырез для картинки Halo. Это создаст рамку. Потом инструментом Линия (Line Tool) создайте две линии, как показано ниже:


Дизайн шапки для игрового сайта


Потом примените к рамке стиль Наложение узора (Layer Style - Pattern Overlay):


Дизайн шапки для игрового сайта


4. Таким же образом создайте ещё одну рамку справа и примените к ней тот же стиль Наложение узора (Layer Style - Pattern Overlay):


Дизайн шапки для игрового сайта

Дизайн шапки для игрового сайта


5. Создайте новый документ размером 4×4 пикселя с разрешением 72 dpi. Инструментом Карандаш (Pencil Tool) создайте узор, как показано ниже:


Дизайн шапки для игрового сайта


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


Дизайн шапки для игрового сайта


6. Создайте ещё одну тонкую рамку внутри правого окна.


Дизайн шапки для игрового сайта


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

Наложение узора:


Дизайн шапки для игрового сайта


Обводка:


Дизайн шапки для игрового сайта


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


Дизайн шапки для игрового сайта


9. К этой фигуре примените стиль Наложение узора (Layer Style - Pattern Overlay):


Дизайн шапки для игрового сайта


10. Теперь нужно создать рамку для кнопки. Используя технику вырезания из фигур, создайте такую рамку цветом #617081:


Дизайн шапки для игрового сайта


11. Потом создайте фигуру на кнопке цветом #7B8492.


Дизайн шапки для игрового сайта


12. Установите Заливку (Fill) слоя – 50%. Потом создайте ещё один документ размером 4х4 пикселя с разрешением 72 dpi. Инструментом Карандаш (Pencil Tool) создайте узор цветом #292F3D.


Дизайн шапки для игрового сайта


Сохраните ваш узор, перейдя в меню Редактировать»Определить узор:


Дизайн шапки для игрового сайта


13. Используя всё тот же инструмент Прямоугольник (Rectangle Tool) создайте фигуру, как показано ниже, чёрного цвета:


Дизайн шапки для игрового сайта


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

Наложение узора:


Дизайн шапки для игрового сайта


Обводка:


Дизайн шапки для игрового сайта


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


Дизайн шапки для игрового сайта


16. Инструментом Прямоугольник (Rectangle Tool) создайте тонкую полоску цветом #7B8492.


Дизайн шапки для игрового сайта


17. Установите Заливку (Fill) слоя – 50%. Инструментом Карандаш (Pencil Tool) нарисуйте такую стрелку:


Дизайн шапки для игрового сайта

Дизайн шапки для игрового сайта


18. Объедините все слои, принадлежащие кнопке в группу. Сделайте копию группы четыре раза и расположите кнопки так:


Дизайн шапки для игрового сайта


19. Используя показанные ниже настройки текста, напишите названия кнопок и нумерацию:

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


Дизайн шапки для игрового сайта


Настройки для цифр:


Дизайн шапки для игрового сайта

Дизайн шапки для игрового сайта


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


Дизайн шапки для игрового сайта


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

Слово ‘HALO’:


Дизайн шапки для игрового сайта


Слова ‘Welcome to’, ‘game community’:


Дизайн шапки для игрового сайта

Дизайн шапки для игрового сайта


22. К тексту примените стиль Отбрасывание тени (Layer Style - Drop Shadow):


Дизайн шапки для игрового сайта


23. На верхней и нижней полосе рамки нужно нарисовать ещё пару полос, как показано ниже. Цвет полос - #626672. Для этого можете использовать инструмент Прямоугольник
(Rectangle Tool) и Преобразовать точку привязки (Convert Point Tool). Также примените стиль Наложение узора (Layer Style - Pattern Overlay):


Дизайн шапки для игрового сайта

Дизайн шапки для игрового сайта




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

написал : Гость

А чего правая бордюра короче на 1px? =)

---------------


написал : Stark

ну а ты сделай одинаковые:)

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: