Рисуем стильный шаблон для сайта используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В данном уроке Фотошопа мы рассмотрим процесс создания стильного шаблона для авто сайта в темно-красных тонах.


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

Рисуем стильный шаблон для сайта используя Фотошоп

Приступаем к уроку Фотошопа


1) Откроем новый файл (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")), с размерами 675х400рх и разрешением 72dpi.


Рисуем стильный шаблон для сайта используя Фотошоп

2) После этого возьмите Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"), чтобы представить слой для шапки сайта. И с помощью инструмента Convert Point Tool Инструмент - Угол / Подменю инструмента Перо (Инструмент Угол / Подменю инструмента Перо) потяните верхнюю часть в правую сторону.


Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

3) Скопируйте 2 раза последний слой. Первую копию при помощи → Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) уменьшите. В эффектах измените цвет на #330002.


Рисуем стильный шаблон для сайта используя Фотошоп

Режим смешивания поменяйте на Screen (Осветление).


4) Вторую копию слоя так же уменьшите и тоже измените цвет на #810100.


Рисуем стильный шаблон для сайта используя Фотошоп

Измените Fill (Заливка) 30%.


5) Снова, используя Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"), изобразите панель будущего меню. И с помощью Convert Point Tool Инструмент - Угол / Подменю инструмента Перо (Инструмент Угол / Подменю инструмента Перо) измените его. Как на картинке. ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

6) Опять возьмите инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"), и создайте слой с фигурой, которую мы делали ранее. Фигуру откорректируйте при помощи Convert Point Tool Инструмент - Угол / Подменю инструмента Перо (Инструмент Угол / Подменю инструмента Перо).


Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

7) Используя тот же инструмент, создайте верхнюю панель, на которой будет располагаться название сайта. И откорректируйте так же при помощи угла.


Рисуем стильный шаблон для сайта используя Фотошоп

Fill (Заливка) 0%.


Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

8) Сейчас мы должны на верхней панели слева представить круг цветом #878787, используя Elipse Tool Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "U").


Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

9) Теперь рисуем эллипс внутри только что созданного, представим своего рода вспышку.


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Fill (Заливка) 0%.


Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

10) Теперь поместим эти слои круга и вспышки в одну группу. Скопируем эту группу трижды. Первую копию представьте как на рисунке.


Рисуем стильный шаблон для сайта используя Фотошоп

11) К оставшимся двум копиям вернёмся чуть позже. Сейчас напишите название сайта → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T").


Для (car service and repair): ↓

Рисуем стильный шаблон для сайта используя Фотошоп

Для (car expert): ↓

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓


Blending Options (Параметры наложения) - Inner Shadow (Внутренняя тень) (car service and repair): ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Blending Options (Параметры наложения) - Gradient Overlay (Наложение градиента) (car service and repair): ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Blending Options (Параметры наложения) - Bevel and Emboss (Тиснение и рельеф) (car expert). ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Blending Options (Параметры наложения) - Gradient Overlay (Наложение градиента) (car expert). ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

12) Введите теперь названия кнопок меню, с параметрами: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Вот что должно быть: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

13) Теперь вернёмся к нашим «баранам», ой, к двум копиям групп. Уменьшите круги, передвиньте, как показано на рисунке и примените к ним следующие параметры. ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Измените цвет на #FA0300.


Параметры слоя: ↓


Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Параметры вспышки поменяйте Fill (Заливка) 0%, и вставьте рекламный анонс.


Для - "Welcome". ↓

Рисуем стильный шаблон для сайта используя Фотошоп

Для - "to Car Repair Station". ↓

Рисуем стильный шаблон для сайта используя Фотошоп

Для остального текста. ↓

Рисуем стильный шаблон для сайта используя Фотошоп

Рисуем стильный шаблон для сайта используя Фотошоп

Параметры слоя: ↓

Рисуем стильный шаблон для сайта используя Фотошоп

14) И в заключении вставьте картинку с нужным вам изображением. Например, машину, как тут.


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

Рисуем стильный шаблон для сайта используя Фотошоп

Вот и все.


Урок подготовлен для Вас командой сайта PhotoshopPro.ru