Урок по созданию кнопки для сайта


Кнопки в фотошопе

В интернете можно найти ресурсы автоматической генерации кнопок. Воспользовавшись этими сервисами можно быстро и легко получить стандартную кнопку на свой сайт. Но если вы хотите что-то стильное и эксклюзивное, то делать это лучше самим. Достаточно обладать минимальными художественными навыками, а Photoshop сделает все остальное. При этом, чтобы добиваться впечатляющих эффектов совсем необязательно иметь в своем арсенале большую коллекцию всевозможных плагинов. Эффекты вполне можно сделать вручную в настройках стиля слоя.
Здесь вы можете скачать готовые готовые стильные кнопки в фотошопе - кнопки для сайта скачать.
Кнопки для сайта скачать Чтобы лучше понять урок загрузите готовую кнопку png, исходник psd и градиент.

1. Для начала создадим круглое выделение (Elliptical Marquee Tool с нажатой клавишей shift) и заливаем его подготовленным градиентом.

Градиент

2. Создаем новый слой. Берем мягкую черную кисть airbrush и делаем тень.

3. На новом слое берем мягкую белую кисть, уменьшаем прозрачность до 50% и ставим подсветку. На том же слое (или на новом) ставим сам блик. Уменьшаем размер мягкой белой кисти, ставим ей прозрачность 100% и поверх подсветки ставим белый кружок самого блика.

Кнопка

4. Идем в стиль слоя, а точнее в Bevel and Emboss. Настройки здесь зависят только от вашей фантазии, экспериментируйте! Самое главное, что в результате настроек этого фильтра создается создается прозрачный ободок. Поэтому рисунок ободка своей кнопки в фотошопе вы можете легко поменять, просто поместив слой с кнопкой поверх слоя с другим цветом или текстурой.

drop shadow inner shadow inner glow bevel contour

В результате у нас получилась вот такая симпатичная шоколадная кнопочка.

button

Форма у кнопки может быть любая. Чтобы сделать прямоугольную кнопку со скругленными углами вомпользуйтесь инструментом Rounded Rectangle Tool. Создаем необходимую прямоугольную или квадратную форму для кнопки, не меняя инструмента, кликните правой кнопкой мыши на фигуре и выберите Make selection. И дальше повторите все шаги с начала статьи.

Напоминаю, что авторские кнопки в фотошопе можно скачать здесь - кнопки для сайта скачать. Коллекция постоянно пополняется.

5 июля 2012 г.
Подготовила Ольга Мараева.
При использовании статьи и иллюстраций ссылка на сайт автора обязательна.

Google