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

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

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


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

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


Комментарии:
Монитор Philips 436M6VBPAB получил серти...
Монитор Philips 436M6VBPAB получил сертиPhilips объявила о своем новом 436M6VBPAB мониторе, который может обрабатывать 1000 нит, что подтверждает...
Battlefield V возвращается к теме Второй...
Battlefield V возвращается к теме ВторойDice и EA представили дату релиза Battlefield V. Шутер от первого лица будет выпущен 19 октября и будет п...
IPS-экран лэптопа Chromebook Spin 15 по...
 IPS-экран лэптопа Chromebook Spin 15 поКомпания Acer анонсировала 15,6-дюймовый лэптоп Chromebook Spin 15 с разрешением дисплея 1920 на 1080 пи...
Стали известны цены смартфонов серии Me...
Стали известны цены смартфонов серии  MeВ России появились новые смартфоны серии Meizu 15, 15 Plus и 15 Lite. Девайсы наделены 5,46 и 5,95-дюймо...
Предварительный обзор Acer Predator X27....
Предварительный обзор Acer Predator X27.Игровые мониторы перестали быть чем-то невероятным — сейчас каждый второй пользователь может купить себе ...
Появились новые подробности о спецификац...
Появились новые подробности о спецификацСтали известны новые подробности о спецификациях и предположительной дате анонса устройства Samsung Gal...
Поделиться в социальных сетях:


Обзор FlipTheGun. Постреляем...
Обзор FlipTheGun. ПостреляемСовременные мобильные игры направлены на два типа пользователей — первый хочет играть в короткие сессии, ...
Sony представила новую линейку телевизор...
Sony представила новую линейку телевизор17 мая в Москве состоялась презентация Sony, на которой показали новые телевизоры BRAVIA. В линейку вошли...
В Иннополисе открыта опытная зона сети н...
В Иннополисе открыта опытная зона сети н21 мая, Иннополис, Татарстан. ПАО «Ростелеком», ПАО «Таттелеком», компания Huawei и Министерство информат...
Предварительный обзор Logitech G305. Бюд...
Предварительный обзор Logitech G305. БюдИгровая периферия перестала быть просто устройством ввода — теперь каждый геймер хочет получить настоящег...
Обзор Ladybug. Раннеры снова в моде...
Обзор Ladybug. Раннеры снова в модеСтоит сказать, что еще несколько лет назад раннеры были очень популярными — буквально каждый день выходил...
Предварительный обзор Xiaomi Redmi S2. Н...
Предварительный обзор Xiaomi Redmi S2. НКитайские смартфоны перестали быть чем-то странным и отвергнутым — сейчас некоторые бренды Поднебесной вы...
Обзор Iron Throne. Netmarble вновь порад...
Обзор Iron Throne. Netmarble вновь порадКажется буквально недавно любители мобильных игр и фанаты La2 сумели с достоинством оценить появившуюся L...
Компания ASUS анонсирует старт продаж ма...
Компания ASUS анонсирует старт продаж маВ материнских платах ROG, ROG Strix, Prime и TUF Gaming для высокопроизводительных процессоров AMD Ryzen ...
«Академия безопасного вождения Ford» дл...
«Академия безопасного вождения Ford»  длЭкспертный центр «Движение без опасности» в партнерстве с компанией Ford Sollers обяъвили о старте нового...
Предварительный обзор OnePlus Bullets Wi...
Предварительный обзор OnePlus Bullets WiВместе со своим смартфоном OnePlus 6 компания продемонстрировала и совершенно новые наушники OnePlus Bull...
Обзор Candy Camera. Делаем селфи красивы...
Обзор Candy Camera. Делаем селфи красивыСкажу честно — я не большой фанат редактирования фотографий на смартфоне. Во-первых, больше люблю оригина...
Стартует крупнейший турнир по VR-версии ...
Стартует крупнейший турнир по VR-версии Наконец свершилось то, о чем мечтали миллионы фанатов «World of Tanks» - вышла VR-версия их любимой игры...

МегаОбзор
МегаОбзор
MegaObzor в социальных сетях:
Яндекс.Метрика
2006-2018 © MegaObzor