Neurons to bytes

В этом примере я расскажу, как сделать красивые кнопки для использования их на ваших веб-страницах использованием лучших практик. Эти кнопки будут:

• Использовать всего лишь одну картинку для всех состояний
• Поддерживать 3 состояния: состояние покоя, при наведении мыши, при нажатии.
• Иметь малое количество CSS-кода
• Легко встраиваться в любые места ваших веб-страниц
• Текст на кнопке это именно текст, а не картинка.
• Кнопки могут иметь произвольную ширину.

В итоге, мы получим такие кнопки:

Приступим

Для начала нам нужно нарисовать эти самые кнопки. Откроем Photoshop и создадим новый документ:

Затем, при помощи инструмента Rectangular Marquee Tool выделим на странице фиксированную область, как показано на рисунке:

После выделения получим вот такой вид:

Затем, создадим новый слой и зальём его чёрным цветом. Дальше, нам остаётся только потюнить Blending Options слоя и настроить его правильным образом. Я специально дал пример только начала создания кнопок, потому что дальше всё донельзя банально. Вы можете скачать готовый psd-файл, чтобы посмотреть, какие настройки я применил к кнопкам.

Осталось дело за малым

Теперь, когда кнопки нарисованы, нам остаётся только  создать png-файл с кнопками, а так же html-разметку и css-код. Опять же, я не буду пошагово все разъяснять, так как комментариев в файле с примером должно хватить в избытке. Давайте лучше насладимся результатом:

Важно! В моём примере используются кнопки с полупрозрачной тенью и закругленными уголками. Естественно, в формате png. Как известно,  IE6 не поддерживает альфа-канал в png, поэтому, приходится использовать костыль. В моём примере такого костыля нет. Но если вам нужна поддержка альфа-канала в IE6, то я горячо рекомендую использовать DD BelatedPNG, это наилучшее решение на сегодняшний день.

Итак, как видим, мы получили довольно неплохие кнопки :) Надеюсь, вам понравилась эта статья.

Дальше можно:

• Посмотреть онлайн-демо
• Скачать исходник psd
• Скачать демо в zip-файле
• Почитать, как можно рисовать кнопки в photoshop
• Поддержка альфа-канала в png в IE6

Also interesting

• Developing pretty buttons with css best practices

Tags: css buttons, photoshop, png, pretty buttons, web2.0 buttons, альфа-канал

This entry was posted on Понедельник, Ноябрь 16th, 2009 at 02:45 and is filed under вёрстка. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.