Делаем кнопку для сайта в Photoshop

Владимир Молочков (В.Новгород)

Жестких стандартов на размеры веб-кнопок не существует. Но на практике сложились следующие величины (в пикселях).

1. Квадратная кнопка

Командой Файл > Создать создайте новый документ в формате RGB (размер холста должен соответствовать размеру кнопки).

Для заливки будущей кнопки градиентом выделите все изображение и залейте будущую кнопку линейным градиентом в одном направлении.

Выполните команду Выделение > Все, а затем выделите границу Выделение > Модификация > Граница при ее ширине в 10 пикселов.

Далее заполните выделенную область тем же линейным градиентом, но в обратном направлении.

Выполняем команду Выделение > Отменить выделение.

2. Круглая кнопка с тенью 88х88

Создайте новый документ в формате RGB.

Командой Слои > Новый > Слой добавьте новый слой. Cформируйте на этом новом слое инструментом Овальная область, удерживая клавишу Ctrl круглую область под предполагаемую кнопку.

Залейте выделенную область линейным градиентом в одном направлении. Затем уменьшите диаметр выделения командой Выделение > Модификация > Сжать с параметром в 5 пикселов.

Далее заполните выделенную область тем же градиентом, что и ранее, но в обратном направлении, а потом выделение снимите.

Осталось применить эффекты стиля слоя командой Слои > Стиль слоя > Тиснение и подобрать параметры кнопки. По окончании работы над кнопкой слои нужно свести и перенести кнопку на нужный фон, выделив ее волшебной палочкой.

3. Кнопка для Web с эффектом капли воды 88х88

Создайте новый документ.

Создайте новый слой, а на нем инструментом Овальная область нарисуйте окружность.

Вызовите редактор градиентов и создайте новый градиент от желтого к черному.

Заполните окружность градиентом в направлении из левого нижнего угла в правый верхний.

Снимите выделение и мягкой кистью нарисуем белую точку на кнопке. Затем применим стиль слоя.

Эффекты, примененные к такой кнопке, вы можете увидеть на палитре слоев.

В заключение выполните команду Слои > Выполнить сведение. Один из возможных вариантов кнопки приведен на рисунке.

4. Программа Crystal Button

Для создания кнопок сайтов, помимо Photoshop, существует множество специальных программ, например, Crystal Button.

В процессе создания кнопки в этой программе можно изменить ее контур, добавить глубины, сделать изображение полупрозрачным, указать направление освещения и т.д. В Crystal Button имеется довольно большое количество заготовок, используя которые можно значительно сократить время создания кнопки.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>