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





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

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


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

Подсказка

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

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

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


Дизайн сайта Mu Online сообщества


1. Создайте новый документ размером 680×265 пикселей с разрешением 72 dpi. Найдите подходящую картинку на любом Mu Online сайте. Картинка должна быть на весь холст:


Дизайн сайта Mu Online сообщества


2. Инструментом Перо (Pen Tool) нарисуйте область меню, как показано ниже:


Дизайн сайта Mu Online сообщества


3. Сделайте копию слоя и следуйте дальнейшим шагам, чтобы получить такой эффект:


Дизайн сайта Mu Online сообщества


4. Установите Заливку (Fill) копии – 0%. Перейдите в меню Стилей слоя
(Layer Style - Blending Options) и примените эти стили:

Внутренняя тень:


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества


6. Чтобы получить вышеуказанный эффект для кнопок, нужно установить Заливку (Fill) слоя – 0% и применить эти стили в меню Стилей слоя (Layer Style - Blending Options):

Внутренняя тень:


Дизайн сайта Mu Online сообщества


Внешнее свечение:


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества


7. Инструментом Перо (Pen Tool) создайте область заголовка:


Дизайн сайта Mu Online сообщества


8. Сделайте копию слоя заголовка, установите Заливку (Fill) копии – 0% и примените эти стили в меню Стилей слоя (Layer Style - Blending Options):

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


Дизайн сайта Mu Online сообщества


Внутренняя тень:


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества


Результат:


Дизайн сайта Mu Online сообщества


9. Инструментом Перо (Pen Tool) нарисуйте такой указатель на левой стороне кнопки:


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


10. Сделайте копии слоя с указателем и поместите их на остальные кнопки:


Дизайн сайта Mu Online сообщества


11. Теперь нужно написать текст. Для этого мы воспользуемся инструментом Горизонтальный текст (Horizontal Type Tool) и эти настройки текста:


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


12. К текстовым слоям нужно применить такие стили:

Отбрасывание тени (Layer Style - Drop Shadow):


Дизайн сайта Mu Online сообщества


Тиснение:


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


13. Теперь нужно написать название сайта в область заголовка. В данном случае это – “MU online community”. Далее показаны настройки для слов:

“Mu online”:


Дизайн сайта Mu Online сообщества


“community”:


Дизайн сайта Mu Online сообщества


Результат:


Дизайн сайта Mu Online сообщества


14. Также нужно применить стили слоя для текста. Перейдите в меню Стилей слоя
(Layer Style - Blending Options) и настройте так:

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


Дизайн сайта Mu Online сообщества


Тиснение:


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


15. Теперь сделаем чёрную рамку. Для этого инструментом Прямоугольник (Rectangle Tool) создайте большой прямоугольник чёрного цвета по размерам превосходящий нашу область картинки. Потом, удерживая Alt, создайте ещё одну фигуру, чтобы вырезать внутреннюю часть:


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


16. Сделайте копию последнего слоя и перейдите в меню Стилей слоя
(Layer Style - Blending Options). Используйте эти настройки стилей:

Внутренняя тень:


Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества

Дизайн сайта Mu Online сообщества


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


Дизайн сайта Mu Online сообщества


Результат:


Дизайн сайта Mu Online сообщества


17. В конце добавьте логотип с любого Mu online сайта и урок закончен:


Дизайн сайта Mu Online сообщества






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

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

Ваше Имя

Ваш E-mail

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

Введите код: