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

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

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


Шаг 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. Теперь добавьте необходимый текст и веб - кнопка готова!

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


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


Предварительный обзор Bang & Olufsen Beo...
Предварительный обзор Bang & Olufsen BeoЕсли вы следите за информационными ресурсами об электронике, например наш сайт читаете, то вы точно видел...
Обзор Today Weather. Красивая погода...
Обзор Today Weather. Красивая погодаПриложение для отслеживания погоды - весьма важная штука, особенно если вы работаете в офисе и хочется не...
Обзор Call of Duty: WWII. Возвращение к ...
Обзор Call of Duty: WWII. Возвращение к После выхода в свет Call of Duty Infinite Warfare многие фанаты франшизы стали говорить, что разработчики...
OPPO F5 официально представлен...
OPPO F5 официально представлен16 ноября в Москве состоялась презентация нового смартфона компании OPPO F5. Не проста девайс продается п...
Предварительный обзор Mixcder MS301. Отл...
Предварительный обзор Mixcder MS301. ОтлВ последнее время многие разработчики музыкальной продукции стараются избавиться от проводов. Не все, кон...
Предварительный обзор PNY PrevailPRO P40...
Предварительный обзор PNY PrevailPRO P40Анонс ноутбука PNY PrevailPRO P4000 не стал большой неожиданностью для рынка по той простой причине, что ...
Обзор Cablexpert CC-USB2-AMLM2-1M. Недор...
Обзор Cablexpert CC-USB2-AMLM2-1M. НедорВступление Начну с того, что если вы пользуетесь любой техникой Apple, за исключением ноутбуков...
Обзор BingHan Garden. Шикарная "три-в-ря...
Обзор BingHan Garden. Шикарная Казуальные игры - дело весьма рискованное. Дело в том, что когда создаешь игру такого уровня, то нужно ли...
Предварительный обзор Smartisan Nut Pro ...
Предварительный обзор Smartisan Nut Pro Иногда малоизвестные компании показывают решения, которые явно заслуживают внимания пользователей. Наприм...
Обзор Sleep Cycle. Настраиваем свой сон...
Обзор Sleep Cycle. Настраиваем свой сонСон - весьма важная составляющая нашей жизни и от качества и продолжительности вашего сна будет зависеть ...
Предварительный обзор Panasonic Lumix DC...
Предварительный обзор Panasonic Lumix DCРелиз камеры Panasonic Lumix DC-G9 получил далеко не таким веселым, как ожидали разработчики, мне так каж...
Обзор Star Wars: Battlefront II. Во всей...
Обзор Star Wars: Battlefront II. Во всейВступление Мне очень трудно оценивать игру объективно, так как я большой фанат «Звездных войн» ...
МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2017 © MegaObzor