Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

1. Создайте новый документ размером 400 x 340 пикселей, залейте фон серым градиентом, как показано ниже:


Профессиональная квадратная кнопка



2. Выберите инструмент Прямоугольная область (Rectangular Marquee Tool), настройте так (стиль - заданный размер):


Профессиональная квадратная кнопка




Кликните на холсте, чтобы создать выделение:


Профессиональная квадратная кнопка




3. Создайте новый слой (Create New Layer), выберите инструмент Градиент (Gradient Tool), тип - радиальный градиент, и залейте выделение любым цветом. Я использовал цвета - 3e94d4 и #336fc1.


Профессиональная квадратная кнопка



4. Я применил обводку размером 1 пиксель:


Профессиональная квадратная кнопка




5. Сделайте выделение слоя с кнопкой (Ctrl+Click):


Профессиональная квадратная кнопка




6. Примените Сжатие (Modify - Contract) и введите значение 4-5 пикселей:


Профессиональная квадратная кнопка



7. Выберите инструмент Градиент и настройте так:


Профессиональная квадратная кнопка



8. Сделайте такую заливку сверху вниз:


Профессиональная квадратная кнопка




9. Выберите инструмент перо (Pen Tool), создайте такой контур:


Профессиональная квадратная кнопка




10. Кликните правой кнопкой и выберите Создать выделенную область (Make Selection), используйте настройки по умолчанию:


Профессиональная квадратная кнопка




11. Создайте новый слой (Create New Layer), выберите инструмент Градиент (Gradient Tool), цвет - от белого к прозрачному и сделайте заливку выделения сверху вниз, как показано ниже:


Профессиональная квадратная кнопка




12. Установите Режим наложения - Мягкий свет (Blending Mode – Soft Light) и понизьте немного Непрозрачность (Opacity), если нужно:


Профессиональная квадратная кнопка



13. Я нашёл иконку в интернете и вставил её в наш документ. Вы можете найти много иконок на этих сайтах:

http://www.templatemonster.com/
http://www.webdesign.org


Профессиональная квадратная кнопка



14. Инструментом Горизонтальный текст ( Horizontal Type Tool) напишите текст. Я использовал шрифт Tahoma, размером - 11 pt, цвет - #ffffff. Потом к слою с текстом примените стиль Отбрасывание тени (Layer Style - Drop Shadow):


Профессиональная квадратная кнопка

Профессиональная квадратная кнопка



Я сделал копию всех слоёв, передвинул вторую кнопку вправо, оставив промежуток в 10 пикселей. Я изменил цвет кнопки на красный. Для этого используйте другой цвет градиента в шаге с заливкой кнопки, и в настройках отбрасывания тени для текста также измените цвет:


Профессиональная квадратная кнопка





Ссылка на источник урока

написал : Славик

просто и со вкусом

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: