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

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

Мы продолжаем публиковать наши уроки 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 и напишите текст белым цветом. Стильный баннер для сайта спа-салона - уроки фотошоп Теперь добавим стиль слоя Тень=Drop Shadow Стильный баннер для сайта спа-салона - уроки фотошоп Должно получиться что-то вроде этого. Стильный баннер для сайта спа-салона - уроки фотошоп После этого, напишем еще одну строку, цветом # 80bb00 используя тот же стиль слоя. И последнее, что мы должны сделать, это добавить название. Введите его белым цветом. Стильный баннер для сайта спа-салона - уроки фотошоп Примените следующие стили слоя Тень= Drop Shadow Стильный баннер для сайта спа-салона - уроки фотошоп Внешнее свечение=Outer Glow Стильный баннер для сайта спа-салона - уроки фотошоп Стильный баннер для сайта спа-салона - уроки фотошоп С  применением стилей слоя у вас должен получиться результат как на картинке ниже. Стильный баннер для сайта спа-салона - уроки фотошоп Наш урок закончен. Я надеюсь, что наш урок Web дизайна был полезен и интересен для вас, экспериментируйте, и вы получите отличные результаты. Удачи! Ссылка на источник: http://www.photoshopstar.com

Добавить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив
  • Яндекс.Метрика