Pop-UP навигация в Photoshop

В этом уроке я проведу Вас через процесс создания всплывающей навигации в Photoshop. Во второй части данного урока, мы преобразуем картинку в красочное меню. Давайте начинать!

Что мы будем создавать?

При нажатии на картинку Вы сможете увидеть, что получится.

Приступаем к работе

Создадим новый документ 800х300px. Задаем новый цвет переднего плана #e1e1e1 и новый цвет фона #FFFFFF. Выбираем инструмент Градиент с типом Линейный градиент.

Создайте градиент на холсте, начиная с верней части холста, перетащите в нижнюю. В заключении добавим шум фона, перейдя в Filter-> Noise Add Noise.

Добавление иконок

Вы можете использовать любые иконки, какие хотите. В этом уроке я буду использовать Photoshop иконки созданные Pkarwowski.

Создание нормального состояния.

Выбираем инструмент выделения Прямоугольник, затем делаем небольшую подборку на фоне. Убедитесь, что выбор на одной градиентной линии, где и Ваши иконки.

Скопируйте выделение и вставьте его на новый слой. Затем вставьте этот кусочек фона поверх Ваших иконок. Примерно получится так.

После того как Вы вставили фрагмент кода на иконку, создаем два новых слоя над слоем фона. На первом слое под иконками проведите линию толщиной в один пиксель цветом #ffffff. На втором слое – цвет должен быть #626261, а линию необходимо провести под линией на первом слое.

Теперь, когда Вы добавили две линии, необходимо добавить маску слоя для каждого из двух слоев. Затем выберите инструмент Градиент с типом Отраженный градиент. Убедитесь, что белый цвет установлен как цвет переднего плана. Перетащите с середины одной из линий в направлении левого или правого края.

Повторите тот же шаг и для второй линии. Этим действием мы создали эффект сливания со слоем. Выглядит следующим образом.

Создание тени

Выберите инструмент Эллиптический (Elliptical Marquee Tool), затем создайте небольшой эллипс такой же ширины как иконка. Верхняя часть эллипса должна чуть-чуть заходить на иконку.

Заполните выделенный участок черным цветом (#000000), затем необходимо чуть-чуть размыть, чтобы получилась реалистичная тень. Для размытия будем использовать Фильтр, переходим Filter> Blur> Blur Guassian, задаем значение размытия примерно 2-3 пикселя.

Так будет выглядеть нормальное состояние нашего меню. Сохраните документ с именем normal.psd, затем выберите Сохранить Как и дайте имя hover.psd.

Создание окон наведения

Сейчас мы будем работать с файлом hover.psd. Выделите все слои, удерживая клавишу Ctrl, на каких у вас находятся иконки меню. Как только вы выделили все слои, выбираем инструмент Перемещение (V) и поднимаем иконки вверх. Необходимо переместить все значки так, чтобы нижние части иконок покрывались фоновым фрагментом.

На этом создание навигации в Photoshop подошло к концу. В следующей части урока мы приступим к кодированию этого меню.

Продолжение обучения

Если Вы хотите посмотреть, как можно создать меню с простой картинки, то этот урок специально для вас. Pop-UP CSS навигация – является второй частью данного урока.