Красивые кнопки навигации
Вот, что должно у нас получиться в итоге:
Выберите инструмент Lasso (клавиша L) и сделайте выделение, как на рисунке ниже. Залейте его любым цветом (выберите цвет и нажмите Alt+F).
Теперь кликните правой кнопкой мыши на этом слое и выберите пункт Blending Options. Примените к кнопке следующие стили (цвета градиента: от #DCE5EE к #FFFFFF; цвет Stroke: #778AAB):
Вот, как сейчас выглядит наша кнопка:
Поздравляю, основа для кнопки сделана! Теперь давайте добавим стрелку. Нажмите клавишу U и выберите стрелку по вкусу.
Создайте новый слой, на него добавьте стрелку (путь). Затем, зажав клавишу Ctrl, кликните на этом слое, чтобы выделить его содержимое. Создайте новый слой на основе выделения (Ctrl+J) и заполните его любым цветом (я использовал #89B8E9). В меню Blending Oprions для этого слоя задайте следующие параметры:
Также, добавьте однопиксельный Stroke цветом #747A88. Теперь давайте добавим текст. Я использовал шрифт Blue Highway цвета #747A88.
Теперь Вы можете сгруппировать все эти слои (выделить их, зажав Shift и нажать Ctrl+G) и скопировать их нужное количество раз, чтобы получить несколько разных кнопок для Вашего меню
Вот, например, что получилось у меня:
Источник: http://www.swedesignz.com/photoshop/Clean_Menu_Buttons
Смотрите также:
зашибись
Респект тем кто писал
конференция по сайтам выиграна мной считай
Сентябрь 10th, 2007
http://thebuycheap.com/
Февраль 11th, 2008
Довольно полезно
Март 29th, 2008
Хороший урок, спасибо!
Март 29th, 2008
отстой…
Выберите инструмент Lasso — а не проще ли нарисовать форму с малоокругленными углами и потом низ обрезать прямоугольным выделением?
с лассо нудно выводить всю эту фишку, нужно делать все аккуратно и что бы рука не дрогнула… очь долго и неэффективно.
А вот за фон — 5 баллов! Ништяк. Простенько и с офигительным вкусом. Спасибо громаднейшее за идею, давно что то подобное подыскивал, но как то моска не хватило до такой простоты и красоты. Ништяк
Май 27th, 2008
ого — немножко не доглядел что уголки срезаны а не закруглены — тогда да, может лассо и проще — тут уж каждому своё
Май 27th, 2008
Прикольно
Май 28th, 2008
Да уж, сами кнопки как-то не очень, а вот фон очень хороший, только из-за этого они и смотрятся…
Август 21st, 2008
Попробую! Вроде смотрится красиво.
Сентябрь 18th, 2008
с лассо нудно выводить всю эту фишку, нужно делать все аккуратно и что бы рука не дрогнула… очь долго и неэффективно.
Октябрь 13th, 2008
(Чего по орегинальнее мог придумать(((
Ноябрь 27th, 2008
Плагины фотошопа позволяют делать более эффектные кнопки, автору респект за статью.
Январь 5th, 2009
Спасибо, думаю пригодится, видел на онлайн-магазине такие же кнопки
Февраль 10th, 2009
подскажите а как делать флеш меню в фотошопе ?
Март 21st, 2009
хорошый вариант. Спасибо!
Сентябрь 20th, 2009
Спасибо за урок. Пригодится в работе над сайтом
Октябрь 2nd, 2009
Углы можно и не лассо срезать, а по направляющим с помощью инструмента Pen tool!!!
Ноябрь 4th, 2009
Пригодится для моего любимого сайта!!!Огромное спасибо!!!
Август 3rd, 2010
Такое меню, можно чисто на CSS3 сделать и нужно ничего рисовать в фотошопе. Вот я у себя на блоге уже делал уроки.
http://w-blog.org.ua/?p=871
Август 16th, 2010