Создаём восхитительное меню в стиле Висты
Восхитительное меню в стиле Висты
Приблизительное время выполнения: 15 минут
В этом уроке вы научитесь создавать полупрозрачные меню в стиле Висты, используя градиенты, тени и размытие, чтобы придать созданному восхитительный современный эффект.
Шаг 2
Создайте новый документ размером 600х335 пикселей. Начните с отображения Rulers (View>Rulers), затем создайте две метки, как показано на рисунке внизу. Один из них должен находиться на отметке 285 пикселей, второй - 310 пикселей.
Шаг 2
Создайте прямоугольник (U), который заполнит нижнюю область линеек и назовите слой «Нижняя панель». Откройте Effects Menu слоя. Выберите свойство Gradient Overlay и создайте градиент от #000000 до #0c0c0c с уровнем 90 градусов.
Теперь создайте ещё один прямоугольник в верхней области и назовите его «Верхняя панель». Снова откройте меню эффектов и примените Gradient Overlay от #35393d до #787b7d на 90 градусов. Выберите оба с прямоугольника и измените Opacity на 90%. Когда позже будет добавлен фон, это создаст приятный эффект, фон будет слегка виден.
Шаг 3
Следующим этапом является добавление подсветки к меню с помощью Line Tool (U). Выберите Line Tool и измените толщину на 2 пикселя. Нарисуйте линию поперек панели и измените цвет на #9fa2a4. Переименуйте слой на «нижняя подсветка». Теперь нарисуйте ещё одну линию прямо над предыдущей и измените цвет на #484b4d, а название слоя — на «верхняя подсветка». Сгруппируйте эти слои с помощью панели слоев, назвав группу «панель». Этим шагом мы завершаем основу нашего меню.
Шаг 4
Теперь, после завершения панели меню, мы можем создать набор разделителей для текста. Снова выберите Line Tool и значение толщины линии 2 пикселя. Нарисуйте вертикальную линию из центральной метки на линейке перед подсветкой. Это не требует большой точности и легко может быть исправлено позже. Откройте меню эффектов и примените Gradient Overlay на 90 градусов от #676a6d до #4d6672. Назовите слой «верхний разделитель».
Нарисуйте ещё одну вертикальную линию из центральной отметки вниз и остановитесь на таком же расстоянии от края как и вверху. В этой секции нет градиентов, только поменяйте цвет на #43474b. Переименуйте слой на «нижний разделитель». Сгруппируйте две секции и назовите группу «разделитель».
Шаг 5
Выберите Type Tool (T) и измените цвет на белый (#FFFFFF). Шрифт, выбранный мной для меню, называется Segoe UI, потому что он используется в интерфейсе Висты. Однако, не у всех есть этот шрифт, поэтому вместо него вы вполне можете использовать Arial. Поставьте размер на 11pt и наберите ссылки, делая между ними ровные интервалы. Сгруппируйте их и назовите группу «ссылки».
Теперь скопируйте разделители и расположите их между ссылками. У вас должно получиться что-то похожее на картинку внизу.
Шаг 6
Теперь, когда вы в основном закончили меню, выберите фон. Я выбрал в качестве фона фотографию травы. Подойдет любое красочное и впечатляющее изображение.
Скопируйте фон в меню и назовите слой «фон». Убедитесь, что этот слой находится на заднем плане в вашей палитре слоев. Заметьте, что прозрачность меню позволяет чтобы фон было слегка видно без перекрытия.
Шаг 7
Теперь мы создадим размытие прямоугольника под текстом. Этот эффект распространен в Висте и является отличной техникой. Он фокусирует внимание на тексте за счет фона, но красивую картинку за ним по-прежнему видно.
Прежде всего, дублируйте фон. Этот слой непостоянен, но мы будем использовать вырезанные из него части. Затем, используя Rounded Rectangle Tool (U), нарисуйте фигуру, которая начинается за левым краем листа. Это означает, что у фигуры всего два закругленных угла.
Растеризуйте слой и затем, используя Magic Wand Tool (W), выберите прямоугольник и сотрите цвет, оставив края. Удалите копию фонового слоя и добавьте новый слой, именуемый «размытие».
Вставьте фигуру в слой «размытие» и примените Gaussian Blur со свойством 5 пикселей (Filter>Blur>Gaussian Blur). Примените Drop Shadow, как показано ниже.
Шаг 8
Теперь добавьте внутрь размытия ваш текст. Используя тот же шрифт, что и для ссылок, наберите ваше имя и подзаголовок. Часть текста выделите жирным шрифтом, а часть оставьте как есть, далее примените Drop Shadow и Gradient. Это произведет современный впечатляющий эффект.
Шаг 9
Этот шаг не обязателен, он служит для добавления голубой подсветки, которая будет показывать наведение на кнопку. Нарисуйте большой Ellipse (U), которым заполните интервал между разделителями. Измените цвет на #5c94c5 и примените Gaussian blur в 10 пикселей. Этот слой следует растеризовать, а излишки размытия подчистите, используя Marquee Tool (M).
Вывод
Это меню создает ошеломляющий эффект в сочетании с ярким, впечатляющим фоном. Тут используется прозрачность, так же, как и современные градиенты. Использование подсветки придает современный вид изображению, высветляя его края. Это меню легко будет нарезать и превратить в функциональное меню в веб с подсветкой состояния кнопок.
Смотрите также:
Красиво, мне нравится, даже сделать такое получилось, вот только какая ширина картинки должна быть, чтобы на всех мониторах смотрелась одинаково хорошо
Июнь 18th, 2008
Мне тоже понравилось, тока ушло минут 30, пока разобрался, пока сделал. Видимо не шарю
Июнь 20th, 2008
Дружище спасибо тебе за твои уроки, действительно очень многому научил, твой блог у меня в избраном по жизни!))))
Июнь 20th, 2008
блин,слушайте,а в шаге один и два,эти прямоугольники на новых слоях создавать,или как?если просто нарисовать на белом фоне прямоуг. а потом выбрать наложение градиента в меню,то нефига(
Июнь 20th, 2008
Все офигенно, народ скиньте пожалуйста ссылочку на такую красивую картинку для фона ввиде травы…
Июнь 23rd, 2008
Ух ты прикольно, мне очень понравилось.
Июнь 25th, 2008
Интересный урок, а самое главное что быстро выполняется.
Июнь 28th, 2008
а у меня русифициорованый фотошоп, я ничего не понял, как эти метки делать и вообще….
Я новичок, чайник, помогите!
Июнь 30th, 2008
Оооо…вродебы красиво но делать долго….
Июнь 30th, 2008
Спасибо. Действительно полезный урок. Вот что у меня получилось, неплохая шапка для сайта…
http://ipicture.ru/uploads/080704/8537p1ZUlx.jpg
Июль 4th, 2008
Автор молодец — хороший и доступный урок, скрины и разъяснения — на уровне
Июль 7th, 2008
Люди, у кого русский фотошоп, и не вы не можете разобраться, пишите мне в асю 405-102-933 я разобрался, помогу всем
Июль 8th, 2008
В уроке ошибка: при создании верхнего разделителя. При применении к нему градиента указаны цвета: «от #676a6d до #4d6672″, а надо от #676a6d до #afb1b2!
Просто при создании (как указано) получается от серого к серо-синему, а надо от серого до светло-серого.
Если я всё-таки не прав, то извиняйте… Но такого не должно быть
P.S.:А урок клёвый!!!
Июль 8th, 2008
Во как раз. А то мне клиент задал тему для дизайна: vista.
Июль 12th, 2008
сделал все шаги, получилось все точно как в уроке, я видел подобный урок, только там все блики задаются через градиенты, 2-3 одинаковых слоя наложеных друг на друга
Июль 16th, 2008
Июль 30th, 2008
Август 9th, 2008
Не понятен шаг 7, а именно
…выберите прямоугольник и сотрите цвет, оставив края…
что значит сотрите цвет?
Октябрь 8th, 2008
Не понятен шаг 7, а именно
…выберите прямоугольник и сотрите цвет, оставив края…
что значит сотрите цвет?
——————————-
eto zna4it sotri cvet stiratel’noj rezinkoj vnutri prjamougol’nika, posle etogo u tebja ostanetsja vydelennaja oblast’, potom nazmi na sloj kotoryj ty dybliroval, na nem tak ze budet vidno vydelennyju oblast’, kotoruju nado skopirovat’ (Ctrc+c), potom sozdaesh novyj sloj i vstavljaesh skopiruemoe izobrazenie v novyj sloj….dalee sleduj instrukcii opisannoj vyshe.
Udachi!
Октябрь 17th, 2008
Шаг 3
Следующим этапом является добавление подсветки к меню с помощью Line Tool (U). Выберите Line Tool и измените толщину на 2 пикселя. Нарисуйте линию поперек панели и измените цвет на #9fa2a4.
Поперёк? Это как? Судя по рисункам там влодь, а не поперёк. Или я ошибаюсь??!
Октябрь 23rd, 2008
На самом деле урок и результат классный!!!
а вот разбираться и правдо трудно1!!
Январь 19th, 2009
Это только кажется, на самом деле всё просто, у меня всё получилось довольно быстро. Был один не понятный момент, но там выше есть разяснения под моим постом, правда научным тыком я и сам допёр
Январь 20th, 2009
Кстати картинку для обученич можно взять из шага 6, такчто в учебных целях результат можно подогнать к оригиналу очень близко.
Январь 20th, 2009
ппц чет немогу понять когда делаю линию вдоль сверху 2х пиксельную то она както по страному идет вдоль они начинается не откуда я захачу а с определеного мамента это очень неудобно что делать и почему при сильном увеличении в фотошопе даже при огромном качестве ресунка у меня видны пиксели очень отчетлиВо?!!
Февраль 17th, 2009
Замечательный урок.
Но как сделать такое же меню вертикальным?
Март 23rd, 2009
Спасибо урок шикарный!
Я вообще в графике 0, только учусь,многое не понятно. Зато мало мальски за счёт ваших уроков начинаю понимать фотошоп.
Май 27th, 2009
А как его применить на сайте, и чтоб это синенькое тоже было)
Март 18th, 2010
JavaScript и CSS
Июнь 18th, 2010
Шаг 7 не очень понятен, а в целом отличный урок. Спасибо огромное. Никогда бы не подумала, что так просто.
Июнь 23rd, 2010
Шаг 3: непонятно как именно нужно проводить линию? Пытался допереть методом «тыка» — не получается ничего путного. + разделитель кнопок выглядит у меня как-то странно: совсем непохоже на данную иллюстрацию.
Октябрь 15th, 2010
И 5 пикселей гауссово размытие по-моему многовато — получаются какие-то нечеткие края: совсем не такие как на иллюстрации.
Октябрь 15th, 2010
Огромное спасибо! Отличные понятные уроки, сайт преображать надо!
Апрель 7th, 2011
Урок просто отличный, спасибо.
Май 7th, 2011
Народ, подскажите плиз. Я сделал эту тему а как её можно применить к рабочему столу на компе, чтобы было понятней я хочу свой старый меню пуск заменеит на этот вопрос Как это сделать? Подскажите плиз
Декабрь 11th, 2011
Жёшь
Декабрь 11th, 2011