Меню для строгого сайта.

Урок Фотошопа

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

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



Начнём с создания нового документа, размером 160х220 пикселей, фон не важен. Выберите Rectangular Shape Tool и нарисуйте прямоугольник, 40 пикселей в высоту и 160 в ширину. Цвет прямоугольника не важен, потому, что мы применим к ниму следующий эффект - заливка градиентом:




Теперь, создаём новый документ 6х5 пикселей, с прозрачным фоном, выбираем Карандаш (Pencil Tool) толщиной 1 пиксель и цветом # 939393 и рисуем в этом документе две точки как показано на рисунке:

Потом, идём в Edit > Define Pattern, называем нашу новую палитру например "new_pattern" и нажимаем ОК. После чего, возвращаемся в наш предыдущий документ, выделяем наш прямоугольник (зажимаем Ctrl и кликаем на слой в палитре слоёв), создаём новый слой, называем его "Палитра" и идём в Edit > Fill, где в графе "Custom Pattern" выбираем нашу палитру. Нажимаем ОК.

После заливки идём в Filter > Blur > Gaussian Blur, где выбераем радиус 0,3 пикселя и кликаем ОК. Результат должен выглядеть вот так:

Теперь, создаём новый слой, выбираем карандаш (Pencil Tool) толщиной 2 пикселя и цветом # 696969 и рисуем линию по низу прямоугольника. После чего меняем цвет карандаша на # 808080 и рисуем точно такую же линию только по верху прямоугольника. Как на рисунке:

Выберите все слои которые относятся к нашему прямоугольнику-кнопке (их должно быть три) и сгруппируйте их нажав Ctrl+G. После чего клонируйте 5 раз эту группу слоёв и расположите как на рисунке:

Выберите например второй прямоугольник, и примените к нему следующую градиент заливку:

В этой же группе выберите слой "Палитра" и применяем к нему следующий эффект - заливка цветом # ffffff и уменьшим прозрачность слоя до 25%

Вот как должна будет выглядеть нажатая кнопка на сайте. Но это ещё не всё.

В этой же группе номер 2 создаём новый слой поверх остальных, выбираем Карандаш (Pencil Tool) толщиной 1 пиксель и цветом # ffffff, рисуем что-то типа стрелочки и распологаем её как показано на рисунке:

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

Copyright © http://megatutorials.blogspot.com