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

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

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

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


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

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

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


Создаем новый документ 760 на 770 пикселей с белым цветом фона (File > New (Файл > Новый / Сочетание клавиш "Ctrl+N")). Берем инструмент Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") с радиусом закругления 15 пикслей и рисуем фигуру: ↓


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

Edit > Transform > Warp (Правка > Трансформация > Деформация). ↓


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

Выбираем Arch (Арка) и жмем Enter на клавиатуре ↑. Результат: ↓


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

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


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

Дублируем слой (Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J")), далее используем → Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали). Помещаем копию так, как на рисунке: ↓


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

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


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

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

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

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

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

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

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

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

Результат: ↓

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

Берем инструмент Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) и рисуем прямоугольник: ↓


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

К черному прямоугольнику применяем стили слоя (Blending Options (Параметры наложения)): ↓


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

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

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

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

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

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

Результат: ↓

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

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

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

Выделив обе копии жмем Ctrl+E (склеиваем слои): ↓


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

Edit > Transform > Flip Vertically (Правка > Трансформация > Отразить по вертикали) и помещаем так как на рисунке: ↓


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

Нажимаем на → Добавить маску слоя (Add layer mask).


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

Берем инструмент Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") с такими настройками: ↓


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

Проводим такую линию: ↓


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

Можно удалить некоторые части зеркала инструментом Eraser Tool Инструмет - Ластик (Инструмет Ластик / Клавиша "E").


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

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


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

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


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

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

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

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

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

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

Добавляем детали: ↓


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

Пишем текст (Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T")) и мелкие детали: ↓


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

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


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

Для них добавляем такие стили слоя (Blending Options (Параметры наложения)): ↓


General Blending (Основные параметры): ↓

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

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

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

Результат: ↓

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

Слева можно добавить навигационное меню: ↓


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

Чтобы нарисовать облака вам понадобится комплект кистей с облаками который можно скачать тут. Рисуем облака на новом слое (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")).


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

Справа можно нарисовать ценовую бирку, используем для этого инструмент Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P").


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


Drop Shadow (Тень): ↓

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

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

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

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

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

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

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

Результат: ↓


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

Инструментом Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) рисуем прямоугольник: ↓


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

Инструментом Ellipse Tool Инструмент - Овальная форма (Инструмент Овальная форма / Клавиша "U") рисуем два круга: ↓


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

Теперь рисуем маленький черный кружок на красной фигуре: ↓


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

Рисуем нить инструментом Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B"): ↓


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

Пишем текст → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T"): ↓


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

Нарисуем еще одну кнопку инструментом Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U"): ↓


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

Нам понадобится еще один блок кистей - Tech Brushes. На новом слое рисуем нечто похожее на это: ↓


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

Наконец добавляем логотип. Вот и все.


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

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

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