«Методика обучения графического редактора Adobe Photoshop в профильном курсе информатики»

Падающая тень

Внутреннее свечение:

С представлением области контента покончено, теперь мы можем перейти к навигации. Оставляем активным слой content area, зажимаем Ctrl и щелкаем по миниатюре слоя (находится в правом нижнем углу окна слоев). Альтернативное решение: вы могли бы сделать правый щелчок по миниатюре слоя и использовать опцию Select pixels.

Теперь у вас должны быть выделены все пиксели, относящиеся к области content area (эта область ограничена пунктирными линиями, как показано на скриншоте):

На новом слое щелкаем по клавише M, чтобы выбрать инструмент Marquee. Переходим к основанию нашего изображения, зажимаем клавишу Alt и перетаскиваем выделение до тех пор, пока не останется небольшая полоса, как показано на скриншоте:

Меняем цвет изображения на #d3dbdf. На данном этапе у нас должен быть выбран недавно созданный пустой слой. Щелкаем по клавише G для выбора инструмента «Заливка» (Fill) (если выбирается градиент, то щелкаем Shift+G для переключения между вариантами). Заливаем выбранную область, а затем нажимаем CTRL + D, чтобы снять выделение.

Создание навигационного меню

Нажимаем клавишу U, чтобы выбрать произвольную форму (custom shape). На главной панели инструментов выбираем иконку формы, и затем переходим вправо к выпадающему списку доступных иконок:

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

Как вы можете заметить, я создал несколько дополнительных направляющих линий, чтобы сохранить размеры всех форм одинаковыми. Давайте теперь добавим к иконкам текст и отделим пункты друг от друга линиями.

Меняем цвет изображения на #97a3ac и щелкаем T для выбора инструмента «Текст». Заносим в него список своих страниц. Когда с этим будет закончено, нам понадобится создать дубликат текстового слоя. Для этого делаем правый щелчок по слою и выбираем Duplicate layer.
У нас должно быть два одинаковых текстовых слоя. Выберем исходный слой, после чего щелкнем по клавише V для выбора инструмента Перемещение (Move). Сдвинем слой вниз и вправо на 1px с помощью стрелочек на клавиатуре. Когда это будет сделано, изменим цвет текста на #e3eef6. Мы получим великолепный рельефный эффект для текста.

Теперь добавим линии, чтобы разделить пункты меню. Выберем инструмент Shape (Форма) с помощью нажатия на U, после чего в главной панели инструментов активируем инструмент Line (Линия). Его можно найти рядом с иконкой Shape (см. предыдущий скриншот).

Создаем новый слой и чертим на нем линию, как показано ниже:

Создаем дубликат этого изображения и с помощью инструмента Перемещение (Move, V) передвигаем его на 1 px вправо. Добавим следующий стиль к дубликату:

Объединяем эти два слоя в один (Merge layers): зажимаем клавишу Ctrl, щелкаем по первому слою, потом опять зажимаем клавишу Ctrl и щелкаем по второму слою. Затем щелкаем правой кнопкой и выбираем Merge Layers.

Вы можете теперь создавать дубликаты этого слоя и использовать их для остальных пунктов навигации, до тех пор, пока у вас не получится что-то похожее на следующее:

Я также добавил одну линию в самый низ меню (на скриншоте ее плохо видно).