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

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

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

В данном уроке Фотошопа мы рассмотрим процесс создания эффектного дизайна в виде графики.


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

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

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


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


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

Меняем параметры слоя (кликните два раза левой кнопкой мыши по нужному слою на панели) (добавляем стили слоя).


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


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

Изменим параметры градиента (кликните в том же разделе по длинной цветной полосочке и откроется окно с настройками): ↓


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

Нажимаем везде окей и растягиваем градиент.

2. Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")). Выбираем → Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P") чтобы нарисовать несколько лучей.

Теперь настроим параметры слоя с лучами (опять добавляем стили слоя): ↓

Blending Options (Параметры наложения) > Color Overlay (Наложение цвета): ↓


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

3. Слейте в один все слои, составляющие лучи (если у вас их несколько) (выделяем слои нажимаем правой кнопкой мыши → объединить слои), перетащите слой над фоном и слое с лучами измените параметры: ↓

- Режим смешивания установите на Pin Light (Точечный свет).

- Установити Opacity (непрозрачность) на 64%.


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

4. Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и поместите его на самый верх. Выбирите Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") для изображения скругленного окошка, который нужно покрасить в цвет под номером E3E3E3 (Paint Bucket Tool Инструмент - Заливка (Инструмент Заливка / Клавиша "G")).

Изменем параметры данного слоя: ↓

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


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

Жмем ок и получаем: ↓


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

5. Создайте новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")) и поместите над слоем с прямоугольником. Выбирите стандартную кисть Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") и белым цветом сделайте то, что изображено на рисунке: (ваша линия должна выглядеть размыто) ↓


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

6. Зажимаем ALT и кликаем мышкой точно между слоями с нарисованной размытой линией и прямоугольником. Должно получиться вот это: ↓


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

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

Изменим параметры слоя: ↓

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


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

Нажимаем окей и получаем это: ↓


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

8. Создаем новый слой и выбираем Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B"). Настраиваем кисть как изображено на картинке: ↓


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

Теперь главное не запутайтесь: ↓

После того как создали кисть вызываем инструмент Eyedropper Tool Инструмент - Пипетка (Пипетка / Клавиша "I"). Кликаем пипеткой возле тех мест (на бэкграунде), около которых хотим сделать типо каррозию. Мы это делаем чтобы опредилить цвет недавно созданной кисти.

Теперь переключаемся обратно на кисть и рисуем как бы выгрызанные ямки (смотреть рисунок): ↓


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

9. Новый слой. Выбираем Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U") и зажав SHIFT рисуем своего рода не большой календарик в нижнем левом углу вот так: ↓


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

А так сейчас выглядит общая картина: ↓


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

10. Новый слой. Выбираем Rectangle Tool Инструмент - Прямоугольник (Инструмент "Прямоугольник" / Клавиша "U" ) и рисуем на календаре в любом месте индикатор текущего дня цветом под номером F2F2F2.

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

Настраиваем параметры слоя с меню, все настройки ниже: ↓


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


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

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


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

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


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

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


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

Blending Options (Параметры наложения) > Drop Shadow (Тень) (настройте падающию тень по своему усматрению).


Нажимаем окей и получаем вот это: ↓


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

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


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

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

Что бы кнопка получилась как на рисунке изменим параметры слоя с кнопкой: ↓


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


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

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


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

13. Сделаем копии слоя с кнопкой и расположим как указано ниже: ↓


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

14. Сделаем простенькие разделители между кнопками с помощью инструмента → Horizontal Type Tool Инструмент - Горизонтальный текст (Инструмент "Горизонтальный текст" / Клавиша "T").


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

Получается вот что: ↓


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

Общая картина такова: ↓


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

15. Теперь сделаем названия для кнопок с помощью того же инструмента: ↓


16. Создаем новый слой. Напишим название сайта: ↓


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

Изменим параметры слоя: ↓


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

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

17. Заполним наш календарь.


Эта картинка для настройки заполняемых цифр: ↓


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

А эта для заполняемых названий дней недели: ↓


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

18. Назовем наш календарь и будем использовать буквы с такими настройками: ↓


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

Получили это: ↓

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

19. Разместим несколько кнопок в верхнем правом углу сайта и используем шрифт с такими настройками: ↓


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

Результат: ↓

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

20. Разделим наши верхние кнопочки с помощью инстумента Line Tool Инструмент - Линия (Инструмент Линия / Клавиша "U"), а цвет возьмем DA6900.

21. Заполните оставшиееся промежутки для тектста какими нибудь словами используя для каждого пустого блока свой вкус.


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

22. Создайте новый слой и используя Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") сделайте выделение. Мы будем делать как бы изгиб между двумя блоками. И с помощью кисти (её настройки видны на рисунке ниже) нарисуйте белый полупрозрачный след.

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

Объедините два слоя и с помощью Burn Tool Инструмент - Затемнитель (Инструмент Затемнитель / Клавиша "O") сделайте границе между двумя зеркальными отражениями.


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

23. Сделайте те же операции только по горизонтали: ↓


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

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

24. Выбирите на новом слое Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") белого цвета и сделайте несколько полупрозрачных мазков на оранжевом бэкграунде (см. рисунок). И располагаем этот слой под слоем с именем сайта.


Вот и все.


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

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

Финальный результат в большом размере.


Оригинал;

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