Как сделать кнопку для сайта

Для любого сайта очень важны кнопки. Особенно если речь идет об интернет магазине. В этой статье можно узнать один из способов создания кнопки для вашего сайта. Работать будем в Фотошопе.

Для начала нужно создать новый документ в Adobe Photoshop. Фон и размер на ваше усмотрение.

Далее нужно сделать заготовку. Для этого используем инструмент Прямоугольник со скругленными краями(Rounded Rectangle) с его помощью нужно нарисовать фигуру, как показано на принтскрине. Радиус не важен, на примере он равен 5 пикселям.

Теперь с помощьюShift+Ctrl+N создаем новый слой.Тот же эффект будет если нажать иконку нового слоя в окне слоев (если его нет, нажимаем F7).

Теперь, с помощьюEllipse Tool (Эллипс) и при удержанииShift, (так окружность будет пропорциональна), нужно нарисовать круг, который будет наложен поверх уже готового прямоугольника. Приблизительно  должно выглядеть вот так:

Перемещаем фигуры при помощи инструмента Move Tool (Перемещение) ЗажавCTRL, нужно кликнуть на слой с кругом, выделяя его.

Следующий шаг Select–Modify–Contract(Выделение–Модификация–Сжать)выставляем значение в 5 пикселей.

Теперь нужно создать новый слой Ctrl+J:

и залить его нужным вам цветом.Для этого используем инструмент Bucket (Заливка)

То же самое нужно проделать и с прямоугольником. После заливки  и этого выделения, опятькликаемпо слою с кругом и удаляем егоDelete. Результат должен быть таким:

Теперь нужно соединить слои с кругом и прямоугольником Merge Layers (Слить слои).

Теперь нужно применить Layer-Layer Effects-Gradient Overlay(Слои-Эффекты слоев-Градиент):

К маленькому кругу и уже обрезанному прямоугольнику применяем следующие:
Inner Glow (Внутреннее свечение);
Bevel and Emboss (Скос и рельеф);
Gradient Overlay (Градиент);
Stroke (Обводка, или Штрих)
:

Должно получиться вот так:

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

Опять нужно ужать выделение, теперь на 2 пикселя.
При помощи инструмента Select Tool (Выделение), со следующими настройками

нужно удалить нижнюю часть выделения (Delete). Теперь время создать новый слой и залить выделенную область белым цветом. Непрозрачность нужно уменьшить до 20
То же самое делаем и на круглой части кнопки, так чтобы и там появились блики.

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

Вот так выглядят разновидности кнопки, выполненные по тому же методу, который описан в этой статье:

google.com bobrdobr.ru del.icio.us technorati.com linkstore.ru news2.ru rumarkz.ru memori.ru moemesto.ru

Оставить комментарий

Вы должны авторизоваться для отправки комментария.

Полезные ссылки
Случайные записи
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.168
  • 25.02.2011">Руководство по actionscript. часть 6, стр. 078
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 132
  • 21.03.2011">Руководство по actionscript. часть 2, стр. 034
  • 08.03.2011">Руководство по actionscript. часть 4, стр. 073
  • 21.07.2010">10 подсказок к совершенству
  • 19.03.2011">Руководство по actionscript. часть 2, стр. 108
  • 03.06.2010">Самоучитель по креативному веб-дизайну. Книга 3, стр.57
  • 15.01.2011">Зачем используется раскройка изображения в Photoshop и как ее сделать?
  • 09.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.155
  • 27.02.2011">Руководство по actionscript. часть 6, стр. 043
  • 18.05.2010">Самоучитель по креативному веб-дизайну. Книга 2, стр.61
  • 07.03.2011">Руководство по actionscript. часть 4, стр. 123
  • 22.01.2011">Руководство по actionscript. часть 1, стр. 139
  • 10.05.2010">Самоучитель по креативному веб-дизайну. Книга 1, стр.87
Опрос

Какие цвета вы предпочитаете?

View Results

Loading ... Loading ...