Делаем первоклассную веб 2.0 кнопку
Учимся делать замечательную, стильную, коммерческую WEB 2.0 кнопку для Вашего сайта!
Приблизительное время выполнения: 9 минут
Создайте новый документ и на новом слое нарисуйте скругленный (углы 5px) прямоугольник.
Теперь примените к слою эти стили:
Добавим кнопке красоты. Есть один эффект, который почти всегда работает отлично — диагональные линии. Я добавил белых линий на нижнюю половину кнопки и понизил непрозрачность их слоя до 25%:
Теперь перейдем к столь популярному в последнее время веб 2.0 значку. Он смотрится очень эффектно. Выберите инструмент Polygon Shape:
Добавим к значку некоторых стилей:
Пришло время расположить значок над кнопкой. Я поместил его слева. Кроме того, я добавил значку блеска. Затем я выделил его часть при помощи Elliptical Marquee с параметром Feather на 10 и нажал DELETE, чтобы добавить эффект рассеяности.
Наш значок должен нести в себе какую-нибудь смысловую нагрузку. Для реализации этой затеи добавим на него немного текстовой информации. Он идеально подойдет для инфо о цене или скидке. Этим мы и воспользуемся. Я выбрал шрифт Impact и добавил к нему градиента и тени:
Вот, что у меня получилось:
Кнопку я заполнил текстом:
Готово! 
Источник: http://www.designphase.net/?q=badge_n_button
Смотрите также:
«Добавим кнопке красоты. Есть один эффект, который почти всегда работает отлично — диагональные линии. Я добавил белых линий на нижнюю половину кнопки и понизил непрозрачность их слоя до 25%»
Коль честно, то я нифика не понял как ЭТО делалось!!! Коль использовалась фоновая заливка, то надо было так и писать…
Ноябрь 12th, 2007
Создание Образца фоновой заливки.
Eсли вы не знаете, как создать образец, то просто сохраните нужный вам образец в архив образцов заливок. Для этого откройте любое изображение и перейдите в Edit>Define Pattern , сохранив его под любым названием.
Если же вы решили создать заливку, то проделаем несколько несложных шагов:
1. Создадим новый документ (допустим) 5х5 пикселов.
2. Увеличим изображение до максимальных размеров (1600%)
3. Возьмем карандаш , диаметр 1 пиксель и нарисуем нужный нам образец.
4. Сохраним его (см выше) Edit>Define Pattern.
Использование образца
Чтобы использовать (применить) образец , перейдите в настройки стиля слоя Pattern Overlay и в окне Pattern выберите сохраненный (созданный) Вами образец. Opacity (прозрачность) регулируйте по своему вкусу.
Автор: Force
Перевод: Rediska
Ноябрь 12th, 2007
Большое спасибо, клабкисс! Очень помогли!
Ноябрь 13th, 2007
отстой статья, ничего не расписано, все это можно было сделать гораздо проще.
Сентябрь 3rd, 2008
КАК СДЕЛАТЬ ВЕРТИКАЛЬНЫЕ ЛИНИИ? К ВАС НЕ НАПИСАНО!
Февраль 27th, 2009
Спасибо! Обязательно использую для своего магазина.
Ноябрь 4th, 2010