Навигация с новостной панелью
В данном уроке показано, как создать веб-навигацию по меню с новостной
панелью при помощи программы Adobe Photoshop. На данный урок меня
вдохновила навигация данного сайта.
После выполнения данного урока, у Вас должно получиться что-то похожее.
![](http://www.photoshop-master.ru/lessons/les1259/0.jpg)
Давайте начнем.
Создайте новый документ размером 900х300 пикселей с прозрачным фоном.
Следующие наши шаги разбиты на этапы.
Таким образом, создайте новые направляющие View->new guide
(Просмотр->Новая направляющая) по вертикали: 20, 30, 165, 170, 305, 310, 445, 450, 585, 590, 725, 730, 870 и 880px.
И по горизонтали: 30, 90 и 270px.
![](http://www.photoshop-master.ru/lessons/les1259/1.jpg)
Начнём теперь рисовать кнопки меню для навигации.
Используем инструмент Прямоугольник с закругленными углами , радиус закругления 10px и выберите цвет # 025d8c.
![](http://www.photoshop-master.ru/lessons/les1259/2.jpg)
Хорошо. Теперь расположите первую кнопку между вертикальными направляющими 30px и 165px и горизонтальной 90px.
Применим к слою стиль слоя.
Тиснение/скос
![](http://www.photoshop-master.ru/lessons/les1259/3.jpg)
Наложение градиента
![](http://www.photoshop-master.ru/lessons/les1259/4.jpg)
Ваш результат должен выглядеть следующим образом. На изображении видно,
что наша кнопка немного выходит за границы направляющей, расположенной
на расстоянии 90px.
![](http://www.photoshop-master.ru/lessons/les1259/5.jpg)
А теперь просто дублируйте слой с кнопкой 5 раз, чтобы получить 6 кнопок. Результат следующий:
![](http://www.photoshop-master.ru/lessons/les1259/6.jpg)
Теперь, используя инструмент прямоугольник и выбрав цвет переднего плана #0b4b6d, нарисуйте прямоугольник, как на изображении ниже.
![](http://www.photoshop-master.ru/lessons/les1259/7.jpg)
Примените стиль слоя, используя следующие параметры:
Наложение градиента
![](http://www.photoshop-master.ru/lessons/les1259/8.jpg)
Теперь мы можем написать текст на наших кнопках. Параметры текста могут быть разными, Автор использовал следующие.
![](http://www.photoshop-master.ru/lessons/les1259/9.jpg)
Для текста Автор также использовал стиль слоя.
Тень
![](http://www.photoshop-master.ru/lessons/les1259/10.jpg)
Обводка
![](http://www.photoshop-master.ru/lessons/les1259/11.jpg)
Результат показан ниже:
![](http://www.photoshop-master.ru/lessons/les1259/12.jpg)
Снова воспользуемся инструментом Прямоугольник , выберите цвет переднего плана #e9e9e9 и нарисуйте область, где будет располагаться новостная панель.
Примените следующий стиль слоя.
Тень
![](http://www.photoshop-master.ru/lessons/les1259/13.jpg)
Результат показан ниже.
![](http://www.photoshop-master.ru/lessons/les1259/14.jpg)
Теперь, используя инструмент Прямолинейное Лассо (Polygonal Lasso), создайте выделение как на изображении ниже.
![](http://www.photoshop-master.ru/lessons/les1259/15.jpg)
Выберите инструмент Градиент (Gradient Tool), настройте цвет от черного к черного.
![](http://www.photoshop-master.ru/lessons/les1259/16.jpg)
Сделайте то же самое для правой стороны рядом с последней кнопки. Результат должен выглядеть примерно так.
![](http://www.photoshop-master.ru/lessons/les1259/17.jpg)
Вот и готово наше меню навигации с новостной панелью.
Теперь просто заполните новостной панель любым содержанием, по Вашему желанию.
Надеюсь, что урок оказался полезным для Вас.
Автор: Janis Bendiks
Переводчик: Лукша Юрий
Ссылка на источник
|