Эффектное меню для веб-сайта по мотивам Windows Vista

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

1 Шаг

Создайте новый документ размерами 600×335px. Включите линейки по краям холста (View > Rulers) и вынесите с них две направляющих, как показано ниже. Одну нанесите на уровне 285px от верхнего края холста, другую — на расстоянии 310px.

2 Шаг

При помощи Rectangle Tool (U) создайте прямоугольник в первой линейке снизу и назовите получившийся слой “lower bar”. Затем откройте меню стилей для слоя, кликнув по нему два раза мышкой и примените стиль Gradient Overlay, задав градиент цветами от черного (#000000) к темно-серому #0C0C0C под углом 90 градусов.

Далее во второй линейке растяните еще один прямоугольник и назовите его “upper bar”. Снова откройте меню стилей и примените Gradient Overlay с цветами от #35393D и #787B7D под углом 90 градусов. Выберите оба этих прямоугольника и смените их Opacity на 90%. После того, как мы впоследствии добавим фон, едва заметная прозрачность будет весьма кстати в придании меню нужного эффекта.

3 Шаг

Следующим шагом будет добавление к меню блика при помощи Line Tool (U). Переключитесь на Line Tool и задайте толщину линии равную 2px. По верхнему краю только что созданной панели проведите линию и смените ее цвет на #9FA2A4. Назовите слой “lower highlight”. После этого сразу над этой линией проведите еще одну и смените ее цвет на #484B4D, назвав слой “upper highlight”. Перенесите эти два слоя вместе со слоями панели в отдельную группу и назовите ее “bar”. На этом шаге мы завершили работу с основанием меню.

4 Шаг

После того как с меню мы разобрались, можно перейти к созданию ряда разделителей, которые будут отделять текст. Снова переключитесь на Line Tool (U) и оставьте толщину линии равной 2px. Проведите вертикальную линию от центральной линии меню вверх, не доводя ее до блика буквально несколько пикселей. Не стоит выполнять это слишком точно, вы всегда сможете подкорректировать результат чуть позже. Затем откройте меню стилей для слоя с этой полоской и задайте ему Gradient Overlay под углом 90 процентов цветов от #676A6D и #4D6672. Назовите слой “upper divider”. Теперь проведите еще одну вертикальную линию, на этот раз от центральной линии меню вниз, не доведя до края меню столько же, сколько и в случае с верхней полоской. Эта часть разделителя будет без градиента, поэтому просто задайте ей цвет #43474B. Назовите слой “lower divider”. Перенесите эти две части разделителя в отдельную группу и назовите ее “divider”.

5 Шаг

Переключитесь на Type Tool (T) и смените цвет инструмента на белый (#FFFFFF). Шрифт для текста меню я избрал Segoe UI, так как именно он используется в пользовательском интерфейсе Windows Vista. Однако не у всех есть этот шрифт, поэтому в качестве замены может подойти и Arial. Установите размер кегля равным 11pt и напечатайте названия ссылок, делая равномерные отступы между ними. Затем выделите все эти слои с текстом и вынесите их в отдельную группу с названием “links”.

6 Шаг

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

Перенесите этот фон на ваш рабочий документ и переименуйте этот слой в “Background”. Поместите его позади всех остальных слоев. Заметьте, что прозрачность меню позволяет фону проступать наружу и создает замечательный эффект.

7 Шаг

На этом шаге мы нарисуем размытый округлый прямоугольник, который будет находиться позади текста с надписью. Это довольно распространенная техника в Vista. При помощи этого приема можно перехватить фокус внимания с фона и перенаправить его на надпись, сохраняя при этом возможность видеть прекрасную сцену позади.

Сначала дублируйте фон — из него мы вырежем часть для создания выступающей размытой панельки. Затем при помощи Rounded Rectangle Tool (U) растяните прямоугольник, начинающийся где-то за краем холста, чтобы в результате у вас получилась панель только с двумя скругленными углами.

После этого кликните по слою с фигурой с зажатой Ctrl — вы получите выделение по ее периметру. Затем удалите этот слой с фигурой и вырежьте выделенную область из копии слоя с фоном. После этого удалите и копию фона — она больше не понадобится.

Создайте новый слой с названием “blur” и вставьте на него вырезанную часть фона. Затем примените к этому слою размывку (Filter > Blur > Gaussian Blur) с радиусом в 5px. Примените к слою стиль Drop Shadow, как показано ниже.

8 Шаг

Теперь поместите в эту область какую-нибудь надпись. Используя тот же шрифт, что и для ссылок (Segoe UI) введите название сайта и теглайн. Часть названия я выделил жирным, также применил к тексту стили Drop Shadow и Gradient Fill.

9 Шаг

Этот шаг является опциональным и заключаться он будет в том, что мы создадим вариант подсветки кнопки в меню при наведении на нее курсора мыши. Растяните большой эллипс при помощи Ellipse Tool (U), который перекрыл бы область между разделителями. Задайте эллипсу цвет равным #5C94C5 и примените к нему размывку Gaussian Blur с радиусом в 10px. Затем удалите лишние части, выходящие за пределы кнопки, и поместите этот слой между текстом и слоями с панелью меню.

Заключение

Вот мы и подошли к концу этого урока. Я считаю, что меню удалось весьма эффектное: в сочетании с ярким фоном едва прозрачные элементы смотрятся великолепно! И вдобавок такое меню очень просто разверстать и использовать для своего блога или сайта. Пользуйтесь!

Для информации: Ленточный герметик, печи камины ока . Время работы магазина печи дымоходы. в любое удобное для Вас время

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.