все самое интересное о веб-дизайне

Как в фотошопе создать несколько кнопок навигационного меню

2

08-01-2012

Как в фотошопе создать несколько кнопок навигационного менюВ моем уроке «Как оформить группу В Контакте и создать красивое графическое меню» было вскользь упомянуто о создании графического меню. Сегодня я хочу подробно рассказать о том, как его можно сделать. Сначала с помощью прямоугольника со скругленными краями мы создадим фигуру. Потом наложим на нее стиль слоя для придания объема. Далее оформим круглый маркер навигационного меню. Потом с помощью текста создадим указатель-стрелку. В заключении раскопируем созданную кнопку и напишем на каждой из них свой текст.

Шаг 1.
Создаем в фотошопе новый документ, заливаем его цветом #0c1b26.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 2.
На панели инструментов выбираем инструмент «Прямоугольник со скругленными краями» (Rounded Rectangle Tool). В строке настроек под верхним меню выставляем «Радиус» (Radius) 50 пикселей и создаем фигуру как на рисунке ниже, цвет любой.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 3.
К созданной фигуре применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 4.
Далее стиль слоя «Внутренняя тень» (Inner Shadow).Как в фотошопе создать несколько кнопок навигационного меню

Шаг 5.
Далее стиль слоя «Тень» (Shadow).Как в фотошопе создать несколько кнопок навигационного меню

Шаг 6.
Получили такой результат.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 7.
На новом слое создаем небольшой кружок, цвет любой.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 8.
К созданной фигуре применим стиль слоя «Наложение градиента» (Gradient Overlay). Цвет слева #6d78a5, справа #9ea4c4.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 9.
Далее стиль слоя «Внутренняя тень» (Inner Shadow), цвет #0a1a28.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 10.
Далее стиль слоя «Тень» (Shadow).Как в фотошопе создать несколько кнопок навигационного меню

Шаг 11.
Получили такой результат.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 12.
Выбираем и настраиваем шрифт, как на рисунке ниже, и с помощью знака «больше» (или треугольная скобка) на английской клавиатуре делаем указатель для меню.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 13.
Выбираем и настраиваем шрифт, как на рисунке ниже, и пишем текст на кнопке. В данном случае «Практика для новичков».Как в фотошопе создать несколько кнопок навигационного меню

Шаг 14.
Применим к тексту стиль слоя «Тень» (Shadow).Как в фотошопе создать несколько кнопок навигационного меню

Шаг 15.
Получили такой результат.Как в фотошопе создать несколько кнопок навигационного меню

Шаг 16.
Теперь аналогичным образом создаем еще четыре кнопки, пишем на них текст и получаем готовое меню навигации.Как в фотошопе создать несколько кнопок навигационного меню

 
 
P.S. Постовой. А вы знаете, что автор блога hronofag.ru Drive Alienn пишет очень интересные и познавательные статьи для веб-дизайнеров. Например о том, как сделать сайт в фотошопе или симпатичную визитку в иллюстраторе.

92588
  • Поделиться:
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=6393
  • Подписаться на обновления:

  • Понравился пост? Поддержите DesingNonstop рублём!

Написать комментарий с помощью формы ВКонтакте

Написать комментарий с помощью формы Facebook

Написать комментарий с помощью формы Facebook

Комментариев 2 комментария

как создать несколько кнопок — слово несколько мне показалось лишним тут)

ОтветитьОтветить

@Naikom blog:
В смысле? А почему лишним?

ОтветитьОтветить

Написать комментарий с помощью обычной формы блога

Не пишите пожалуйста всякую ерунду и критику, все-равно все удалю. Спасибо за комментарий!