Понедельник, 29.04.2024, 14:22
Приветствую Вас Гость | RSS
Главная » Файлы » WEB - ДИЗАЙН

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

[Чтобы скачивать файлы зарегистрируйтесь, или войдите под своим логином ] 18.02.2010, 10:19
1. Создаем новый документ в Adobe Photoshop. Фон и размер значения не имеют.

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

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

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

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

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

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

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

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

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

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

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

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



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

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

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

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

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

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


источник

Категория: WEB - ДИЗАЙН | Добавил: bass504
Просмотров: 587 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Все материалы размещенные на сайте пренадлежат их владельцам и предоставляются исключительно в ознакомительных целях. Администрация ответственности за содержание материала не несет и убытки не возмещает.По истечении 24 часов материал должен быть удален с вашего компьютера. Незаконная реализация карается законами РФ: "Об авторском и смежном праве".При копировании материала, гиперссылка на сайт обязательна! Все о Гарри Поттере | Смотерть реалити шоу проект Каникулы в Мексике онлайн на канале MTV | Смотреть любимые реалити шоу проекты онлайн | Смотреть любимые популярные сериалы онлайн бесплатно |