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

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

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


Шаг 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 8C будет стоить 150 д...
Смартфон Xiaomi Mi 8C будет стоить 150 дСетевые источники поделились фотографиями и сведениями о смартфоне Xiaomi Mi 8C, который получит дизайн м...
Смартфон Nokia X7 получил SoC Snapdragon...
Смартфон Nokia X7 получил SoC SnapdragonКомпания HMD Global пополнила ассортимент смартфонов моделью Nokia X7, которая может выйти в международну...
Смартфон Porsche Design Huawei Mate 20 R...
Смартфон Porsche Design Huawei Mate 20 RКомпания Huawei представила премиальный смартфон Porsche Design Huawei Mate 20 RS, за основу которого взя...
Huawei Mate 20X получил 7,12-дюймовый эк...
Huawei Mate 20X получил 7,12-дюймовый экПомимо флагманских смартфонов Mate 20 и Mate 20 Pro компания Huawei сегодня представила и огромный Huawei...
Флагманский смартфон Huawei Mate 20 Pro ...
Флагманский смартфон Huawei Mate 20 Pro Как и ожидалось, сегодня компания Huawei представила флагманские смартфоны Mate 20 и Mate 20 Pro, главной...
CTL Chromebox CBx1 с невероятно мощным п...
CTL Chromebox CBx1 с невероятно мощным пОбычно все системы, которые разрабатывают для Chrome OS, получаются довольно слабыми — производители изна...
Sharkoon Pure Steel со странным шасси...
Sharkoon Pure Steel со странным шассиПользователи хотят получать нестандартные корпуса для своих компьютеров и производители эти решения готов...
Тесты Core i9-9900K разочаровали...
Тесты Core i9-9900K разочаровалиВ последнее время в сети было много информации о том, что компания Intel делает большой упор на процессор...
Поделиться в социальных сетях:


Предварительный обзор Cooler Master Cont...
Предварительный обзор Cooler Master ContКомпания Cooler Master запустила на просторах Kickstarter совершенно невероятный проект под названием Coo...
Обзор The Swindle. Отличная игра про сти...
Обзор The Swindle. Отличная игра про стиВ последнее время, и я не перестану это повторять, разработчики инди-проектов делают намного более интере...
Предварительный обзор Creative Sound Bla...
Предварительный обзор Creative Sound BlaДлительное время разработчики игровой периферии активно избегали консоли. Рынок был не очень развит, да и...
Обзор Bouncemaster. Шикарная игра...
Обзор Bouncemaster. Шикарная играНа  современном рынке казуальных игр есть большая проблема с отсутствием новых ярких идей. Большая часть ...
Предварительный обзор Thermaltake View 3...
Предварительный обзор Thermaltake View 3Компьютерные корпусы давно перестали быть чем-то обычным. Сейчас пользователи покупают настоящие произвед...
Предварительный обзор SteelSeries Rival ...
Предварительный обзор SteelSeries Rival Рынок игровой периферии давно перестал быть чем-то простеньким и недорогим. Геймеры хотят получить от пер...
Honor представила премиальный смартфон H...
Honor представила премиальный смартфон H10 октября в Москве прошла презентация смартфона Honor 8X. Модель позиционирует себя, как премиальный сма...
Предварительный обзор Alienware m15. Шик...
Предварительный обзор Alienware m15. ШикВ последнее время игровых ноутбуков стало все меньше — то производители прямо каждый день выпускали новые...
Обзор Battlerite Royale. Королевская бит...
Обзор Battlerite Royale. Королевская битКоролевские битвы пользуются бешеной популярностью среди геймеров — каждый хочет получить удовольствие от...
Предварительный обзор Nokia 7.1. Достойн...
Предварительный обзор Nokia 7.1. ДостойнБуквально вчера в сети была информация о мобильном телефоне Nokia 7.1, которую многие опровергали. Мы даж...
Обзор My Brother Rabbit. Отличная истори...
Обзор My Brother Rabbit. Отличная историЯ довольно редко играю в квесты и сюжетные игры в этом жанре мне нравятся невероятно редко. Обычно разраб...
Предварительный обзор Realme 2 Pro. Вот ...
Предварительный обзор Realme 2 Pro. Вот Весной этого года компания Oppo показала виру новый бренд Realme, который является дочерним предприятием....

МегаОбзорМегаОбзор
ЭЛ № ФС 77 - 68301. Выдано РоскомнадзоромМегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor