Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Какой версией фотошопа вы пользуетесь?
Всего ответов: 648
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Кнопки - Красивая кнопка для сайта

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

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

В этом уроке я вам покажу как нарисовать в фотошопе красивую модную кнопку для сайта...

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

Вроде пояснил. А теперь приступим к рисованию. Надеюсь, вы уже заранее запустили фотошоп... :)

Рисуем красивую кнопку для сайта

1. Создадим новое изображение размерами чуть больше будущей кнопки:

нарисовать в фотошопе красивую модную кнопку для сайта

2. Наша кнопка будет с немного закруглёнными краями, по этому лучше её нарисовать в векторном формате. Для этого выбираем инструмент Rounded Rectangle Tool, радиус закругления углов (Radius) поставим равным 4 пикселя, цвет любой, и нарисуем такую фигуру:

нарисовать в фотошопе красивую кнопку для сайта

3. А сейчас будем добавлять к нашей фигуре спецэффекты. Сразу, для начала, нужно выставить прозрачность Fill слоя с фигурой в 0%, а затем залазим в Blending Options (правый клик на слое, и там выбираем такой пункт) на вкладку Gradient Overlay — это мы будем раскрашивать нашу кнопку. Выставим там такие параметры:

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

4. На вкладке Stroke (обводка или же бордюр) выставим такие значения:

кнопка для сайта в фотошопе

5. На вкладке Inner Glow (внутреннее свечение) такие:

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

6. А тут добавим внутреннюю тень (вкладка Inner Shadow):

нарисовать в PhotoShop кнопку для сайта

7. Наконец-то сделаем так, чтобы наша кнопка отбросила тень (вкладка Drop Shadow), и тем самым казалась более объёмной (типа она не на плоскости а в пространстве):

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

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

нарисовать в фотошопе красивую кнопку для сайта

8. Сейчас добавим штриховку, блики и пару эффектов. Для этого сразу создадим новый слой и выделим нашу фигуру (зажимаем клавишу Ctrl и кликаем на слой с фигурой, затем отпускаем Ctrl):

нарисовать в фотошопе оригинальную кнопку для сайта

9. Не снимая выделения кликаем на новом слое (на панели слоёв) и зальём выделение любым цветом (с помощью инструмента Paint Bucket Tool):

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

10. Теперь прозрачность Fill нашего нового слоя (точнее непрозрачность) выставим в 0% и в Blending Options добавим несколько эффектов. Сразу добавим внутреннее свечение (Inner Glow):

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

11. Затем добавим блики с помощью градиента (вкладка называется Gradient Overlay):

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

Вот тут вы можете увидеть более подробно какой я применил градиент (чтобы открыть данное окошко — кликните на полоске справа от надписи Gradient. Нижние квадратики определяют цвет нашего блика — кликаем по ним и в пункте Color выбираем белый цвет. Верхние квадратики — это прозрачность — выставьте значения прозрачности как я показал на рисунке ниже (кликаем по верхним квадратам и в поле Opacity вписываем соответствующее ему значение). Потом кликаем по среднему верхнему квадрату и ромбики, которые по бокам, пододвигаем как можно ближе к нему:

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

12. Сейчас добавим штриховку. Для этого нам сразу нужно создать текстуру штриховки (как её создавать вы можете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5)), а потом на вкладке Pattern Overlay выставить следующие значения параметров:

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

И как результат получаем красивую кнопку для применения на вашем сайте:

модная кнопка для сайта, нарисованная в фотошопе

13. И напоследок было бы неплохо добавить к нашей кнопки какой-нибудь текст (шрифт, который я для этого использовал, можно скачать чуть ниже). Финальная версия моей кнопки выглядит следующим образом:

красивая и стильная кнопка для вашего сайта

Осталось пожелать вам удачи! Экспериментируйте и у вас обязательно всё получится!




Похожие материалы:


Просмотров: 2713 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz