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

2

94714
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 пишет очень интересные и познавательные статьи для веб-дизайнеров. Например о том, как сделать сайт в фотошопе или симпатичную визитку в иллюстраторе.

Оцените, пожалуйста, статью!
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)
  • Короткая ссылка на этот пост: http://www.designonstop.com/?p=6393
  • Получать обновления:

  • Поддержать DesingNonstop рублём!

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

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

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

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

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

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

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

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

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

45 queries in 0,424 seconds.