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

Stylish Banner for your Website
Теперь я покажу вам, как создать стильный и эффективный баннер, который можно использовать на вашем сайте.
Прежде всего нам необходимо создать новый документ с размером  500 ? 300 пикселей и залейте его цветом # 2d164d.
Stylish Banner for your Website 01
Затем с помощью Закруглённого прямоугольника Rounded Rectangle Tool сделать выделение и заполнить эту форму любым цветом.
Stylish Banner for your Website 02
Затем мы используем следующие стили слоя для этого слоя: Градиент Gradient Overlay и Обводка:
Stylish Banner for your Website 03
Stylish Banner for your Website 04
И мы получим следующее:
Stylish Banner for your Website 05
Затем создайте новый слой  и объедините его с предыдущим, чтобы получить все эффекты в один слой. Теперь мы применяем Тень Drop Shadow стиля слоя к полученному слою:
Stylish Banner for your Website 06
Получится эффект, который вы можете видеть на картинке ниже:
Stylish Banner for your Website 07
Теперь добавим тон. Для этого мы воспользуемся Затемнитель (130 пикселей, диапазон: Midtones, Выдержка: 25%.) И сделать затемнение слева и  справа.
Stylish Banner for your Website 08
После этого мы загрузим выделение Select> Load Selection, Затем создайте новый слой и использовать Инструмент градиента чтобы заполнить выделенную часть слоя с градиентом от белого до прозрачного на верхнем и нижнем слое.
Stylish Banner for your Website 09
Stylish Banner for your Website 10
Затем снимите выделение с Ctrl + D , а  измените режим слоя на Перекрытие.
Stylish Banner for your Website 11
И последний шаг для всего дизайна баннера. Нам нужно добавить несколько бликов. Для этого мы создаем выделение по форме баннера (Ctrl + ЛКМ по миниатюре слоя в Палитре Слои). Использование Эллиптический Marque Tool, Нажмите и удерживайте Alt и вырезать кусок выбранной области. Вы должны получить тот же результат, как показано на картинке ниже.
Stylish Banner for your Website 12
После этого мы используем Инструмент градиента и заполнить его градиентом от белого до прозрачного на новый слой.
Stylish Banner for your Website 13
Снимите выделение с помощью Ctrl + D и измените режим слоя на Перекрытие. Затем нанесите Тень Drop Shadow стиля слоя для текущего слоя:
Stylish Banner for your Website 14
Получится этот эффект:
Stylish Banner for your Website 15
Теперь мы можем добавить информацию на наш баннер. В начале мы можем добавить ажурности на наш баннер. Для этих целей мы можем использовать Эти кисти. Идём в Выделение-Загрузить выделение. Создайте новый слой и поставьте отпечаток кистью в выбранной области.
Stylish Banner for your Website 16
Снять выделение Ctrl + D и изменить режим слоя на Перекрытие, прозрачность до 30%.
Stylish Banner for your Website 17
Теперь настройки резкости с помощью Резкость Sharpen Tool (Brush: 200px, Mode: Normal, сила: 50%).
Stylish Banner for your Website 18
Теперь я хотел бы добавить изображение. Я нашел это. Открыть изображение, отделить его от фона с помощью Polygonal Lasso Tool и скопируйте его в наш основной холст, сделать его немного меньше и вращать с помощью Ctrl + T.
Stylish Banner for your Website 19
После этого мы собираемся выделить цветок. Для этого эффекта применяется Внешнее свечение Outer Glow стиля слоя для текущего слоя:
Stylish Banner for your Website 20
Получится нечто подобное:
Stylish Banner for your Website 21
Создадим новый слой и объединим его с предыдущим, чтобы получить все эффекты в один слой. Теперь выберите форму баннера (Ctrl + ЛКМ по Миниатюре слоя в Палитре Слоёв). После этого Инвертировать выделение с помощью  Ctrl + Shift + I и нажмите Удалить .
Stylish Banner for your Website 22
Теперь, снять выделение  Ctrl + D. Добавим текстовую информацию. Используйте Horizontal Type Tool и введите строку “Новый СПА салон”  белым цветом.
Stylish Banner for your Website 23
Шрифт мы использовали  Avant Garde Gothic – коммерческий шрифт. Вы можете использовать любой другой шрифт, если у вас нет этого. Теперь применим к этому слою текста Тень Drop Shadow стиля слоя:
Stylish Banner for your Website 24
Теперь мы получим что-то вроде этого:
Stylish Banner for your Website 25
После этого, введите еще одну строку, типа “Нажмите здесь, чтобы войти”  цветом # 80bb00 используя тот же стиль слоя(Тень).
Stylish Banner for your Website 26
И последнее, что нам необходимо сделать, это добавить  название. Введите слово “АКВА”, используя белый цвет.
Stylish Banner for your Website 27
Установите следующие параметры смешивания для этого слоя с текстом: Тень Drop Shadow и Внешнее свечение Outer Glow:
Stylish Banner for your Website 28
Stylish Banner for your Website 29
Мы должны получить результат применения стилей слоя как на рисунке ниже.
Stylish Banner for your Website 30
Вот результат:
Stylish Banner for your Website 31.



Случайный пост Оставить комментарий