Делаем меню для сайта в Фотошоп
Давайте рассмотрим один из вариантов создания блока меню для сайта в программе Фотошоп. Сделать это совсем не сложно, обладая элементарными знаниями программы Фотошоп.
Открываем программу Фотошоп. Создаём новый документ размером (для удобства сделайте большой размер) 600х800 рх. Выставьте основной цвет, которым будет заливаться весь блок. Затем инструментом «Прямоугольник со скруглёнными углами» нарисуем тело меню, которое автоматически зальётся выбранным вами цветом. Размеры выбирайте соответствующие вашим требованиям:
Теперь поработаем над стилем этого слоя. Сделаем следующие настройки:
Тень: 
Внутренняя тень:
Наложение градиента:
В результате получится такая заготовка:
Сделаем новый слой и при помощи того же инструмента «Прямоугольник со скруглёнными углами» сделайте выделение внутри первого прямоугольника и залейте его тем же цветом (фантазии не исключаются):
Сделаем настройки стиля этого слоя.
Внутренняя тень:
Наложение градиента:
Обводка:
И у нас получится:
Теперь будем делать кнопки в теле меню. Создаём новый слой и при помощи инструмента «Прямоугольная область» сделаем выделение для кнопки и зальём ее цветом чуть более тёмным чем основной цвет:
Настроем стили этого слоя.
Наложение градиента:
Обводка:
Сохранив настройки, создаём новый слой, используя инструмент «Прямоугольная область» сделаем выделение на половину кнопки и зальём его белым цветом, предварительно выставив Непрозрачность — 10%. Перед выделением очень советую увеличить масштаб картинки, так будет намного удобнее и точнее…:
Кнопка примет такой вид:
Создаём новый слой и делаем выделение ниже кнопки, заливаем его при помощи Радиального градиента от центра, переход черного в белое, изменив непрозрачность на 30 %:
В итоге выйдет вот такая кнопка:
Кнопке можно добавить какой-то значок:
В общем мы сделали одну кнопку. Теперь надо сделать несколько копий слоя этой кнопки (Ctrl + J), сдвигая поочерёдно каждую копию вниз. И получится вот такая заготовка меню:
И осталось последнее — сделать надписи в каждой кнопке. Для этого по очереди включаем каждый слой с кнопкой и используя инструмент «Горизонтальный текст», пишем названия страниц сайта:
Всё очень просто, но возможно кто-то не сразу поймёт. Если у кого-то возникнут вопросы, можете обратиться через форму обратной связи. Отвечу обязательно!
Статья была полезной?