Профессиональная темная кнопка для веба
В этом уроке вы научитесь создавать профессионально кнопки для веб-сайтов, а также использовать их в панели навигации.
Приблизительное время выполнения: 10 минут
Шаг 1
Создайте прямоугольник с помощью Rectangle Tool (любого цвета) и растеризуйте его.
Шаг 2
Затем добавьте Gradient Overlay: #252525, #595959 и #9a9a9a
Шаг 3
Затем Stroke, цвет #424242
Шаг 4
Создайте градиент прямо над центром кнопки и затем зайдите в Select/Modify/Contract и поставьте значение 1 пиксель, затем создайте новый слой и залейте его любым цветом, нажмите Ctrl + D и поставьте fill на 0%
Шаг 5
Добавьте Stroke, от белого к прозрачному.
Шаг 6
Ваша кнопка будет выглядеть приблизительно так:
Шаг 7
Создайте новый слой и выделите область 1 пиксель высотой и залейте её градиентом типа Radial, от белого до прозрачного, начиная с середины и затем снимите выделение.
Шаг 8
Теперь вы должны сделать то же самое, что и в седьмом шаге, но используя #4a4a4a в качестве цвета для градиента.
Шаг 9
У вас должно получиться что-то подобное:
Шаг 10
Создайте новый слой и выделите область, как показано внизу, залейте её градиентом типа Linear цвета от #dadada до прозрачного.
Шаг 11
Наконец добавьте текст, используя шрифт Segoe размером 13 pt.
Вы также можете сделать вот такую панель навигации, выполняя те же шаги.
Источник: Professional Dark Web Button
Популярность: 16%
Похожие уроки photoshop:
- Как создать профессиональную черную кнопку
- Как создать кнопку в стиле Apple Mac
- Легкая, замечательная навигационная веб 2.0 панель!
- Стильная голубая кнопка
- Сложное лого цветка
ВНИМАНИЕ! Столкнулись с трудностями при выполнении данного урока? Осталось что-то, что Вам непонятно? Забыли основы работы в Adobe Photoshop? Не расстраивайтесь! Решение всех Ваших проблем находится прямо здесь: "!" - Это Бесплатный Мультимедиа-Курс от Данного Сайта, пройдя который Вы сможете назвать себя мастером качественной работы в известнейшем графическом редакторе! Узнать о курсе подробнее, а также подписаться на него можно, перейдя на страницу курса: Начальный Курс Photoshop! Подпишитесь и пусть все завидуют тому, как легко и быстро Вы создаете шедевры в Adobe Photoshop! Ждем Вас!
Загрузка ...
урок хороший,
но последний блик на тонкой нижней линейке не в тему
Август 6th, 2008
Классно!
Август 7th, 2008
Имхо все старое. Только фишка снизу разнобразила. Может есть и другие уроки?
Август 8th, 2008
Я никогда не сомневался в Вашем интеллектуальном уровне, но поймите, не все такие как Вы.
Август 27th, 2008
Застопорился на шаге 4!
Ноябрь 24th, 2008
тоже самое, не пойму:
Создайте градиент прямо над центром кнопки и затем зайдите в Select/Modify/Contract и поставьте значение 1 пиксель, затем создайте новый слой и залейте его любым цветом, нажмите Ctrl + D и поставьте fill на 0%
Какой градиент? Какие цвета? и т.д.
Январь 7th, 2009
На картинку в шаге 4 посмотрите и поймете где что делать.
Январь 26th, 2009
спасибо, отличный урок. Дал нашим дизайнерам ссылку, а то рисуют все хуже и хуже, сайты как шаблоны пошли.
Февраль 7th, 2009
эээээээээ челюсть валится чё таак просто ??
Апрель 15th, 2009
У кого проблемы с 4ым этапом, тут совершена ошибка, надо указать значение “Position” не “Outside”, а “inside”, или как-то вообще смысл в том что обводка должны быть не снаружи, а внутри, тогда получится так как на картинке.
Июль 24th, 2009
Главное просто и красиво, меню супер, осталось только с верстать.
Март 2nd, 2010