Tags: Графика для сайта | портфолио дизайнера | Уроки Photoshop | уроки web дизайна | уроки веб дизайна

В этом уроке я расскажу вам, как создать отличное меню для вашего сайта, который далее можно использовать как готовую конструкцию для изготовления макета сайта.

Для начала создадим документ, в котором будем создавать наше меню. Создайте новый документ размером 800*600 пикселей и заполните его белым цветом.

Создайте выделение инструментом Прямоугольное выделение, и на новом слое залейте его цветом # 78b000.

Снимите выделение, нажав комбинацию клавиш  Ctrl+D. Возьмите инструмент Прямоугольник с скругленными углами (радиус 15 пикселей.) и создайте форму  любого  цвета.

Установите непрозрачность слоя до 0% и примените к слою следующие функции:

В результате у нас получилась такая кнопка:

Дублируйте слой пять раз, и разместите кнопки как указано на рисунке:

Теперь мы должны сделать кнопки разного цвета, для этого измените параметры кнопок
Для второй кнопки:

Для третьей кнопки:

Для четвертой кнопки:

Для пятой кнопки:

Для шестой кнопки:

Вот такая цветная навигация у нас на данном этапе:

Далее мы добавляем текст на кнопки, для этого возьмите инструмент Горизонтальный текст и создайте надпись белого цвета шрифтом Myriad Pro, попытайтесь добиться того же результата что и у меня:

Затем примените к слою с текстом следующую функцию:

В результате чего мы получим тени от текста:

Создайте надписи остальным кнопкам и скопируйте стиль слоя с первой кнопки, чтобы текст имел на всех кнопках одинаковое начертание.

На этом работа с меню закончена, я считаю нужным добавить логотип, чтобы превратить наше меню в дизайн сайта. Для этого я использую инструмент Горизонтальный текст и пишу название и слоган сайта белым цветом, используя шрифт Avantgarde Md BT:

Самое время , чтобы добавить логотип, для этого инструментом Произвольная фигура создаем форму из стандартного набора фигур.

А сейчас делаем пазл в нижнем левом углу холста:

Теперь нажимаем Ctrl+T, чтобы повернуть фигуру:

Добавим еще несколько фигур в наш логотип в том же порядке:

Последним шагом мы добавляем едва заметный логотип на фоне навигации. Создаем копии трех фигур с головоломками и задаем им следующие функции:

У вас должно получится что-то вроде этого:

После этого шага мы помещаем серые копии головоломки под слоями с кнопками и увеличиваем их размер, до таких, как указано на рисунке:

Вы не потеряете качество при увеличении этих слоев, так как они векторные. Вот наш урок и закончился, теперь перед вами хорошая идея корпоративного дизайна, не так ли?

Источник.