Веб-мастерская Ларисы ВоронинойДизайн меню. Как создать дизайн панели меню (продолжение).
WEB-мастерская Ларисы Ворониной logo

Дизайн меню. Как создать дизайн панели меню (продолжение). Окт 18 2016


В  предыдущей статье, в которой мы начали создавать дизайн меню мы нарисовали панель меню.
dizajn menu

В этой статье мы создадим пункты меню, разделительные линии и окно поиска.

Итак, открываем наш макет, который мы сделали в прошлой статье и берём инструмент «Текст» (горячая клавиша Т) со следующими параметрами:
dizajn menu

И пишем пункты меню.
dizajn menu

К получившемуся текстовому слою применяем стиль fx «внешнее свечение».
dizajn menu

Текст стал выглядеть более эффектным:
dizajn menu

Теперь рисуем разделители.

Создаём новый слой под названием «светлая линия».

Берём инструмент «линия» (цвет не важен) и рисуем между пунктами меню вертикальную линию.

Копируем этот слой (зажимаем ALT) и мышкой перетаскиваем линию на 1px вправо.

Получившемуся слою даём название «тёмная линия».

Теперь для светлой линии применяем стиль слоя fx -> наложение цвета, и цвет выбираем светло зелёный, почти белый.

Для тёмной линии выбираем тёмно зелёный цвет, почти чёрный.

Растрируем эти два слоя.
dizajn menu

Далее объединяем эти два слоя: зажимаем клавишу SHIFT, выделяем мышкой слои которые хотим объединить, и, щёлкнув правой кнопкой мыши выбираем пункт «объединить слои».
dizajn menu

Получившемуся слою даём название «разделитель».
dizajn menu

Согласитесь, разделитель получился не очень красивым, так что будем приводить его к нужному виду.

Берём инструмент «ластик» со следующими параметрами:
dizajn menu

И аккуратно стираем края у разделителя. Должно получиться так, как будто края разделителя растворяются. Уменьшаем непрозрачность слоя до 75%.

Должно получиться примерно так:
dizajn menu

Далее копируем разделитель и ставим в нужные места.
dizajn menu

Теперь в правой части панели  добавляем окно поиска.

Создаём новый слой под названием «окно поиска».

Выставляем вертикальные направляющие примерно на 700px  и на 1000px, горизонтальные на 130px  и на 170px.

Берём прямоугольник со скруглёнными углами, радиус закругления делаем 5px и рисуем окно поиска.
dizajn menu

К этому слою применяем стиль fx «наложение цвета». Цвет выбираем очень светло зелёный (почти белый).

И применяем стиль «внутренняя тень» со следующими параметрами:
dizajn menu

Окно поиска стало выглядеть слегка вдавленным.

Теперь создаём новый слой и даём ему название «значок поиска».

Берём инструмент «произвольная фигура».
dizajn menu

Выставляем следующие параметры:
dizajn menu

Выбираем фигуру «лупа». Чтобы найти нужную нам фигуру, нажимаем на значок шестерёнки (синяя стрелка) и выбираем пункт «все».

dizajn menu

Рисуем значок поиска.

Вот в общем-то и всё. Дизайн меню готов. Как сверстать эту панель меню с помощью HTML и CSS читайте здесь.


Рейтинг@Mail.ru