Стильный баннер для сайта спа-салона

Мы продолжаем публиковать наши уроки Web дизайна. Но они не только о сайтах. Сегодняшний урок о популярном элементе сайта - баннере.

Сложность: низкая
Время: до 1 часа

Навыки для «прокачки»:

- создание композиции
- работа со свойствами слоя
- создание объема и блеска
- работа с кистями

Для выполнения урока нужно скачать кисти цветы

Сейчас я покажу вам, как создать стильный и эффектный баннер, который вы можете использовать на своем сайте.
Прежде всего, нам необходимо создать новый документ размерами 500 × 300 пикс. и залейте его цветом # 2d164d.

Затем с помощью Прямоугольник со скругленными углами=Rounded Rectangle Tool и нарисуйте форму как на картинке ниже с любым цветом.

Добавим следующие стили слоя:
Наложение градиента=Gradient Overlay

Обводка=Stroke

Вот что должно получиться.

Затем создайте новый слой и объедините его с предыдущим, чтобы получить все эффекты в один слой. Теперь мы применим стиль слоя Тень=Drop Shadow.

Результат вы видите на картинке ниже.

Теперь добавим некоторый объем нашему баннеру. Для этого мы используем инструмент Осветлитель=Dodge Tool(130 пикселей, Диапазон=Range, Средние тона=Midtones, Выдержка=Exposure%. 25), и сделайте затемнение с левой и правой стороны.

После этого мы загрузим выделение Выделение-Загрузить выделение=Select-Load Selection, а затем создайте новый слой и, используя инструмент, Градиент=Gradient Tool, заполните выделенную область градиентом от белого к прозрачному в верхней и нижней части слоя.

Затем снимите выделение Ctrl + D, и измените режим слоя на Перекрытие=Overlay

И последний шаг для дизайна нашего баннера. Нам необходимо добавить блики. Для этого мы создаем выделение (Ctrl + клик левой кнопкой мыши на иконке слоя в палитре слоев). Используйте инструмент Эллипс=Elliptical Marque Tool, удерживая клавишу Alt, и сократите часть выделенной области. У вас должен получиться тот же результат, как на картинке ниже.

После этого используя инструмент, Градиент=Gradient Tool залейте область градиентом от белого к прозрачному на новом слое.

Снимите выделение с помощью Ctrl + D и измените режим слоя на Перекрытие=Overlay. Затем добавим стиль слоя:
Тень=Drop Shadow

Вот что должно получиться.

Теперь мы можем добавить некоторую информацию, на наш баннер. В начале, мы добавим узор. Для этих целей мы будеи использовать наши кисти. Загрузите выделение на баннере снова (Ctrl + левый клик на иконке слоя в палитре слоев), создаем новый слой и рисуем выбранной Кистью=Brush.

Удалите выделение с помощью Ctrl + D и измените, режим слоя на Перекрытие=Overlay, затем установите Непрозрачность=Opacity на 30%.

Теперь настроим резкость, для этого используйте инструмент Резкость=Sharpen Tool

Далее, мы добавим изображение. Вы можете использовать свое, или скачать это.

Откройте изображение, отделите его от фона, используя Прямолинейное лассо=Polygonal Lasso Tool и скопируйте его в ваш основной документ, сделаем его немного меньше и повернем с помощью Ctrl + T.

Добавим стиль слоя:
Внешнее свечение=Outer Glow

Вот что у нас получилось.

Создаем новый слой и объединим его с предыдущим, чтобы получить все эффекты в один слой. Теперь загрузите выделение (Ctrl + левый клик на иконке слоя в палитре слоев). После этого инвертируем выделение с помощью клавиш Ctrl + Shift + I и нажимаем Удалить=Delete, чтобы удалить все выступающие детали на баннере.

Теперь снимаем выделение с помощью Ctrl + D. Пришло время, добавить текст. Используйте инструмент Горизонтальный текст=Horizontal Type Tool и напишите текст белым цветом.