В этом уроке я расскажу вам, как создать отличное меню для вашего сайта, который далее можно использовать как готовую конструкцию для изготовления макета сайта.
Для начала создадим документ, в котором будем создавать наше меню. Создайте новый документ размером 800*600 пикселей и заполните его белым цветом.
Создайте выделение инструментом Прямоугольное выделение, и на новом слое залейте его цветом # 78b000.
Снимите выделение, нажав комбинацию клавиш Ctrl+D. Возьмите инструмент Прямоугольник с скругленными углами (радиус 15 пикселей.) и создайте форму любого цвета.
Установите непрозрачность слоя до 0% и примените к слою следующие функции:
В результате у нас получилась такая кнопка:
Дублируйте слой пять раз, и разместите кнопки как указано на рисунке:
Теперь мы должны сделать кнопки разного цвета, для этого измените параметры кнопок
Для второй кнопки:
Для третьей кнопки:
Для четвертой кнопки:
Для пятой кнопки:
Для шестой кнопки:
Вот такая цветная навигация у нас на данном этапе:
Далее мы добавляем текст на кнопки, для этого возьмите инструмент Горизонтальный текст и создайте надпись белого цвета шрифтом Myriad Pro, попытайтесь добиться того же результата что и у меня:
Затем примените к слою с текстом следующую функцию:
В результате чего мы получим тени от текста:
Создайте надписи остальным кнопкам и скопируйте стиль слоя с первой кнопки, чтобы текст имел на всех кнопках одинаковое начертание.
На этом работа с меню закончена, я считаю нужным добавить логотип, чтобы превратить наше меню в дизайн сайта. Для этого я использую инструмент Горизонтальный текст и пишу название и слоган сайта белым цветом, используя шрифт Avantgarde Md BT:
Самое время , чтобы добавить логотип, для этого инструментом Произвольная фигура создаем форму из стандартного набора фигур.
А сейчас делаем пазл в нижнем левом углу холста:
Теперь нажимаем Ctrl+T, чтобы повернуть фигуру:
Добавим еще несколько фигур в наш логотип в том же порядке:
Последним шагом мы добавляем едва заметный логотип на фоне навигации. Создаем копии трех фигур с головоломками и задаем им следующие функции:
У вас должно получится что-то вроде этого:
После этого шага мы помещаем серые копии головоломки под слоями с кнопками и увеличиваем их размер, до таких, как указано на рисунке:
Вы не потеряете качество при увеличении этих слоев, так как они векторные. Вот наш урок и закончился, теперь перед вами хорошая идея корпоративного дизайна, не так ли?