(495) 925-0049, ITShop интернет-магазин 229-0436, Учебный Центр 925-0049
  Главная страница Карта сайта Контакты
Поиск
Вход
Регистрация
Рассылки сайта
 
 
 
 
 

Уроки Photoshop. Веб-дизайн. Кнопки для сайта

Источник: globator
globator

И снова здравствуйте!! На сегодняшнем уроке мы с вами будем учиться делать симпатичные кнопки для сайта.

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

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

Создаем новый слой через Shift+Ctrl+N или нажав на иконке нового слоя в окне слоев (если оно закрыто, нажмите F7).
alt

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

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

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

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

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

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

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

Соединяем слои круга и прямоугольника (большие)
Merge Layers (Слить слои).
alt

Применяем к ним эффект
Layer-Layer Effects-Gradient Overlay
(Слои-Эффекты слоев-Градиент):
Кнопки для сайта в Photoshop

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

Получилось вот такое:
Кнопки для сайта в Photoshop

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

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

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

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

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

Вот и другие варианты, выполненные по данному методу
Кнопки для сайта в Photoshop

Надеюсь, пригодится. Спасибо за внимание, встретимся после перерыва... И не дай бог кто-то решит прогулять! bully
Автор: Найкрис Кроули

Ссылки по теме


 Распечатать »
 Правила публикации »
  Написать редактору 
 Рекомендовать » Дата публикации: 21.08.2012 
 

Магазин программного обеспечения   WWW.ITSHOP.RU
SAP® Crystal Reports 2016 WIN INTL NUL
ABBYY Lingvo x6 Английская Домашняя версия, электронный ключ
Quest Software. TOAD for Oracle Edition
Quest Software. TOAD Professional Edition
Allround Automation Direct Oracle Access Standard license
 
Другие предложения...
 
Курсы обучения   WWW.ITSHOP.RU
 
Другие предложения...
 
Магазин сертификационных экзаменов   WWW.ITSHOP.RU
 
Другие предложения...
 
3D Принтеры | 3D Печать   WWW.ITSHOP.RU
 
Другие предложения...
 
Новости по теме
 
Рассылки Subscribe.ru
Безопасность компьютерных сетей и защита информации
Информационные технологии: CASE, RAD, ERP, OLAP
Новости ITShop.ru - ПО, книги, документация, курсы обучения
Программирование в AutoCAD
Компьютерный дизайн - Все графические редакторы
Все о PHP и даже больше
Adobe Photoshop: алхимия дизайна
 
Статьи по теме
 
Новинки каталога Download
 
Исходники
 
Документация
 
 



    
rambler's top100 Rambler's Top100