Меню в стиле Apple

В этом уроке мы создадим горизонтальное меню в стиле Apple:

Меню в стиле Apple

Научимся создавать внутреннее свечение, тень для текста и блики. Для начала вам нужно создать новый холст (Ctrl+N) с шириной 730px, и высотой 100px, фон — белый:

Меню в стиле Apple

Теперь берем инструмент Rounded Rectangle Tool:

Меню в стиле Apple

Устанавливаем радиус скругления углов 3px (верхняя панель):

Меню в стиле Apple

И рисуем на холсте фон для меню. Его можно нарисовать на глаз, либо указать ширину и высоту в верхней панели (695px на 35px):

Меню в стиле Apple

Получаем следующее изображение:

Меню в стиле Apple

Цвет фона прямоугольной области сделайте #5e5e5e. В панели слоев кликаем два раза по черному квадратику, и в открывшемся окне записываем код цвета. Далее нам нужно добавить стили к слою. Открываем окно Layer Style:

Меню в стиле Apple

И заходим во вкладку Inner Glow (внутреннее свечение), устанавливаем для него следующие параметры: Blend Mode: Normal, Opacity: 20%, цвет: белый, Size: 10px

Меню в стиле Apple

Далее открываем вкладку Stroke (граница), и устанавливаем следующие значения:

Меню в стиле Apple

Нажимаем OK, получаем такой фон:

Меню в стиле Apple

Теперь нам нужно добавить блик, для этого создаем новый слой при помощи клавиш Ctrl+Shift+N, этот слой должен быть расположен выше слоя с фоном. Выделяем его в панеле слоев мышкой, далее зажимаем клавишу Ctrl и кликаем по нижнему слою, чтобы тот выделился пунктирной линией. Далее заливаем выделенную область белым фоном. Берем инструмент Rectangular Marquee Tool, зажимаем клавишу Alt, и выделяем половину обласити, т.е. сверху до центра:

Меню в стиле Apple

Нажимем Delet, затем добавляем к слою маску:

Меню в стиле Apple

Затем выбираем инструмент градиент (G), кликаем клавишу D, чтобы цвет шел от черного к белому, и проводим его сверху вниз:

Меню в стиле Apple

В панеле слоев нужно выставить прозрачность (Opacity) 20%:

Меню в стиле Apple

Теперь между этими слоями мы создадим пункты меню и границу между ними.

Начнем с границы. Создайте новый слой между фоном и слоем с маской. Затем возьмите инструмент Rectangle Marquee Tool, и создайте область шириной в 1px и высотой, равной высоте нашего фона:

Меню в стиле Apple

Залейте область цветом #484848, затем, не снимая выделение, переместите ее влево при помощи клавиш со стрелками на клавиатуре, залейте область слева и спарва цветом #757575:

Меню в стиле Apple

Снимите выделение Ctrl+D, затем скопируйте слой с границей четыре раза. Разместите их по ширине фона.

Теперь перейдем к созданию пунктов меню. Первый пункт — это иконка:

Меню в стиле Apple

Скачайте ее, и вставьте в нужное место. Затем возьмите инструмент Type Tool (T), и создайте несколько пунктов меню. Для слоя с текстом нужно задать тень:

Меню в стиле Apple

Цвет устанавливаем черный, угол -90 градусов, дистанция 1px, размер 0px.

Форму для поиска можно создать также при помощи инструмента Rectangular Marquee Tool, радиус скругления углов 10px. Затем нужно установить цвет фона #717171, внешнюю тень:

Меню в стиле Apple

Внутреннюю тень:

Меню в стиле Apple

Значок zoom можно взять здесь.

Скачать исходник psd

http://youtu.be/3jAI3JOY-3U

Источник: http://psd-html-css.ru/psd-notes/menyu-v-stile-apple

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Меню в стиле Apple | | 2012-05-14 18:40:00 | | Статьи Web-мастеру | | В этом уроке мы создадим горизонтальное меню в стиле Apple:Научимся создавать внутреннее свечение, тень для текста и блики. Для начала вам нужно создать новый холст (Ctrl+N) с шириной 730px, и | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: