Основное меню


И так приступим к созданию кнопки для сайта. Откройте Photoshop и создайте новый документ размерами 500 x 300 пикселей и залейте его белым цветом. Затем выберите инструмент Rounded Rectangle Tool - Radius: 30px (Инструмен "Прямоугольник со скругленными углами" - Радиус: 30 пикселей) и нарисуйте следующую форму как на картинке ниже, используя цвет #d61d23.

Красивая кнопка для сайта

После этого примените следующие стили к этому слою:

Красивая кнопка для сайта

Красивая кнопка для сайта

Получаем следующее:

Красивая кнопка для сайта

Теперь сделайте дубликат данного слоя нажав сочетание клавишь Ctrl+J, создайте новый слой и объедините его с дубликатом первого слоя, затем нажмите вкладку Edit -> Transform -> Flip Vertical (Редактирование -> Трансформирование -> Отразить по вертикали).

Красивая кнопка для сайта

Создаем отражение для кнопки. Смотрим на картинку ниже. Нажимаем кнопку маски в самом низу панели инструментов, выбираем Инструмент "Градиент" и проводим линию градиента как показано на картинке.

Красивая кнопка для сайта

Теперь опять нажимаем кнопку маски в самом низу панели инструментов и нажимаем "Delete" на своей клавиатуре.

Красивая кнопка для сайта

Перейдем к следующему шагу. Добавим блики на кнопку. Для этого выберите Rounded Rectangle Tool - Radius: 80 px (Инструмен "Прямоугольник со скругленными углами" - Радиус: 80 пикселей) и создать новую форму, используя белый цвет.

Красивая кнопка для сайта

Растрируйте слой с белой формой. После этого примените маску слоя, как только что делали до этого, а потом для этого слоя поставьте режим наложени - "перекрытие".

Красивая кнопка для сайта

Красивая кнопка для сайта

Мы сделали кнопку. Теперь, перейдем к следующему шагу. Добавим элемент дизайн к этой кнопке. Выбраем Ellipse Tool (Инструмент "Овальная область") и создаем окружность, как на картине ниже,  заливаем окружность, используя белый цвет:

Красивая кнопка для сайта

После этого применяем следующие параметры наложения для этого слоя:

Красивая кнопка для сайта

Красивая кнопка для сайта

Красивая кнопка для сайта

Красивая кнопка для сайта

Получаем следующее:

Красивая кнопка для сайта

Далее, добавляем изображение в окружность, вы можете поискать изображение на Яндекс.Картинках или использовать вот эту картинку. Добавляем картинку на холст и перемещаем ее внутрь окружности, как показано ниже.

Красивая кнопка для сайта

Отлично. Теперь слой с картинкой сделаем черно-белым и поменяем режим наложения. Нажмите вкладку Image -> Adjustments -> Desaturate (Изображение -> Коррекция -> Черно-белое...) и выставьте для этого слоя режим наложения "Перекрытие".

Красивая кнопка для сайта

И теперь добавьте какую нибудь надпись на кнопку:

Красивая кнопка для сайта

Конечный результат, смотрите ниже:

Красивая кнопка для сайта

Источник материала

Раздел: Статьи для веб-дизайнера

лестница из ясеня


Дополнительно Популярное
Дизайнерский веб-ресурс: Дле, Вордпресс, Джумла, фотошоп, плагины, иконки, шаблоны, текстуры, смайлики, логотипы.