Фотошоп для фотографа 2013

Рисуем пламенную веб-навигацию используя Фотошоп

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

В данном уроке Фотошопа мы рассмотрим, как можно нарисовать пламенную веб-навигацию.
Внимание: Сложный урок. ВНИМАНИЕ: Урок предназначен для уже продвинутых пользователей Фотошопа.


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

Рисуем пламенную веб-навигацию используя Фотошоп

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


Шаг 1.


Создаем новый документ произвольных размеров (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Залейте фон чёрным цветом (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")). На новом слое создайте круг (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), используя Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U"): ↓


Примечание: вплоть до 14 шага, рисунки будут увеличены, поэтому не стоит лепить круг на весь экран.


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 2.


Вызываем - Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)). Кликните правой кнопкой мышки по изображению и выберите warp (деформация). В выпадающем меню выберите Fish (Рыбой), с настройками: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 3.


Повторяем операцию (Ctrl+T), но с настройками: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 4.


К слою применяем следующие настройки параметры - Blending Options (Параметры наложения): ↓


Inner Shadow (Внутренняя тень): ↓

Рисуем пламенную веб-навигацию используя Фотошоп


Gradient Overlay (Наложение градиента): ↓

Рисуем пламенную веб-навигацию используя Фотошоп

Stroke (Обводка): ↓

Рисуем пламенную веб-навигацию используя Фотошоп

Текущий результат: ↓

Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 5.


Теперь делаем дубль слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")). Жмём Ctrl+T. Кликните правой кнопкой мышки по изображению и выберите Flip Horizontal (Отразить по горизонтали), и расположите так, как показано на рисунке: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 6.


Дублируем оба слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")). Уменьшаем и объединяем их. Примените стили слоя, используемые ранее (можете выставлять свои значения): ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 7.


Создайте несколько таких дублей и расставьте их так, чтобы получился похожий результат (меняя по своему усмотрению стили слоя).


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 8.


На новом слое создайте два круга любого цвета (Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U")), примените к ним настройки Inner Shadow (Внутренняя тень). Затем создайте новый слой и сделайте ещё два круга с Inner Shadow (Внутренняя тень), но уже меньшего размера: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 9.


Создайте подобную форму: (она понадобится для ссылок или может использоваться как кнопка) ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 10.


Объединяем все слои Ctrl+Shift+E (кроме фона). Далее идём в Filter > Artistic > Plastic Wrap (Фильтр > Имитация > Целлофановая упаковка), выставляем настройки: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 11.


Делаем дубль слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")). Переходим на слой с оригиналом, жмём Ctrl+T. Кликните правой кнопкой мышки по изображению и выберите Flip Vertical (отразить по вертикали). Дублируйте оба слоя, к обоим дублям примените Rotate it 90° (повернуть на 90 градусов). После преобразований расставьте слои так, чтобы было похожее изображение ниже: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Объедините все слои (кроме фона), получившийся слой назовите «голова».


Шаг 12.


С помощью Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") сделайте подобную форму. Примените стили из шага 4.


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 13.


Несколько раз дублируёте слой и расставляйте дубли по местам, уменьшая их: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 14.


Дублируйте 4 пары Ваших форм, созданных инструментом Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P"). Уменьшите их и расставьте как на рисунке. Расставленные на прямой линии слои объедините, и назовите «прямые»: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Дублируем слой «прямые» несколько раз (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")), уменьшаем, вставляем: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 15.


Делаем копию слоя «голова» и меняем Layer Mode (Режим слоя) на Linear Burn (Линейный затемнитель): ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 16.


Объедините копию и оригинал слоя «голова». Теперь размножим получившийся слой и расставим копии по своим местам, предварительно уменьшив их: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 17.


Объединяем все слои Ctrl+Shift+E. Жмём Ctrl+U: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 18.


Копируем слой и меняем Layer Mode (Режим слоя) на Color Dodge (Осветление основы): ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Шаг 19.


Создайте несколько прямоугольников в виде кнопок Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ), применяя уже изученные эффекты: ↓


Рисуем пламенную веб-навигацию используя Фотошоп

Вот и всё.


Рисуем пламенную веб-навигацию используя Фотошоп

Урок подготовлен для Вас командой сайта PhotoshopPro.ru