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





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

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


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

Подсказка

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

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

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


Дизайн сайта Ragnarok Community


1. Создайте новый документ размером 770×300 пикселей с разрешением 72 dpi. Залейте фон цветом #3B6EA5.


Дизайн сайта Ragnarok Community


2. Вставьте в документ картинку аниме.


Дизайн сайта Ragnarok Community


3. Инструментом Прямоугольник (Rectangle Tool) создайте форму под кнопку:


Дизайн сайта Ragnarok Community


4. Примените стиль Наложение градиента (Layer Style - Gradient Overlay):


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community


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

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


Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


Обводка:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


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

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


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


Обводка:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community


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

Внутреннее свечение (Layer Style - Inner Glow):


Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


Обводка:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


Результат:


Дизайн сайта Ragnarok Community


10. Для удобства работы, объедините все слои кнопки в группу. Сделайте копию группы 5 раз и поместите кнопки так:


Дизайн сайта Ragnarok Community


11. Инструментом Карандаш (Pencil Tool) нарисуйте разделительную линию.


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


12. Установите Заливку (Fill) слоя – 40% , сделайте несколько копий вертикальной линии и поместите их на других местах:


Дизайн сайта Ragnarok Community


13. Инструментом Прямоугольник (Rectangle Tool) нарисуйте горизонтальную линию.


Дизайн сайта Ragnarok Community


14. Примените к ней стиль Наложение градиента (Layer Style - Gradient Overlay):


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


15. Сделайте копию последнего слоя и сделайте линию шире, потом поместите её так:


Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community


17. К этому прямоугольнику примените стиль Наложение градиента
(Layer Style - Gradient Overlay):


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


Обводка:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


18. Сделайте копию этого слоя с прямоугольником и инструментом Свободное трансформирование (Free Transform) уменьшите её. Измените цвет фигуры #FF0000. Далее показаны настройки стилей слоя:

Внутреннее свечение (Layer Style - Inner Glow):


Дизайн сайта Ragnarok Community


Тиснение:


Дизайн сайта Ragnarok Community


Обводка:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


19. Используя эти настройки, напишите часть названия сайта:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


20. На сайте Ragnarok вы сможете найти такую надпись:


Дизайн сайта Ragnarok Community


21. Инструментом Перо (Pen Tool) нарисуйте фигуру, показанную ниже. Это будет свечением:


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


22. Установите Заливку (Fill) слоя с фигурой и примените стиль Наложение градиента
(Layer Style - Gradient Overlay):


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community


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


Дизайн сайта Ragnarok Community

Дизайн сайта Ragnarok Community




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

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

Ваше Имя

Ваш E-mail

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

Введите код: