Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

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

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Конечный результат:

Web меню в стиле Vista


Шаг 1
Создайте новый документ размером 600х335 пикселей. Перейдите в меню Просмотр»Линейки (View > Rulers). Отведите две горизонтальные направляющие на отметках 285 и 310 пикселей.

Web меню в стиле Vista


Шаг 2
Инструментом Прямоугольник (Rectangle Tool) создайте фигуру в нижней части холста на всю ширину холста высотой до первой нижней направляющей. Назовите слой “lower bar”. Примените стиль Наложение градиента (Layer Style - Gradient Overlay): #000000 – #0c0c0c, угол – 90 градусов.
Создайте ещё один прямоугольник над первым (между двумя направляющими). Назовите слой “upper bar”. Примените тот же стиль Наложение градиента: #35393d – #787b7d. Установите Непрозрачность обоих слоёв с прямоугольниками – 90%. Когда мы вставим картинку на фон шапки, то даже через тёмное меню она будет видна.

Web меню в стиле Vista


Шаг 3
Теперь добавим свечение при помощи инструмента Линия (Line Tool). Выберите этот инструмент, задайте толщину – 2 пикселя. Создайте линию на всю ширину холста над прямоугольниками цветом #9fa2a4. Назовите слой с линией “lower highlight”. Создайте ещё одну линию над первой цветом #484b4d. Назовите второй слой с линией “upper highlight”. Объедините два слоя с прямоугольниками и два слоя с линиями в одну группу (Ctrl+G). Назовите группу “bar”.

Web меню в стиле Vista



Шаг 4
Панель меню закончена. Теперь нужно создать несколько разделителей между названиями разделов. Инструментом Линия (Line Tool) создайте вертикальную линию толщиной 2 пикселя. Разделитель должен начинаться с вертикального цвета чёрной панели (на границе двух прямоугольников) и заканчиваться на расстоянии нескольких пикселей от свечения. К разделителю примените стиль Наложение градиента (Layer Style - Gradient Overlay): угол – 90, #676a6d – #4d6672. Назовите этот слой “upper divider”.
Нарисуйте ещё одну такую же вертикальную линию цветом #43474b. Она должна идти от вертикального центра вниз и не доходить до нижней границы. Назовите слой “lower divider”. Объедините оба слоя с линиями в группу (Ctrl+G) и назовите её “divider”.

Web меню в стиле Vista


Шаг 5
Выберите инструмент Горизонтальный текст (Horizontal Type Tool), установите цвет заливки – белый. Нужно написать названия разделов меню. Я использовал шрифт “Segoe UI” (шрифт интерфейса Vista). Он есть не у всех, поэтому его можно заменить шрифтом “Arial”. Задайте размер 11pt. И напишите названия разделов. Они должны быть на одинаковом расстоянии друг от друга. Объедините все текстовые слои в группу “links”.
Сделайте несколько копий разделителя и вставьте их между разделами меню.

Web меню в стиле Vista


Шаг 6
Займёмся фоном. Нам понадобится фотография травы.

Web меню в стиле Vista


Вставьте её в наш документ под слои с панелью меню. Назовите этот слой “background”. Пониженная непрозрачность тёмного меню позволяет видеть траву под ним:

Web меню в стиле Vista


Шаг 7
В этом шаге мы создадим размытый прямоугольник с закруглёнными углами позади текста. Это очередной эффект в стиле Vista.
Сделайте копию фонового слоя. Инструментом Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) создайте фигуру в левой части холста. Сдвиньте её влево, чтобы левая граница вышла за пределы холста. Это нужно для того, чтобы только два закругленных угла были видны.
Кликните правой кнопкой на слой с прямоугольником и выберите Растрировать слой (Rasterize Layer), выберите инструмент Волшебная палочка (Magic Wand Tool) и сделайте выделение закруглённого прямоугольника, нажмите Delete, чтобы удалить цвет. Выберите копию фонового слоя и нажмите Ctrl+X, чтобы вырезать часть фона. Удалите эту копию и создайте новый слой (Create New Layer), назовите его “blur”.
На слое “blur” нажмите Ctrl+V, чтобы вставить часть фона. Потом примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 5 пикселей. Затем примените стиль Отбрасывание тени (Layer Style - Drop Shadow): Режим – Умножение.

Web меню в стиле Vista


Шаг 8
На размытую область добавьте текст, используя тот же шрифт, что и для названий разделов меню. Часть текста сделайте жирной, часть нормальной. Примените следующие стили:

Отбрасывание тени: Режим – Умножение
Наложение градиента: Режим – Нормальный, Стиль – Линейный

Web меню в стиле Vista


Шаг 9
Этот шаг дополнительный. Мы создадим синее свечение, которое будет на активном разделе меню. Инструментом Эллипс (Ellipse Tool) создайте фигуру так, чтобы она покрывала один из разделов меню (смотрите на изображение ниже). Цвет эллипса - #5c94c5. Примените к нему фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 10 пикселей. Инструментом выделения удалите часть размытого эллипса, которая выходит за пределы раздела.

Web меню в стиле Vista


Финальный результат:

Web меню в стиле Vista




Обсудить данный урок на форуме





Ссылка на источник урока