|
Навигация Главная Новости Скачать Шаблоны сайтов Партнеры Графика Adobe Photoshop Программирование Теория алгоритмов Code Snippets Все о PHP Visual C++ WIN32 API Delphi ASP Java VBScript CGI VRML PERL HTML XML Сети Cisco IP-сети Сетевые термины IT UNIX-системы Хостинг Операционные системы Windows Linux Поисковая оптимизация Основы SEO Мастер-класс SEO Анализ трафика Google AdSense В перерыве Интересное Поиск работы Немного юмора Материалы Публикации |
| Минутку внимания |
| Создание объемных и подсвеченных кнопок |
|
В этой статье мы с помощью графического редактора Adobe Photoshop научимся создавать такие яркие и объемные кнопочки.
Первым делом на пустом холсте создайте прямоугольник, у которого мы закруглим углы. Для этого выполните команду -> -> smooth и установите параметр smooth в 3 px.
А сейчас давайте выберем градиент для одной из наших кнопочек. Остальные кнопочки мы зальем другим цветом, но принцип выбора градиента останется тем же.
С помощью инструмента gradients tool выберите radial gradient и просто проведите нажатым курсором мышки от середины дна кнопки до ее верхнего края вертикально вверх.
В панели слоев сделайте копию слоя нашей кнопки для дальнейшего использвания. Только расположите его под первым прямоугольником и поверните на 180 градусов:
Для верхнего прямоугольника установите вот такие свойства (выберите в палитре Layers опцию Blending Options...):
Далее выделите часть области прямоугольника в верхней части как указано ниже. Затем залейте эту область градиентом от белого к прозрачному по типу reflection.
Для изменения границ градиента выполните команду edit -> transform -> wrap и измените форму контура как указано ниже:
Теперь вернемся к нашей нижней кнопке. В панели layers нажмите и удерживайте клавишу CTRL и кликните на слой для того, чтобы его выделить. С помощью градиента от белого к прозрачному (white to transparent) придайте вид этой кнопочке как бы отражение верхней кнопки.
Если у вас все получилось, то вы должны видеть вот такие симпатичные кнопочки, как в начале статьи. Всего доброго вам, уважаемые читатели! Источник: www.tutorialkit.ru |
| Мы рекомендуем вам ознакомиться со следующими материалами на тему: |
| Информация для интересующихся веб-дизайном и программированием: |
