Вертикальное меню для сайта
Создать такое меню будет довольно просто. Конечный итог этого урока будет выглядеть так:
Создаём в программе Фотошоп новый документ и с помощью инструмента "Прямоугольная область нарисуем один элемент будущего меню. Залейте этот прямоугольник любым цветом, подходящим дизайну сайта:
Сделаем этому элементу небольшую обводку. Для этого зайдём Слой > Стиль слоя > Параметры наложения > Обводка и выставим следующие параметры:
Теперь нам надо нарисовать две белые линии с помощью инструмента "Карандаш". Я выставил толщину линий 5 рх. Для начала создадим новый слой и нарисуем верхнюю линию, затем опять создаём еще один новый слой и рисуем нижнюю линию:
На полученных двух слоях фигур понизим Непрозрачность до 20%:
После этого элемент будет выглядеть так:
Создаем новый слой и рисуем с помощью инструмента "Карандаш" толстую линию по середине элемента, цветом более тёмным:
К этому слою применим Фильтр > Размытие > Размытие по Гауссу со следующими настройками:
Элемент примет вид:
Далее нарисуем "Карандашом" справа вертикальную линию:
Установите непрозрачность для этой линии так же 20%. Далее создайте еще один новый слой и "Карандашом" поставьте четыре точки возле линии:
Создаем новый слой и используя инструмент выделения "Овальная область"
- выделяем круг и заливаем его белым цветом:
- выделяем круг и заливаем его белым цветом:
Теперь поработаем с этим слоем и выставим ему следующие стили:
После всех настроек на элементе меню появится примерно такая кнопка слева:
Далее создаём еще новый слой, инструментом "Прямоугольное выделение" рисуем прямоугольник внутри элемента и заливаем его цветом элемента меню:
К этому слою применяем следующий стиль Внутренняя тень:
В итоге у нас получится такой вид элемента:
Теперь для полного вида такой навигации для сайта вам надо объединить все получившиеся слои в один и сделать несколько копий такого элемента, а затем соединив все копии вместе получаем примерно такой блок навигации для сайта:
