Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Блестящая кнопка для сайта


alt
В этом уроке мы рисуем вот такую симпотичную кнопку для сайта.

1. Создаем новый документ в Adobe Photoshop. Фон и размер значения не имеют.

2. Делаем заготовку.
С помощью инструмента
Прямоугольник со скругленными краями
(Rounded Rectangle)
рисуем такую фигуру. У меня радиус закругления 5 пикселей.

 

 

alt
Создаем новый слой через Shift+Ctrl+N или нажав на иконке нового слоя в окне слоев (если оно закрыто, нажмите F7).
alt
Теперь, используя
Ellipse Tool (Эллипс)
и удерживая Shift, чтобы окружность была пропорциональной, рисуем круг, который накладывается поверх прямоугольника. Приблизительно так:
alt

Можете переместить фигуры с помощью знакомого инструмента
Move Tool (Перемещение) 

Удерживая CTRL, кликаем на слой с кругом, чтобы выделить его.

 

 

alt

Далее идем в
Select–Modify–Contract
(Выделение–Модификация–Сжать)
и ставим значение 5 пикселей.

Создаем из выделения новый слой Ctrl+J:

 

 

alt

и заливаем его любым цветом с помощью инструмента
Bucket (Заливка) 

Ту же операцию проделываем с прямоугольником. После того, как залили и это выделение, снова кликайте на слой с кругом (который больше) и нажмите Delete. Должно получиться так:

 

 

alt
Соединяем слои круга и прямоугольника (большие)
Merge Layers (Слить слои).
alt
Применяем к ним эффект
Layer-Layer Effects-Gradient Overlay
(Слои-Эффекты слоев-Градиент):
alt
К меньшему кругу и обрезанному прямоугольнику применяем такие настройки (из той же группы Layer-Layer Effects):
Inner Glow (Внутреннее свечение);
Bevel and Emboss (Скос и рельеф);
Gradient Overlay (Градиент);
Stroke (Обводка, или Штрих):
Блестящая кнопка для сайта
Получилось вот такое:
alt

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

Опять сжимаем выделение, на этот раз на 2 пикселя.
С помощью инструмента Select Tool (Выделение), с такими настройками

 

 

alt

удаляем нижнюю часть выделения (Delete). Прошу прощения за многочисленную тавтологию…
Создаем новый слой и заливаем выделенную область белым цветом. В окне слоев в правом верхнем углу уменьшаем
Opacity (Непрозрачность)
до 20%.

Подобные манипуляции проделываем и на круглой части кнопки, чтобы и там добавить бликов.

 

 

alt
Добавляем картинку и текст. В настройках для нижнего слоя можно добавить тень, по вкусу.
Кнопка готова
alt

 

 

 

 

 

 



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.