Создаем необычное меню для сайта используя Фотошоп

| Категория: Уроки по созданию дизайна в Фотошопе | Сложность урока: Средняя

В этот раз будем учиться рисовать систему навигации используя Фотошоп, то есть меню для сайта.


Финальный результат

Создаем необычное меню для сайта используя Фотошоп

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


1. Создаем документ (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")), размеры значения не имеют, я выбрал 640х480. Заливаем его цветом #080713 (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).


2. С помощью инструмента Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") рисуем фигуру.


Создаем необычное меню для сайта используя Фотошоп

3. Применяем настройки в Стиле Слоя (Blending Options (Параметры наложения)): ↓


Создаем необычное меню для сайта используя Фотошоп

Результат: ↓

Создаем необычное меню для сайта используя Фотошоп

4. Кисточкой → Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") белого цвета, диаметром в 3 пикселя, рисуем линии приблизительно на одном расстоянии.


Создаем необычное меню для сайта используя Фотошоп

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


5. И для этого слоя настраиваем стили (Blending Options (Параметры наложения)).


Создаем необычное меню для сайта используя Фотошоп

Вышло такое вот: ↓


Создаем необычное меню для сайта используя Фотошоп

6. Добавим вот такие шарики с обеих сторон. ↓


Создаем необычное меню для сайта используя Фотошоп

Как их сделать? С помощью инструмента «Эллипс» Elipse Tool Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "U"), удерживая Shift, рисуем круг и применяем к нему настройки, как и в пункте 3, только меняя размер тиснения в зависимости от диаметра шарика.


Создаем необычное меню для сайта используя Фотошоп

Выделяем зону на шарике с помощью «эллипса» Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") и заливаем ее градиентом Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") от белого к прозрачному.


Создаем необычное меню для сайта используя Фотошоп

Ставим Fill (Заливка) на 7%, жмет Ctrl+T и слегка поворачиваем слой. Шарик готов. Таким путем делаем и остальные.


7. Дублируем слой с прямоугольником (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")), у которого скругленные углы, который мы создали в самом начале урока. Применяем к нему → Filter > Render > Lens Flare (Фильтр > Рендеринг > Блик). Выскочит меню с предложением растрировать слой, жмем «Аха». В появившемся окошке выбираем «Начало ролика» и снова жмем «Да».


Создаем необычное меню для сайта используя Фотошоп

Я уменьшил Fill (Заливка) до 15%.


Создаем необычное меню для сайта используя Фотошоп

8. Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")).


Создаем необычное меню для сайта используя Фотошоп

Делаем выделение «эллипс» Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") и заливаем его белым цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")). Удерживая Ctrl, жмем на слой с прямоугольником, который расположен ниже. Этим действием мы выделим контур прямоугольника. НО! Активным по-прежнему должен оставаться слой с белым эллипсом. Нажимаем Ctrl+Shift+I и жмем Delete. Результат.


Создаем необычное меню для сайта используя Фотошоп

С помощью все того же Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") делаем такое выделение. ↓


Создаем необычное меню для сайта используя Фотошоп

И снова Delete. Fill (Заливка) слоя на 3%.


Создаем необычное меню для сайта используя Фотошоп

9. Дублируем слой с фоном и применяем к нему Filter > Render > Lens Flare (Фильтр > Рендеринг > Блик). Подставляем его в угол меню, удаляем лишнее и уменьшаем Fill (Заливка) до 70%.


10. Теперь нам нужно изменить настройки двух шариков, ближайших к этому блику.


Создаем необычное меню для сайта используя Фотошоп

Для маленького: ↓


Создаем необычное меню для сайта используя Фотошоп

Параметр Тиснение с прежними настройками. Для того, что крупнее: ↓


Создаем необычное меню для сайта используя Фотошоп

Вот собственно и все. Вот так выглядит наше меню: ↓


Создаем необычное меню для сайта используя Фотошоп

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


А вот это уже окончательный вариант, который будет сиять на сайте.


Финальный результат

Создаем необычное меню для сайта используя Фотошоп

Автор: Найкрис Кроули