Главная » Статьи » » -=Дизайн=-

Создание красивой кнопочки в Photoshop
Первый наш урок по работе с photoshop будет посвящён самому простым приёмам создания качественных кнопочек для сайта.
Итак приступим!
Создадим чистый файл произвольного разрешения но так чтобы нам было максимально удобно с ним работать. Я выбрал стандартное разрешение 320x240 и прозрачный фон.

Такого разрешения нас вполне устроит а прозрачный фон (Background Contents) не будет мешать нам творить.
Далее нарисуем инструментом Rounded Rectangle tool форму кнопочки именно такую как мы хотим получить в итоге. Например такую:


Форма не принципиально важна и может быть любой, такой как вы захотите.
Следующим нашим шагом будет работа с Стилями слоя, для этого жмём на иконочку FX (выделена красной стрелочкой).

В появившемся меню выбираем Drop Shadow(Второе сверху) и выставляем примерно такие настройки падающей тени:

Вы можете поэксперементировать со своими настройками чтобы добится более качественного эффекта.
Создав тень мы хотим придать кнопке немного индивидуальности для этого поработаем с стилем inner glow(внетреннее свечение) и выставим примерно следующие настройки:

А так как  кнопочка должна выглядеть объёмной то добавим немного эффекта Bevel and Emboss со следующими настройками: 

Также добавим эффект Stroke(Выделение) примерно вот с такими настройками:

После все наших действий имеем следующий результат:

Как вы уже заметили кнопочка наша выглядит весьма сыренько и невзрачно. Что нас ясное дело неустраивает. Поэтому мы сейчас добавим настоящий глянец и немного светотеней.
Для этого зажимаем кнопочку CTRL и нажимаем на иконочку слоя для того чтобы виделить точно нашу кнопочку. Выглядит это примерно так:

Выделив кнопочу нам надо обрезать наше выделение. Для этого выбираем инструмент elliptical marquee tool и зажав ALT делаем вот такое выделение:



Далее создаём новый слой через панель опций leyer>new >layer… не снимая выделения выбираем новый слой и заливаем наше выделение белым цветом далее жмём на кнопочку add vector mask

После чего выбираем чёрно белый градиент и заливаем слой до получения вот такого вот эффекта:

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

и сделаем размытие для чего в панели управления выберем filters>blur>Gaussian blur и выставим там примерно 2.5 пикселей, после чего нам надо сделать этот слой менее заметным глазу для этого нажмём на иконочку FX(Стили слоя) и во вкладке  Blending Options уберём opacity(Не прозрачность) процентов этак до 20.
После всех всех наших манипуляций получим следующий результат:

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

Итог нашей работы это:


Удачного творчества!
Spirit




Источник:
Категория: -=Дизайн=- | Добавил: spirit (11.07.2008) | Автор:
Просмотров: 638 | Комментарии: 0 | Рейтинг: 0.0/0 |

Всего комментариев: 0

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа

Категории каталога
-=SEO=- [8]
Раскрутка сайта в поисковиках
-=Дизайн=- [3]
Статьи по дизайну
-=CMS=- [3]
Статьи по работе с CMS
-=Програмирование=- [7]
Статьи по WEB и OS програмированию

Поиск