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





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

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


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

Подсказка

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

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

В этом уроке мы будем создавать такой простой дизайн:


Дизайн web сайта солярия


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


Дизайн web сайта солярия


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


Дизайн web сайта солярия


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

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


Дизайн web сайта солярия


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


Дизайн web сайта солярия

Дизайн web сайта солярия


4. Найдите соответствующее изображение и поместите его, как показано ниже:


Дизайн web сайта солярия


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


Дизайн web сайта солярия


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

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


Дизайн web сайта солярия


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


Дизайн web сайта солярия

Дизайн web сайта солярия


7. Тем же инструментом Прямоугольник (Rectangle Tool) создайте кнопку в правой верхней части. Чтобы она стала такой, как показано ниже, вам нужно применить стиль Наложение градиента, чьи настройки также показаны ниже:


Дизайн web сайта солярия


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


Дизайн web сайта солярия

Дизайн web сайта солярия


9. Сделайте 5 копий слоя с кнопкой и разместите их по всей верхней части:


Дизайн web сайта солярия


10. Инструментом Линия (Line Tool) нарисуйте разделительную линию между кнопками:


Дизайн web сайта солярия

Дизайн web сайта солярия


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


Дизайн web сайта солярия

Дизайн web сайта солярия


12. Сделайте 5 копий слоя с линией и разместите их между кнопок.


Дизайн web сайта солярия


13. Найдите фотографию девушки, похожую на ту, что показана ниже, и разместите её в нашем окне.


Дизайн web сайта солярия


14. Примените к слою с фотографией стиль Обводка (Layer Style - Stroke).


Дизайн web сайта солярия


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

Для слова “look”:


Дизайн web сайта солярия


Для слова “feel”:


Дизайн web сайта солярия


Для слова “better”:


Дизайн web сайта солярия

Дизайн web сайта солярия


16. К текстовым слоям примените следующие стили:

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


Дизайн web сайта солярия


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


Дизайн web сайта солярия


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


Дизайн web сайта солярия


17. Над фотографией с девушкой тоже нужно написать текст. Настройки показаны ниже:

Слово “gallery”:


Дизайн web сайта солярия


Слово “overview”:


Дизайн web сайта солярия

Дизайн web сайта солярия

18. Теперь напишите названия кнопок меню, соблюдая такие требования к настройкам текста:


Дизайн web сайта солярия

Дизайн web сайта солярия


19. Инструментом Прямоугольник (Rectangle Tool) и Преобразовать точку привязки
(Convert Point Tool) создайте фигуру, показанную ниже.


Дизайн web сайта солярия

Дизайн web сайта солярия


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


Дизайн web сайта солярия

Дизайн web сайта солярия


21. Предыдущим инструментом создайте фигуру, как показано ниже. Её мы будем использовать для логотипа:


Дизайн web сайта солярия


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


Дизайн web сайта солярия

Дизайн web сайта солярия


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

“tanning”:


Дизайн web сайта солярия


”salon”:


Дизайн web сайта солярия

Дизайн web сайта солярия


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


Дизайн web сайта солярия


25. Выберите инструмент Произвольная фигура (Custom Shape Tool) и нарисуйте элемент, показанный ниже. Цвет фигуры - #064B7F.


Дизайн web сайта солярия

Дизайн web сайта солярия


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


Дизайн web сайта солярия


27. Сделайте копию созданной фигуры и инструментом Свободное трансформирование
(Free Transform) уменьшите её немного и залейте цветом #ebebeb. Поместите, как показано ниже:


Дизайн web сайта солярия






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

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

Ваше Имя

Ваш E-mail

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

Введите код: