Обработка графики Просмотров: 4482
В этом уроке вы увидите как с помощью несколько несложных приёмов нарисовать панель навигации для сайта стиля Web 2.0 в программе Photoshop. И для начала создадим в фотошопе новый проект размером 550 на 150px. цвет фона я выбрал # 686868. Теперь установим направляющие которые очень сильно облегчают работу, в общем без них не как. В нашем случае панель навигации будет 50px. в высоту, и мы сделаем три кнопки размером 166 px. в ширину.
Создадим новый слой с названием «Фон навигации», и на этом слое с помощью инструмента Прямоугольное выделение сделаем как на изображении ниже и зальём выделенную область цветом # 2c2c2c.
Теперь снимем выделение (Ctrl+D) и зайдем в стили слоя «Фон навигации», и зададим легкий градиент как показано ниже на изображении.
Вот получившийся результат лёгкого градиента.
Теперь создадим новый слой, на котором инструментом Прямоугольное выделение разделим нашу панель навигации пополам, выделенную область зальём белым цветом и снимаем выделение .
Уменьшим непрозрачность последнего слоя до 8%
И так теперь нам нужно добавить разделяющие линии кнопок, для этого создадим новый слой и возьмём инструмент Однопиксельное выделение (вертикальная строка) и по вертикальным направляющим делаем выделение, которое заливаем белым цветом.
Конечно теперь нужно удалить ненужные выступающие за пределы панели навигации линии, для их удаления возьмём опять же инструмент Прямоугольное выделение, делаем выделение как на изображении ниже и нажимаем клавишу Delete, тем самым удалим всё что в области.
Тоже сделайте и с нижней частью панели навигации, после чего уменьшим непрозрачность линий да 30%.
Теперь создадим новый слой назовём «Активный», берём инструмент Прямоугольное выделение которым делаем выделение по размеру средней кнопки панели навигации и заливаем любым цветом у меня это синий.
Теперь заходим в стили слоя «Активный» и придаём стили как на изображениях ниже.
Ну вот осталось добавить необходимы текст и панель навигации для сайта в стиле Web 2.0 готова.
