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

Рисуем стильный современный макет используя Фотошоп

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

В данном уроке Фотошопа мы рассмотрим, как можно нарисовать стильный современный макет.


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

Рисуем стильный современный макет используя Фотошоп

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


Откройте фотошоп, создайте новый документ размерами 800x700px и 72 dpi (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")).

Установите главный цвет - #131313 (foreground Основной цвет в Фотошопе (Основной цвет)), возьмите Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G") и залейте весь документ.


Рисуем стильный современный макет используя Фотошоп

Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), возьмите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U"), попробуйте создать элемент для заголовка сайта, сделайте овальное выделение и залейте его белым цветом.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Outer Glow (Внешнее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Применяя предыдущий инструмент, пробуйте сделать следующий слой, принадлежащий к заголовку сайта. Изменение формы делаем с Convert Point Tool Инструмент - Угол / Подменю инструмента Перо (Инструмент Угол / Подменю инструмента Перо).


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Inner Glow (Внутреннее свечение) цвет #143453.


Inner Glow (Внутреннее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Сделайте копию нового сделанного слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")) и выберите Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) и изменинте его так чтобы было похоже на это: ↓


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Создайте новый документ, размерами 20x20px и 72 dpi, инструментом Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) создайте три прямоугольника и с помощью Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) поверните их под углом, чтобы создать паттерн белого цвета..


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Сохраните узор (Edit > Define Pattern (Редактирование > Определить узор)): ↓


Рисуем стильный современный макет используя Фотошоп

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


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Pattern Overlay (Перекрытие узора): ↓


Pattern Overlay (Перекрытие узора): ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

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


Рисуем стильный современный макет используя Фотошоп

Возьмите Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"), представьте форму заголовка сайта, на которой будут его кнопки, покрасьте её в #010101.


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Outer Glow (Внешнее свечение): ↓


Outer Glow (Внешнее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Сделайте копию нового сделанного слоя и выберите Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) чтобы сделать её меньше немного и изменить у этой копии параметры: ↓


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Возьмите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") и пробуйте нарисовать вспышку на правой стороне всех кнопок, расположенных на заголовке сайта.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя ↓:


Fill (Заливка) 0%.


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Зажмите клафишу Alt, нажмите мышью между слоем вспышки и кнопочной группой, после этого вспышка будет применена в пределах заголовка с кнопками.


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Сделайте копию нового сделанного слоя и переместите копию в лево (Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V")), как показано на рисунке: ↓


Рисуем стильный современный макет используя Фотошоп

Выберите Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ), чтобы создать и покрасить самую низкую часть фона сайта, этим цветом #1A1A1A.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Outer Glow (Внешнее свечение): ↓


Outer Glow (Внешнее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Bevel and Emboss (Тиснение и рельеф): ↓


Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Возьмите Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") чтобы создать слой где будет одна из секций сайта.


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

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


Рисуем стильный современный макет используя Фотошоп

↓ Параметры слоя:


Fill (Заливка) 0%.


Blending Options (Параметры наложения) > Stroke (Обводка): ↓


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

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Потом нам придется выбрать два инструмента и создать один элемент, который будет на магистрале сайта. Выберите Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) и создайте первоначальный слой, а затем щелкните по кнопке Alt, в тоже вермя возьмите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") и выделите 2 раза (как показано на рисунке), чтобы вырезать ненужные элементы.


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Теперь создайте другой элемент магистрали, который должнен быть размещен сверху и посередине. Сделать его мы должны с помощью Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ).


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Используйте Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U"), пробуйте сделать две вертикальных линии вдоль краев недавно созданной полосы, покрасьте их в #8D8D8D.


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Возьмите Pencil Tool Инструмент - Карандаш (Инструмент Карандаш / Клавиша "B") чтобы подвести двойную вертикальную черту на форме, где будут кнопки, смотрим скрин: ↓


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending mode (Режим наложения) - Soft light (Мягкий свет).


Рисуем стильный современный макет используя Фотошоп

Сделайте дубликат слоя (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")) и поставьте его справа (Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V")), паралельно этому.


Рисуем стильный современный макет используя Фотошоп

Возьмите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") и создайте слой для логотипа сайта.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Outer Glow (Внешнее свечение): ↓


Outer Glow (Внешнее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Используя предыдущий инструмент, создайте следующий слой, также для логотипа.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя: ↓


Fill (Заливка) 0%.


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Возьмите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U"), создайте ещё один слой поменьше, опять же для логотипа. Красим в #0A0F12.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя: ↓


Blending Options (Параметры наложения) > Stroke (Обводка): ↓


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

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Выберите в последний раз Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U"), чтобы нарисовать вспышку на логотипе.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя: ↓


Fill (Заливка) 0%.


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Зажмите кнопку Alt и нажмите мышью между слоями, после этого вспышка будет применена в пределах слоя с логотипом.


Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Выберите Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U"), чтобы создать слой, для дополнения логотипа.


Рисуем стильный современный макет используя Фотошоп

Параметры слоя: ↓


Fill (Заливка) 0%.


Blending Options (Параметры наложения) > Outer Glow (Внешнее свечение): ↓


Outer Glow (Внешнее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Inner Glow (Внутреннее свечение): ↓


Inner Glow (Внутреннее свечение): ↓

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Stroke (Обводка): ↓


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

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Следующий шаг включает создание специальной секции, расположенной с левой стороны сайта.


Берём Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) для этой операции.


Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Параметры слоя: ↓


Fill (Заливка) 0%.


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

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


Рисуем стильный современный макет используя Фотошоп

Используя три линии, созданные из черточек, вызовите панель настройки шрифтов и установите такие параметры как на скрине.. ↓


(Самая низкая линия)

Рисуем стильный современный макет используя Фотошоп

(Высшие линии).

Рисуем стильный современный макет используя Фотошоп

Blending Options (Параметры наложения) > Drop Shadow (Тень): ↓


Drop Shadow (Тень): ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

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


Рисуем стильный современный макет используя Фотошоп

Идем дальше...


Введите после этого названия кнопок для на загаловке сайта → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T").


Параметры текста: ↓

Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Напишите также заглавие логотипа сайта, как на скрине.


Параметры текста: ↓

Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Параметры слоя: ↓


Blending Options (Параметры наложения) > Gradient Overlay (Наложение градиента): ↓


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

Рисуем стильный современный макет используя Фотошоп

Параметры градиента: ↓

Рисуем стильный современный макет используя Фотошоп

Получили: ↓

Рисуем стильный современный макет используя Фотошоп

Назовите секции сайта, смотрим скриншёты.


(about me)

Рисуем стильный современный макет используя Фотошоп

(portfolio)

Рисуем стильный современный макет используя Фотошоп

Вставьте текст в названную секцию “about me”, смотрите скриншёт: ↓


Рисуем стильный современный макет используя Фотошоп

(orange text)

Рисуем стильный современный макет используя Фотошоп

(the rest of the text)

Рисуем стильный современный макет используя Фотошоп

Вставьте скриншёты наших проектов в следующую секцию “portfolio”.


Параметры слоев (смотрим скриншёты ниже) - Blending Options (Параметры наложения): ↓


Blending Options (Параметры наложения) > Stroke (Обводка): ↓


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

Рисуем стильный современный макет используя Фотошоп

Рисуем стильный современный макет используя Фотошоп

Последняя стадия включает добавление авторского права сайта.


Параметры текста: ↓

Рисуем стильный современный макет используя Фотошоп

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

Рисуем стильный современный макет используя Фотошоп

Вот и все.


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