Кнопка для web-сайта в уроке фотошопа

2010-04-14, Автор - Ленар Хайруллин; [4048]

Этот урок фотошопа будет полезен вебмастерам и людям увлеченными веб-дизайном. В этом уроке фотошопа научимся создавать стильные кнопки для сайта сами.


Шаг 1. Создайте новый документ, цвет фона задайте показателем: #f7f5f6. Активизируйте инструмент Rounded reqtangle Tool (Прямоугольник со скругленными углами) с радиусом скругления 10 пикселей. В качестве цвета для переднего плана установите цвет с показателем: #2f88bb. На новом слое создайте небольшой скругленный прямоугольник.

Шаг 2. Теперь перейдите в Layer Style (Стили слоя) и примените для нарисованного прямоугольника Outer Glow (Внешнее свечение) и Inner Glow (Внутреннее свечение) со следующими настройками:

Шаг 3. Удерживая клавишу , щелкните мышкой на пиктограмме слоя с прямоугольником, для того, чтобы загрузить на него выделение. Создайте новый слой, войдите в меню: Select> Modify> Contract (Выделение -Модификация - Сжать) и в параметре «размер сжатия» установите значение: 1 пиксел. Активизируйте инструмент Elliptical marquee Tool (Овальная область выделения), и, удерживая нажатой клавишу , начинайте вычитать выделение, как показано на рисунке. После того, как останется необходимая часть выделения, заполните это выделение белым прозрачным градиентом, режим наложения градиента установите «Перекрытие», непрозрачность слоя-48%, и снимите выделение, нажав комбинацию клавиш .

Шаг 4. Создайте новый слой и, используя инструмент Elliptical marquee Tool (Овальная область выделения), создайте эллипс, как показано на рисунке. Теперь, используя инструмент Gradient (Градиент), стиль - от основного к прозрачному, и создайте градиентную заливку по овальному выделению. Этот градиент будет выполнять функцию тени.

Шаг 5. Далее, удерживая клавишу , щелкните мышкой на пиктограмме слоя с прямоугольником, для того, чтобы загрузить на него выделение. Теперь, войдите в меню Select> Inverse (Выделение - Инверсия), и нажмите клавишу . Этим действием мы уберем лишнюю тень с кнопки.

Шаг 6. Установите непрозрачность для слоя с кнопкой до 32%. Удерживая клавишу , щелкните мышкой на пиктограмме первого слоя, для того, чтобы загрузить на него выделение, а затем, удерживая клавишу и используя Rectangular marquee Tool (Прямоугольную область выделения), вычтите половину выделения.

Шаг 7. Залейте созданное выделение белым цветом, и измените непрозрачность до 11%.

Шаг 8. Теперь создайте новый слой, и нарисуйте круг, как показано ниже.

Шаг 9. Далее, войдите в меню: Layer Style (Стили слоя) и выберите команду Gradient Overlay (Наложение градиента) для заливки градиентом созданного небольшого круга.

Шаг 10. Теперь можно добавить немного сияния для круга.

Шаг 11. Теперь добавьте необходимый текст и веб - кнопка готова!

Вопросы и ответы по уроку. Выкладываем свои работы


Комментарии:
Последние комментарии на сайте:
Поделиться в социальных сетях:


Предварительный обзор Xiaomi Mi Mix 2. Ш...
Предварительный обзор Xiaomi Mi Mix 2. ШОфициально анонсирован новый мобильный телефон Xiaomi Mi Mix 2, который мы все так давно ждали и верили, ...
Обзор The Coma. Раннер для сильных духом...
Обзор The Coma. Раннер для сильных духомНаверное, когда вы прочитали заголовок к этому обзору, то мысленно уже начали думать о том, зачем создава...
Анонс 6-дюймового смартфона Gionee M7 с...
 Анонс 6-дюймового смартфона Gionee M7 с Анонс Gionee M7 состоится уже 28 сентября. Смартфон получил 6-дюймовый экран с разрешением 2160 * 1080 ...
Предварительный обзор Vivo V7+. Шикарное...
Предварительный обзор Vivo V7+. ШикарноеЧто же, можно официально говорить о том, что производители со всего мира резко решили сменить дизайн свое...
Предварительный обзор Razer Wolverine Ul...
Предварительный обзор Razer Wolverine UlСтоит отметить, что абсолютно все игровые девайсы от компании Razer стоят дороже конкурентов и далеко не ...
Обзор Thimbleweed Park. Фанатам жанра по...
Обзор Thimbleweed Park. Фанатам жанра поСтоит сказать, что игра оказалась на уровень выше того, чего я от нее ожидал. Не буду делать вид, что я ф...
Предварительный обзор Dell Alienware A W...
Предварительный обзор Dell Alienware A WИгровые мониторы - достаточно интересная тема, которая обсуждается постоянно и в которой производители со...
Предварительный обзор BenQ GL2580HM. Мон...
Предварительный обзор BenQ GL2580HM. МонОфициально представлен монитор BenQ GL2580HM, который понравится как ценителям просто недорогих и качеств...
Обзор Prime Arena. Что будет, если скрес...
Обзор Prime Arena. Что будет, если скресИгра Prime Arena представляет собой некую смесь жанров, которая, как оказалось, вполне затягивает и прино...
Предварительный обзор Apple Beats Studio...
Предварительный обзор Apple Beats StudioКомпания Apple официально анонсировала наушники Beats Studio 3, которые оказались достаточно стильными, к...
NVIDIA представила платформу ноутбуков M...
NVIDIA представила платформу ноутбуков M14 сентября состоялась презентация Nvidia, которая была посвящена новой платформе Max-Q. Она позволила вн...
Предварительный обзор Xiaomi Mi A1. Очен...
Предварительный обзор Xiaomi Mi A1. ОченСостоялся официальный анонс мобильного телефона Xiaomi Mi A1, который компания решила представить всего з...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor