Оригинальное горизонтальное меню для сайта
В этом уроке разберём пример создания вертикального меню для сайта или блога. Цвета используйте такие, которые будут подходить к дизайну Вашего шаблона. Конечный результат урока будет такой:
Для начала создайте новый документ, с размером будущего горизонтального меню. Я залью холст синим цветом и на нём буду делать макет меню. Выбираем инструмент выделения Прямоугольник со скругленными углами с радиусом 20 пикселей для того, чтобы нарисовать панель меню.
Растянув прямоугольник, нажмите клавишу Alt и удерживая её, пользуясь тем же инструментом, но уменьшив радиус до 10 пикселей, нарисуйте необходимое Вам количество маленьких элементов, как показано на рисунке:
Поработаем со стилями слоя. Для начала выставьте параметр слоя "Заливка" равным 0%.
Зададим слою стиль Внутреннее свечение и установим следующие параметры как показано на рисунке внизу:
Добавим градиент "Наложение градиента" и установите следующие параметры:
Параметры градиента должны быть примерно такими:
Включим пункт Обводка и выставим следующие параметры:
В итоге мы получим вот такую заготовку:
Если у Вас еще не исчезли линии рисунка, который мы делали в самом начале, то сделайте клик по пиктограмме слоя и они исчезнут.
Используя ранее применяемый инструмент выделения Прямоугольник со скругленными углами с радиусом 10 пикселей, нарисуем индикаторы переключения кнопок меню, предварительно выставив цвет индикатора:
выставляем цвет:
рисуем индикатор:
Теперь надо сделать несколько копий слоя с индикатором. Количество копий зависит от созданного Вами количества элементов меню. В моём случае надо сделать 3 копии. Каждую копию надо перетянуть в отдельные ячейки. В "Стилях слоя" всем индикаторам, кроме первого, измените цвет. У меня получилось следующее:
Нарисуем подсветку индикатора, используя инструмент выделения Прямоугольник со скругленными углами с радиусом 15 пикселей:
Опять установливаем Заливку на 0% и добавим градиент в стилях слоя:
Параметры градиента должны быть как на рисунке, с одной стороны должен быть прозрачным:
Должно получиться приблизительно следующее:
Опять делаем копии слоя подсветки индикатора и размещаем их на остальных индикаторах. Получится вот такой блок:
Используя инструмент "Линия" нарисуем разделители для кнопок меню:
Включим инструмент "Текст" и пропишем названия кнопок. Получится примерно так:
На этом можно и остановиться. Блок горизонтального меню готов. Для желающих можно сделать эффект отражения. Для этого сделаем следующие шаги:
- отключаем фоновый слой;
- все остальные слои выделяем (делаем клик по первому слою, и удерживая клавишу Shift, делаем клик по последнему слою). Заходим в меню Слой > Сгруппировать слои и группируем выделенные слои. После этого у Вас в слоях появится папка Группа.
- сделайте копию только что созданной группы и разместите ее в отдельном слое (нажмите CTRL+E).
- копию надо развернуть, пройдя в меню Редактирование > Трансформирование > Отразить по вертикали. У Вас получится зеркальная копия блока меню. Копию надо сдвинуть вниз.
Остаётся поработать с инструментом "Градиент" и затемнить нижнюю часть отражения, чтобы получилось примерно так:
Для установки на сайт фоновая заливка не нужна, поэтому при сохранении файла отключите фоновый слой.
