Профессиональные кнопки для сайта в Фотошопе |
| Автор: Артемий |
| 17.05.2007 17:15 |
 В этом уроке кнопок для сайта в фотошопе мы с вами научимься еще одной технике рисования отличных кнопочек для сайта. В нашем варианте они красные. При желании вы сами сможете изменить цвет, но для этого необходимо нарисовать оригинал. Итак, начнем наш урок рисования кнопок в photoshop! Не забываем оставлять комментарии к этому уроку (ссылка снизу).
Для начала я хочу показать вам, к чему мы будем стремиться. Это конечный результат нашего урока:
Шаг 1.Начнем с создания нового документа в photoshop для нашей кнопочки или вы можете открыть свой шаблон сайта, который рисовали прежде.
{mosgoogle}
Размер документа, который использовал я - 304 х 120 пикселей. Теперь заполним задний фон темным градиентом, я использловал градиент от #373a41 к.#26282f.
Шаг 2.Теперь начнем рисовать нашу кнопочку. Сперва, начнем с создания пустого слоя. Затем найдем в списке инструментов фотошопа Rounded Rectangle Tool.
Необходимо убедиться, что это именно прямоугольник с закругленными краями:
Изменяем передний цвет (в панели инструментов photoshop снизу) на красный цвет (#ae0d0e). После этого нарисуем форму нашей будущей кнопки с помощью выбранного инструмента.
Хорошая работа ;) Шаг 3.Теперь нам надо бы добавить каких-нибудь эффектов фотошопа к нашей кнопке, а то она смотрится совсем безлико. Кликаем по нашему слою правой кнопкой и выбираем Blending Options (параметры смешивания).
После того, как зайдете в настройки смешивания, примените следующие настройки:
После применения выбранных настроек photoshop у вас должна получиться кнопочка, похожая на эту
Шаг 4.Создадим новый слой (напомню, горячее сочетание клавиш - Shift+Ctrl+N), а затем нам необходимо получить контур нашей кнопки, для этого зажимаем клавишу Ctrl и кликаем по слою с красной кнопкой.
Используя инструмент Градиента, нарисуем похожий градиент (можно от белого к розовому, а можно от белого к прозрачному).
Используя Rectangular Marquee Tool (выделение), сначала выделим, а затем удалим верхнюю половину нашего градиента (выделим нижнюю половину и нажмем клавишу Delete).
Теперь установим layer mode для этого слоя Overlay или Soft Light, так же установим непрозрачность в 40-55%.
Шаг 4.Ну и наконец, конечно же, нам необходимо добавить текст. Выберем инструмент текста type tool. С помощью него напишем необходимый нам текст. Настройки я использовал следующие:
Ну вот и все, очень простые и стильные кнопки для сайта готовы. Спасибо за чтение, надеюсь этот мини учебник фотошоп вам понравился. Жду комментариев.
Автор - http://www.photoshopspot.com/ Перевод - http://graphic-tutorials.ru/ |
