Рисуем кнопку для сайта
Рисуем кнопку для сайта
В этом уроке Вы узнаете, как сделать оригинальную web-кнопку для сайта.Сложность урока: Легкий
В этом уроке Вы научитесь создавать оригинальные веб - кнопки для сайта.
Шаг 1. Создайте новый документ, цвет фона задайте показателем: #f7f5f6. Активизируйте инструмент Rounded reqtangle Tool (Прямоугольник со скругленными углами) с радиусом скругления 10 пикселей. В качестве цвета для переднего плана установите цвет с показателем: #2f88bb. На новом слое создайте небольшой скругленный прямоугольник.
Шаг 2. Теперь перейдите в Layer Style (Стили слоя) и примените для нарисованного прямоугольника Outer Glow (Внешнее свечение) и Inner Glow (Внутреннее свечение) со следующими настройками:
Шаг 3. Удерживая клавишу <Ctrl>, щелкните мышкой на пиктограмме слоя с прямоугольником, для того, чтобы загрузить на него выделение. Создайте новый слой, войдите в меню: Select> Modify> Contract (Выделение -Модификация - Сжать) и в параметре «размер сжатия» установите значение: 1 пиксел. Активизируйте инструмент Elliptical marquee Tool (Овальная область выделения), и, удерживая нажатой клавишу <Alt>, начинайте вычитать выделение, как показано на рисунке. После того, как останется необходимая часть выделения, заполните это выделение белым прозрачным градиентом, режим наложения градиента установите «Перекрытие», непрозрачность слоя-48%, и снимите выделение, нажав комбинацию клавиш <CTRL+D>.
Шаг 4. Создайте новый слой и, используя инструмент Elliptical marquee Tool (Овальная область выделения), создайте эллипс, как показано на рисунке. Теперь, используя инструмент Gradient (Градиент), стиль - от основного к прозрачному, и создайте градиентную заливку по овальному выделению. Этот градиент будет выполнять функцию тени.
Шаг 5. Далее, удерживая клавишу <Ctrl>, щелкните мышкой на пиктограмме слоя с прямоугольником, для того, чтобы загрузить на него выделение. Теперь, войдите в меню Select> Inverse (Выделение - Инверсия), и нажмите клавишу <Delete>. Этим действием мы уберем лишнюю тень с кнопки.
Шаг 6. Установите непрозрачность для слоя с кнопкой до 32%. Удерживая клавишу <Ctrl>, щелкните мышкой на пиктограмме первого слоя, для того, чтобы загрузить на него выделение, а затем, удерживая клавишу <Alt> и используя Rectangular marquee Tool (Прямоугольную область выделения), вычтите половину выделения.
Шаг 7. Залейте созданное выделение белым цветом, и измените непрозрачность до 11%.
Шаг 8. Теперь создайте новый слой, и нарисуйте круг, как показано ниже.
Шаг 9. Далее, войдите в меню: Layer Style (Стили слоя) и выберите команду Gradient Overlay (Наложение градиента) для заливки градиентом созданного небольшого круга.
Шаг 10. Теперь можно добавить немного сияния для круга.
Шаг 11. Теперь добавьте необходимый текст и веб - кнопка готова!
Желаю Вам успехов!
Автор: Jack
Источник: www.zymic.com
Комментарии 54
красиво и интересно, спс=))
Спасибо за урок!
Спасибо переводчику!
Спасибо за урок
cспасибо
спасибо! хороший урок
спасибо)
Спасибо!
Спасибо получилось так
спасибо
Спасибо за урок, многое делал по другому но идея та же !
Спасибо!
Спасибо за урок!
сп
Спасибо вполне понятный урок.
Спасибо)
Ну, почти всё было понятно.
Дааа, доступно и понятно объяснить это не ваш конёк.
Жизнь - боль
Спасибо.
Благодарю.
Спасибо!
спасибо!
Спасибо.
Пасяб)
Вот
Спасибо,оч старался =)
как-то так
2)лично я при создании нового файла не могу там указывать изначальный цвет слоя.Работаю на CS6.
3)нажимаю на ctrl и выделяется вся область причем полностью всей кнопкой и дальше ничего не происходит.Какое выделение я вообще не понял-у меня оно отсутствует а то что показало-выделяет все абсолютно.
Новичкам ну никак не годится.Все встало колом на 3 шаге.
1)Нет размеров кнопки
Администратор
Потрудитесь выражаться приличнее. Не получается, спросите на форуме.
Спасибо!