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

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 и #afb1b2. Назовите слой “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. Затем удалите лишние части, выходящие за пределы кнопки, и поместите этот слой между текстом и слоями с панелью меню.