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

Авторизация

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

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


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


Создаём Кнопки для сайта
Adobe Photoshop » Уроки 19 февраля 2011 PolKiloПечать


Кнопки для сайта


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

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

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


Создаём Кнопки для сайта

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

Создаём Кнопки для сайта

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

Создаём Кнопки для сайта

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

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

Создаём Кнопки для сайта

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

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

Создаём Кнопки для сайта

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

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

Создаём Кнопки для сайта

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

Создаём Кнопки для сайта

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

Создаём Кнопки для сайта

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

Создаём Кнопки для сайта

Получилось вот такое:

Создаём Кнопки для сайта

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

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

Создаём Кнопки для сайта

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

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

Создаём Кнопки для сайта

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

Создаём Кнопки для сайта

Вот и другие варианты, выполненные по данному методу

Создаём Кнопки для сайта

Надеюсь, пригодится.


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

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

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

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