logo

Навигация для сайта

Делаем меню для сайта в Фотошоп

Давайте рассмотрим один из вариантов создания блока меню для сайта в программе Фотошоп. Сделать это совсем не сложно, обладая элементарными знаниями программы Фотошоп.

Открываем программу Фотошоп. Создаём новый документ размером (для удобства сделайте большой размер) 600х800 рх. Выставьте основной цвет, которым будет заливаться весь блок. Затем инструментом "Прямоугольник со скруглёнными углами" нарисуем тело меню, которое автоматически зальётся выбранным вами цветом. Размеры выбирайте соответствующие вашим требованиям:телоТеперь поработаем над стилем этого слоя. Сделаем следующие настройки:

Тень: теньВнутренняя тень:внутренняя тень

Наложение градиента:градиент В результате получится такая заготовка:

заготовка

Сделаем новый слой и при помощи того же инструмента "Прямоугольник со скруглёнными углами" сделайте выделение внутри первого прямоугольника и залейте его тем же цветом (фантазии не исключаются):

новый слой

Сделаем настройки стиля этого слоя.

Внутренняя тень:внутренняя тень

Наложение градиента:градиент

Обводка:обводка

И у нас получится:

результат

Теперь будем делать кнопки в теле меню. Создаём новый слой и при помощи инструмента "Прямоугольная область" сделаем выделение для кнопки и зальём ее цветом чуть более тёмным чем основной цвет:новый слой

Настроем стили этого слоя.

Наложение градиента:градиент

Обводка:обводкаСохранив настройки, создаём новый слой, используя инструмент "Прямоугольная область" сделаем выделение на половину кнопки и зальём его белым цветом, предварительно выставив Непрозрачность - 10%. Перед выделением очень советую увеличить масштаб картинки, так будет намного удобнее и точнее...:новый слой

Кнопка примет такой вид:результатСоздаём новый слой и делаем выделение ниже кнопки, заливаем его при помощи Радиального градиента  от центра, переход черного в белое, изменив непрозрачность на 30 %:новый слой

В итоге выйдет вот такая кнопка:кнопкаКнопке можно добавить какой-то значок:значокВ общем мы сделали одну кнопку. Теперь надо сделать несколько копий слоя этой кнопки (Ctrl + J), сдвигая поочерёдно каждую копию вниз. И получится вот такая заготовка меню:результат

И осталось последнее - сделать надписи в каждой кнопке. Для этого по очереди включаем каждый слой с кнопкой и используя инструмент "Горизонтальный текст", пишем названия страниц сайта:готовое менюВсё очень просто, но возможно кто-то не сразу поймёт. Если у кого-то возникнут вопросы, можете обратиться через форму обратной связи. Отвечу обязательно!

Навигация для сайта обновлено: Апрель 10, 2017 автором: admin

Оставить комментарий

▲Вверх