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





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

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


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

Подсказка

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

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

В этом уроке мы займёмся созданием такого дизайна:


Простой дизайн сайта тюнинга машин


1. Создайте новый документ размером 766×327 пикселей с разрешением 72 dpi. Потом инструментом Прямоугольник (Rectangle Tool) создайте фигуру, как показано ниже чёрного цвета:


Простой дизайн сайта тюнинга машин


2. Тем же инструментом создайте фигуру на второй половине холста:


Простой дизайн сайта тюнинга машин


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

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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин


Обводка:


Простой дизайн сайта тюнинга машин


4. Инструментом Перо (Pen Tool) нарисуйте луч прожектора:


Простой дизайн сайта тюнинга машин


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

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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин


7. Найдите фотографию машины и поместите её в наш документ:


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин


9. Сделайте копию слоя с линией и немного сожмите её по вертикали.


Простой дизайн сайта тюнинга машин


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

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


Простой дизайн сайта тюнинга машин


Обводка:


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин


Если вы заметили, то эта полоса двойная. Левая линия – светлая, правая – чёрная. Установите Режим наложения – Мягкий свет (Blending Mode – Soft Light). Получится такой результат:


Простой дизайн сайта тюнинга машин


12. Сделайте три копии этой полосы и разместите так:


Простой дизайн сайта тюнинга машин


13. Используя инструмент Горизонтальный текст (Horizontal Type Tool) и настройки, показанные ниже, напишите названия кнопок меню:


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


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

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


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


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

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


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


17. Там же в заголовке напишите “CAR TUNING”. Настройки для текста показаны ниже.


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


18. К этому текстовому слою тоже нужно применить стили слоя. Настройки показаны ниже:

Тиснение (Layer Style - Bevel and Emboss):


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


19. Инструментом Перо (Pen Tool) нарисуйте форму фигуры, показанной ниже:


Простой дизайн сайта тюнинга машин


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


Простой дизайн сайта тюнинга машин

Простой дизайн сайта тюнинга машин


Финальный результат:


Простой дизайн сайта тюнинга машин






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

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

Ваше Имя

Ваш E-mail

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

Введите код: