ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Приемы создания стеклянных кнопок и иконок для сайта

Приемы создания стеклянных кнопок и иконок для сайта

Неотъемлемой частью любого сайта является наличие всевозможных миниатюрных изображений. В их числе особое место отводится кнопкам и иконкам. Как создать такое изображение — тема данного урока.

Откроем Photoshop и создадим новый документ, выбрав в меню Файл ⇒ Создать или нажать сочетание клавиш Ctrl+N.

Параметры нового документа

Выберем для нашего документа черный цвет фона.

Документ с черным фоном

Теперь на панели Инструменты выберем инструмент Прямоугольник со скругленными углами и установим параметры на панели Опции согласно рисунка.

Параметры прямоугольника

А теперь нарисуем сам прямоугольник. У меня получилось так.

Прямоугольник со скругленными углами

Установим цвет кнопки. Для этого щелкним дважды кнопкой мыши по вновь созданному слою. Откроется окно Стиль слоя. Выберем стиль Наложение цвета и установим цвет.

Параметры слоя Наложение цвета

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

Панель Слои после создания нового слоя

Выделим слой Фигура 1 и удерживая клавишу Ctrl щелкнем по пиктограмме слоя. Фигура прямоугольника будет выделена. Рисунок примет следующий вид.

Выделенный прямоугольник

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

Параметры обводки

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

Параметры инструмента Овальная область

Создание овала

Отпустим кнопку мыши. Должно получиться вот такое выделение.

Выделение после применения Овальной области

Теперь выберем инструмент Градиент. Нажмем клавишу D, чтобы сбросить используемые цвета и установить черный и белый. Затем нажмем клавушу Х и поменяем цвета местами. В результате основным цветом на панели станет белый. Выбираем в панели опций тип градиента от белого к прозрачному.

Параметры градиента

Протянем градиент сверху вниз.

залика градиета

Рисунок примет следующий вид.

Рисунок после заливки градиетом

Теперь выделим слой с обводкой Слой 1 и с помощью инструмента Ластик стерем немного в нижних углах нашу белую обводку для того чтобы придать эффект внутреннего свечения. Параметры ластика установите согласно рисунка.

Параметры инструмента Ластик

Рисунок примет следующий вид.

Рисунок после применения инструмента Ластик

Наше кнопка почти готова. Теперь осталось вписать в нее текст. Выберем инструмент Горизонтальный текст и установим его параметры на панели Опции.

Параметры Горизонтального текста

Текст кнопки

Теперь используя Стили слоя можно создать текст с эффектами, которые представлены в опции.

Параметры стиля Внутренняя тень

Параметры слоя Внешнее свечение

Параметры слоя Тиснение

Параметры слоя Наложение градиента

В итоге получился вот такой рисунок.

Итоговый рисунок