Главная >> Кнопки >> Профессиональные кнопки для сайта в Фотошопе

Профессиональные кнопки для сайта в Фотошопе

Автор: Артемий   
17.05.2007 17:15
Профессиональные кнопки для сайта в ФотошопеВ этом уроке кнопок для сайта в фотошопе мы с вами научимься еще одной технике рисования отличных кнопочек для сайта. В нашем варианте они красные. При желании вы сами сможете изменить цвет, но для этого необходимо нарисовать оригинал. Итак, начнем наш урок рисования кнопок в photoshop! Не забываем оставлять комментарии к этому уроку (ссылка снизу).

Для начала я хочу показать вам, к чему мы будем стремиться. Это конечный результат нашего урока:

Professional Buttons Result Image

Шаг 1.

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

 

{mosgoogle} 

 

Размер документа, который использовал я - 304 х 120 пикселей. Теперь заполним задний фон темным градиентом, я использловал градиент от  #373a41 к.#26282f.

Gradient Background Added

Шаг 2.

Теперь начнем рисовать нашу кнопочку. Сперва, начнем с создания пустого слоя. Затем найдем в списке инструментов фотошопа Rounded Rectangle Tool.

Rounded Rectangle Tool Icon

Необходимо убедиться, что это именно прямоугольник с закругленными краями: 

Rounded Rectangle Tool Settings

Изменяем передний цвет (в панели инструментов photoshop снизу) на красный цвет (#ae0d0e). После этого нарисуем форму нашей будущей кнопки с помощью выбранного инструмента.

Rounded Rectangle Drawn

Хорошая работа ;)

Шаг 3.

Теперь нам надо бы добавить каких-нибудь эффектов фотошопа к нашей кнопке, а то она смотрится совсем безлико. Кликаем по нашему слою правой кнопкой и выбираем Blending Options (параметры смешивания).

Blending Options

После того, как зайдете в настройки смешивания, примените следующие настройки: 

 

  1. Drop Shadow (тень)

  2. Inner Glow (внутренняя тень)

  3. Gradient Overlay (Градиент)

 После применения выбранных настроек photoshop у вас должна получиться кнопочка, похожая на эту

 

After Applying Layer Styles

Шаг 4.

Создадим новый слой (напомню, горячее сочетание клавиш - Shift+Ctrl+N), а затем нам необходимо получить контур нашей кнопки, для этого зажимаем клавишу Ctrl и кликаем по слою с красной кнопкой.

Selection

Используя инструмент Градиента, нарисуем похожий градиент (можно от белого к розовому, а можно от белого к прозрачному).

White Gradient Button

Используя Rectangular Marquee Tool (выделение), сначала выделим, а затем удалим верхнюю половину нашего градиента (выделим нижнюю половину и нажмем клавишу Delete).

Bottom Half Deleted

 

Теперь установим  layer mode для этого слоя Overlay или Soft Light, так же установим непрозрачность в  40-55%.

Layer Mode and Opacity Changed

Шаг 4.

Ну и наконец, конечно же, нам необходимо добавить текст.

Выберем инструмент текста type tool. С помощью него напишем необходимый нам текст. Настройки я использовал следующие:
Tahoma, Bold, 14 pt, No Anti-Aliasing, #ffffff.

Text Written

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

Professional Buttons Result Image

 

Автор - http://www.photoshopspot.com/

Перевод - http://graphic-tutorials.ru/

Комментарии (1)


Показать/скрыть комментарии
...
Урок не плох, но если кому-то нужны не только кнопки, а еще примеры создания полноценного дизайна/макета, то вам суда - в раздел дизайн.
Photoshop , 18-01-2013

Написать комментарий

меньше | больше

busy