Баннер-кнопка для сайта

Сейчас мы пройдем процесс создания баннера-кнопки для сайта.

1. Создаем документ 500×300 пикселей, заливаем его цветом — ##2d164d.

2. Рисуем прямоугольник со скругленными углами. Используем инструмент под одноименным названием — «Прямоугольник со скругленными углами» (кнопка «U» на клавиатуре или на панели инструментов слева).

3. Накладываем на прямоугольник градиент, вызываем данную функцию двойным кликом по слою с прямоугольником — «Наложение градиента» (либо кнопка «G» или на панели инструментов). Цвета: #335617 и #5e8f17.

4. Добавляем обводку(двойной клик по слою — «Обводка»). Цвета для обводки: #345717 и #94cb54. При этом сдвигаем первую контрольную точку цвета на 22%.

И получим следующую картину:

5. Добавим тень.Всё тот же двойной клик по слою с прямоугольником и настраиваем параметры тени:

Наш прямоугольник получил долю объема:

6. Добавим объемности баннеру. Для этого сначала создадим новый слой и объединим его со слоем прямоугольника. Теперь возьмем инструмент «Затемнитель» («О» на клавиатуре, в панели инструментов), настроим его параметры следующим образом: размер 130 пикселей, жесткость 25%

Используем затемнитель по обеим сторонам баннера и получим следующий эффект:

7. Выделим прямоугольник через Выделение —> Загрузить выделенную область…

Создадим новый слой и снова воспользуемся Градиентом для того, чтобы залить выделенную область сверху и снизу полупрозрачным белым. Градиент берем от белого к прозрачному, контрольную точку непрозрачности выставляем на 25%

Снимаем выделение (Ctrl+D), и изменим режим слоя на «Перекрытие»

Смотрим, что у нас получилось:

8. Теперь нанесем на наш баннер немного лоска и свечения. Для этого сперва выделим фигуру нажав на миниатюру слоя, при этом удерживая нажатой Ctrl.

Используя инструмент «Овальная область» («М» на клавиатуре или в панели инструментов), жмем Alt и таким образом вырезаем часть общего выделения. Должно получится нечто подобное:

Создав новый слой, наносим на выделенную область точно такой же градиент, какой мы наносили в прошлый раз (от белого к прозрачного, 25% прозрачности). Градиент наносим снизу вверх. Снимаем выделение (Ctrl+D) и меняем режим слоя на Перекрытие.

Добавим тень новому слою.Двойной клик по слою откроет параметры наложения:

Получим такой эффект:

9. Заключительный момент: украшаем баннер и добавляем на него информацию.

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

Итак, снова загружаем выделение баннера ( нажимаем на миниатюру слоя, при этом удерживая нажатой клавишу Ctrl) и создаем новый слой, на котором и будем рисовать нашей кистью.

Настройки кисти:

Нанеся рисунок кисти на баннер, снимем выделение (Ctrl+D) и изменим режим слоя на Перекрытие,а прозрачность выставим в положение 30%. Наш баннер выглядит так:

Теперь настроим резкость изображения, используя инструмент «Резкость» ( в панели инструментов). Настройки для инструмента: размер кисти — 200 пикселей, режим — нормальный, интенсивность — 50%)

Узор на баннере стал чётче:

Добавим изображение на баннер. Изображение, которое буду использовать я, можно скачать здесь.

Открываем его в Photoshop и после копирования (кликаем по иконке слоя, зажав Ctrl ), переносим на наш баннер. Уменьшаем под размеры баннера и немного повращаем (Ctrl+T). Если необходимо, передвигаем картинку туда, где хотим ее видеть.

Теперь добавим сияния и яркости нашей орхидее. Для этого дважды кликаем по слою с цветком и выбираем в списке «Внешнее свечение». Настройки следующие:

После чего наш цветок будет выглядеть так:

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

Снимаем выделение (Ctrl+D). Теперь принимаемся за текст — прорекламируем новый СПА салон)). Текст пишем белым цветом, шрифт я использовала Century Gothic, вы можете использовать тот, который вам больше нравится.

Добавим надписи тень:

Ниже добавим ссылку для перехода, что-то вроде «Перейти» и этому текстовому слою дадим такую же тень, как и первой надписи, цвет возьмем — #80bb00, размер — 16 пикселей. Теперь наш баннер выглядит вот так:

И остался последний штрих — добавим название нашего салона. Назовем его AQUA и напишем белым цветом, размер шрифта — 54 пикселя.

Добавим стили к названию: тень и внешнее свечение:

И в заключении мы получаем баннер, над которым трудились:

Источник: Photoshopstar.