Баннер для вашего сайта

На днях готовил простой, но изящный баннер на сайт заказчика. Хотел сделать собственный вариант, а не пользоваться фотошопными исходниками. В итоге нашел хороший и понятный урок на сайте http://www.exunit.ru. Знаю особенности многих индивидуальных ресурсов пропадать из сети, поэтому выкладываю урок списанным текстом и оригинальными картинками. В конце приложу баннер, который сделал по этому уроку.

Баннер для вашего сайта

В этом уроке мы с вами создадим стильный и эффективный баннер, который можно использовать на вашем сайте.

Прежде всего нам необходимо создать новый документ с размерами холста 500 x 300 пикселей и залейте его цветом # 2d164d.

Затем, используя
Ellipse Tool (Произвольные фигуры) 
выбираем
Rounded Rectangle Tool (Прямоугольник со скругленными углами) 
В верхней панели инструментов выберите такиеже значения

Нарисуйте форму ниже с любым цветом.

Следующим шагом ЛКМ двойной клик по слою с фигурой.

Применим для этой фигуры следующие стили:

Вот, что мы получаем на данном этапе:

Находясь на активном верхнем слое создадим новый слой нажав значок указанный на рис. ниже.

Теперь удерживая клавишу Ctrl делаем активными новый слой и слой с фигурой. Нажмем сочетание клавишь Ctrl+E, чтобы объединить новый слой с предыдущим (слой с фигурой). Это нужно для, того, чтобы скрыть стили, которые мы применяли к слою с фигурой (Отмечено ниже)

Кликаем, двойным щелчком ЛКМ по получившемуся слою, чтобы применить стиль слоя.

Получится эффект, который вы можете видеть на рисунке ниже:

Давайте пойдём дальше. Добавим объема нашему баннеру. Для этого мы используем Dodge Tool (Затемнитель)  с такими параметрами.

Мягкоя кисть с диаметром 130 пикселей,
диапазон: средние тона,
экспозиция: 30%
аэрограф: нажат
и сделаем затемнение слева и справа.

Устанавливаем кисть справа примерно по середине (рис. ниже) и делаем 4 клика ЛКМ. Тоже самое проделываем и на левой стороне.

По завершению этой процедуры приспупае к наложению градиента. Для этого зажав клавишу Ctrl кликните ЛКМ по миниатюре слоя с изображением (На рис. под №1), для того, что-бы загрузить выделение.

Далее создадим новый слой нажатием на значок  (На рис. под №2)

В панели инструментов выберем Gradient Tool ( градиентная заливка )  и задаём параметры которые указаны ниже.

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

Следующим шагом выбираем режим наложения для этого слоя (Overlay — перекрытие ). Ctrl + D снимаем выделение.

Теперь нужно добавить блик. Для этого мы создаем выделение по форме баннера. Зажав клавишу Ctrl кликните в палитре слоев ЛКМ по миниатюре слоя с изображением.

Затем в самом верху создайте еще один новый слой. Выбираем инструмент Elliptical Marque  (Овальная область, клавиша «М»), удерживая нажатой клавишуAlt отнимите часть выделенной области. Вы должны получить примерно тот же результат, как на картинке ниже.

После этого мы используем инструмент Gradient Tool  (градиент «G«), и заполните выделенный участок градиентом от белого к прозрачному. Убедитесь, что вы находитесь на новом слое.

Снимите выделение с помощью Ctrl + D и измените режим наложения на мягкий свет. Затем нанесите тень: Layer — Layer Style — Drop Shadow (Слои — Стиль слоя — Тень)

На данном этапе вот, что должно получиться.

Теперь давайте нанесём изображение на наш баннер. Для этого создадим новый слой в самом верху. Слой — Новый — Слой(Layer — New — Layer «Shft+Ctrl+N»). Теперь активируем контурное выделение баннера (Клик ЛКМ по миниатюре слоя с баннером при нажатой клавише Ctrl)

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

Оставаясь на новом слое кликните кистью 3 раза.

Ctrl + D снимите выделение и измените режим наложения на перекрытие (Overlay), понизьте прозрачность до 40%

Теперь давайте добавим изображение цветка. Я взял изображение из своей коллекции клипартов, вы же можете скачать из интернета другое, которое вам понравится. Отделите рисунок от фона любым известным вам способом и перенесите его на наш баннер. При помощи свободного трансформирования (Ctrl + T) разместите ваш цветок на баннере.

Теперь опять активируем контурное выделение баннера (Клик ЛКМ по миниатюре слоя с баннером при нажатой клавишеCtrl)

Инвертируем выделение (Ctrl + Shift + I) и находясь на слое с изображением цветка нажимаем Delete снимем выделение Ctrl + D

Придадим изображению стиль (Слой — Стиль слоя — Внешнее свечение) Layer — Layer Style — Outer Glow

Ну и в завершении добавляем текст. Тут все зависит от вашей фантазии. Выбираем инструмент текст, основной цвет ставим белый, кликаем в том месте где будет ваш текст и пишем.

Я выбрал шрифт для текста Calibri размером 24px.

Сразу придадим тексту стиль:

 

Теперь добавим текст внизу. Шрифт Calibri размер 16px, цвет #c3fd77. Придадим стиль:

И последнее, что нам нужно сделать, это добавить слово EXUNIT.

Шрифт тот-же, цвет белый, размер 48px. Придадим стиль:

На этом урок закончен. Я надеюсь, что он был для вас полезным и интересным, не стесняйтесь ставить эксперименты и вы получите отличные результаты. Желаю удачи!

От автора savatop.ruдля меня урок был действительно полезный. Меньше чем за полчаса я сварганил простой баннер для сайта по производству домов. Вот у меня такой получился.

Здесь же выкладываю кисти для фотошопа с интересными принтами. Еще раз большое человеческое спасибо автору http://www.exunit.ru

 

,

Комментариев пока нет

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