Реклама

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

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

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

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


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

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

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


Шаг 1: Настройка нового документа.


Создайте новый документ - File > New (Файл > Новый / Сочетание клавиш "Ctrl+N").


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

Шаг 2: Создание верхней части мусорного ящика.


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


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


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

Переходим в Edit > Transform > Skew (Редактирование > Трансформация > Наклон). Перетащите верхний левый и правый верхний угол внутрь.


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

Дважды щелкните на слой в панели слоев, чтобы открыть стили слоя (Blending Options (Параметры наложения)). задайте параметры Drop Shadow (Тень) - белый цвет тени (#ffffff).


Drop Shadow (Тень): ↓

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

Теперь задайте параметры Gradient Overlay (Наложение градиента). Создадим переход от светло-синего (#89bef9) к светло голубому (#99d9fa), поставьте галочку возле Reverse (Инверсия).


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

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

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

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

Шаг 3: Создаем отражения света.


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


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

Выберите Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), выбираем градиент от белого к прозрачному и устанавливаем стиль градиента Reflected Gradient (Зеркальный градиент).


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

Примените градиент, начиная от центра к правому или левому краю вашего прямоугольного выделения.


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

Для слоя "top-shine" измените режим смешивания на "Overlay" (Перекрытие) и и установите Opacity (Непрозрачность) 23%.


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

Шаг 4: Создание иллюзии глубины.


Создаем новый слой (New Layer (Новый слой / Сочетание клавиш "Ctrl+Shift+N")), назовем его "top-depth" над слоем "top", создаем фигуру с помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и идем → Edit > Transform > Skew (Редактирование > Трансформация > Наклон), делаем как делали раньше.


Совет: В качестве альтернативы, вы можете продублировать слой "top" , и отредактировать его используя Edit > Transform > Scale (Редактирование > Трансформирование > Маштабирование).


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

Откройте стиль слоя (Blending Options (Параметры наложения)) и задайте Drop Shadow (Тень) и Gradient Overlay (Наложение градиента) с параметрами указанными ниже.


Drop Shadow (Тень).

Цвет теней должен быть белым (#ffffff).


Drop Shadow (Тень): ↓

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

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

Создадим переход градиента от светло-синего (#61a0dc), к темно-синему (#4b84be), не забудьте поставить галочку возле Reverse (Инверсия).


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

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

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


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

Шаг 5: Организуйте ваше слои.


Автор урока советует создавать отдельные группы слоев. Это намного упрощает их поиск. Нажмите на иконку создать новую группу слоев (это выглядит как папка) в нижней части панели слоев.


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

Назовите группу "top".


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

Перетащите в эту группу каждый созданный до этого слой - за исключением фонового слоя. Сверните эту группу, нажав на маленький значок треугольника слева от папки. Теперь стало намного компактней в панели "Слоев".


Шаг 6: Создание нижней части мусорного ящика..


Теперь, в панели "Слои", создайте новый слой над слоем Background (Фон), назовите его "front".


С помощью Rounded Rectangle Tool Инструмент - Прямоугольник со скругленными углами (Инструмент "Прямоугольник со скругленными углами" / Клавиша "U") и Edit > Transform > Skew (Редактирование > Трансформация > Наклон), как и в предыдущих шагах мы использовали для верхней части мусорный ящик, но на этот раз, нам нужно сделать такую форму как на нижней картинке.


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

Шаг 7: Зададим слою "front" нужный цвет..


Откроем стиль слоя (Blending Options (Параметры наложения)), если забыли как это делать сделайте двойной клик по слою "front", потом перед вами откроется окно выберете Gradient Overlay (Наложение градиента). Создаем градиент с переходом от светло синего - #6dc2f8 к темно синему - #29619f. Не забывайте ставить галочку возле Reverse (Инверсия).


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

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

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

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

Шаг 8: Создадим тень с правой стороны края мусорного ящика..


Создаем новую форму справой стороны значка, как на картинке. Назовем этот слой "side-shade".


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

Зададим цвет тени с помощью Color Overlay (Наложение цвета) в стилях слоя, с использованием темного синего цвета - #1f456f.


Color Overlay (Наложение цвета): ↓

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

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

Теперь создадим маску слоя, чтобы тень сделать более реалистичной. Выбираем слой "side-shade", зададим ему маску слоя, нажав на значок "Добавить маску слоя" в нижней части панели.


Если все сделано правильно, вы увидите, что "side-shade" слой будет выглядеть как показано на следующем рисунке.


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

Теперь возьмите Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G") и установите его параметры так, что бы градиент был от белого до черного, стиль градиента ставим - Linear Gradient (Линейный градиент). Примените градиент как показано ниже (обозначен красной стрелкой).


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

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

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

Теперь нужно снизить непрозрачность слоя до 29%, для большей реалистичности.


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

Шаг 9: Создаем тень левому краю мусорного ящика..


Здесь немного проще. делаем копию слоя "side-shade", нажав Ctrl+J, или выбрав Layer > Duplicate Layer (Слой > Дублировать Слой / Сочетание клавиш "Ctrl+J") в главном меню.


Теперь нужно этот слой отразить по горизонтали, это делаем с помощью - Edit > Transform > Flip Horizontal (Редактирование > Трансформация > Отразить по горизонтали).


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

Теперь перетащите дублированный слой с помощью Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V").


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

Шаг 10: Создаем Свет Отражения..


Зададим нашем значку радиальное отражения света, чтобы его поверхность стала еще более интересной. Создайте новый слой (можно назвать его "front-light"). Выбираем с палитры инструментов Elliptical Marquee Tools Инструмент - Овальная область выделения (Инструмент "Овальная область выделения" / Клавиша "M") делаем выделение круга и заполнением его белым цветом.


Расположение круга должно быть так как на картинке ниже.


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

Теперь нужно смягчить края круга, используя - Gaussian Blur (Размытие по Гауссу), выбираем - Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) в настройках задаем значение радиус около 18,6 px.


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

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

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

Теперь нужна удалить отражение света на вершине, выбрав инструмент Rectangular Marquee Tool Инструмент - Прямоугольная область выделения (Прямоугольная область выделения / Клавиша "M") с прямоугольным выделением и нажав (Delete), чтобы удалить выделенную область.


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

Для реалистичного отражения нужно сменить наложения слоя с Normal (Нормальный) на Overlay (Перекрытие) и снизить непрозрачность до 67%.


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

Шаг 11: Добавим символ переработки..


Выберите Custom Shape Tool Инструмент - Произвольная фигура (Инструмент "Произвольная фигура" / Клавиша "U") на Панели инструментов. Ищем символ "Recycle 2" (которая находится в "Symbol" набор custom shapes (произвольные фигуры)).


Делаем произвольной форму по вашем усмотрению в центре нашего мусорного ящика.


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

Шаг 12: Стиль символа переработки..


Нам нужно сделать так чтобы символ был выдавлен из стенки ящика. Для этого будем использовать стили слоя.


Drop Shadow (Тень).

Установим цвет тени синий (#3c6a99).


Drop Shadow (Тень): ↓

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

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

Внутренний цвет тени должен бить белым (#FFFFFF).


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

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

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

Задайте градиент цвета наложения от голубого (#bee4f9) к белому (#FFFFFF).


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

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

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

Эти стили слоя дают некоторую гармонию символу с остальной частью дизайна наших иконки.


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

Прежде чем двигаться дальше, давайте организуем нашу работу в составе созданных слоев "front" в слой группы. Эго также назовем "front". "front" группа слоев должна быть между слоем "Background" (Фон) и слоя "top" группы.


Шаг 13: Создаем смятую бумагу..


Теперь мы создадим мятый клочок бумаги, который бросили в наш мусорный ящик. Над группою слоев "top", создайте новый слой (назовем этот слой как "paper").


Для создания бумаги будем использовать инструменты Polygonal Lasso Tool Инструмент - Многоугольное лассо (Инструмент Многоугольное лассо / Клавиша "L") и Pen Tool Инструмент - Перо (Инструмент Перо / Клавиша "P"). Будем создавать случайную форму мятого клочка бумаги.


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

Шаг 14: Создаем реалистичность складчатой формы бумаги:.


Открываем стиль слоя и задаем такие параметры: ↓


Drop Shadow (Тень).

Цвет тени зададим черный цвета (#000000) и его прозрачность снижаем до 10%.


Drop Shadow (Тень): ↓

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

Stroke (Обводка).

Здесь также задаем цвет черный (#000000).


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

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

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

Шаг 15: Создаем складки бумаги..


Чтобы добавить складки на бумагу, создайте новый слой (назовите его "paper-shade1") и нарисуйте черные фигуры вдоль некоторых из его краев.


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

Снижаем непрозрачность слоя "paper-shade1" примерно до 14%. Это должно привести к созданию бумаге некоторые скрытые глубины и определения.


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

Чтобы добавить складки, просто создайте новый слой (назовем это один "paper-shade2") и нарисуйте более черные фигуры.


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

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


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

Шаг 16: Создаем больше листов бумаги..


Сначала сделаем новую группу слоев для наших скомканых бумажек. Называем эту группу "paper". Перетащите все слои, связанные с бумагой те которые только что сделали в новою группу слоев.


Далее продублируйте этот слой группы (Layer > Duplicate Group (Слой > Дубликат группы)) что бы сделать еще один лист бумаги.


Переместите новый клочок бумаги от первого с помощью Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V").


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

Сделайте еще бумажку используя ту же технику.


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

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


Мы изменим угол средней бумажки на 45°. Выберите слой средней бумажки из группы слоев в панели "Слои", выбрать (Edit > Transform > Rotate (Редактирование > Трансформирование > Поворот)), а в панели параметров установите опцию поворот на 45°.


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

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


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

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


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

Шаг 17: Сделаем наш мусорный ящик полупрозрачным..


Давайте сделаем нашу корзину так, будто мы можем увидеть внутри нее немного мусора.

Начните с выбора всех "paper" групп слоев - кроме бумажек, которые лежат на полу.


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

И еще сделаем слияние дублированных слоев щелкнув правой кнопкой мыши на панели cлои и выбрать "Merge Layers" (Объединить слои).


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

Продолжайте дублировать так чтобы в итоге получить результат похожий на тот, что на изображении ниже.


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

Слейте эти слои (выберите их в панели слоев и нажмите Ctrl+E) и назовите объединенный слой - "translucent-property".


Добавьте маску слоя на слой "translucent-property", затем с помощью Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), черно-белым градиентом создайте маску.


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

Должно получиться как на картинке ниже: ↓


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

Шаг 18: Добавим тени на куски бумаги..


Мы должны добавить некоторые дополнительные тени от листов бумаги. Создайте новый слой, назовем его - "extra-shadow", и на этом новом слое, нарисуйте черные фигуры по краям бумаги.


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

Установите непрозрачность слоя на 10%, чтобы смягчить тени.


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

Шаг 19: Создаем тень под корзиной..


Давайте создадим тень на полу под мусорным ящиком. Создайте новый слой (назовите его "main-shadow") чуть выше слоя Background (Фон).


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


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

Используем фильтр - Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу), чтобы смягчить края, радиус 18-19 px.


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

С помощью команды Free Transform (Свободная трансформация / Ctrl+T), измените эту форму так, что бы результат был похож на изображение ниже.


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

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


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

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

Шаг 20: Создаем тень для бумажки на полу..


Мы должны добавить тень под мятые листики бумаги, которые находятся на полу так, чтобы освещение нашей иконки являлось точным и последовательным. Во-первых, создайте новый слой (назовите его "paper-shadow") выше слоя тени корзины (который мы назвали "main-shadow").


С помощью Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") с мягкими черным кончиком кисти и Master Diameter (Диаметр кисти), что составляет около 65 px.


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

Сделайте один клик на холсте, так как на картинке ниже.


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

Используйте Free Transform (Свободная трансформация / Ctrl+T) для сжатия мазка кисти, чтобы он выглядел как тень от бумажки на полу. Разместите его в нижней части смятых листов бумаги с помощью инструмента Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V").


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

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

Сделайте копию слоя "paper-shadow" и измените масштаб с помощью Free Transform (Свободная трансформация / Ctrl+T). Сместите его под другие бумаги с помощью инструмента Move Tool Инструмент - Перемещение (Перемещение / Клавиша "V"). Наличие двух слоев тени дает глубину наших кусочков бумаги как можно более точным.


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

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

Шаг 21: Добавим отражение света окна..


Давайте добавим к нашей работе некоторые тонкие детали. Мы приходим к окончательному шагу - дизайну нашей иконке.


Теперь мы сделаем отражение света в верхнем левом углу. Создайте новый слой под названием "reflection". Используйте Polygonal Lasso Tool Инструмент - Многоугольное лассо (Инструмент Многоугольное лассо / Клавиша "L") для того чтобы сделать неравномерное выделение. Заметим, что новый слой, должен быть на самом верху всех слоев.


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

Далее используя Gradient Tool Инструмент - Градиент (Инструмент Градиент / Клавиша "G"), применим градиент от белого к прозрачному.


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

Предположим, что источник света падает с окна. Сделайте выделение, которое выглядит как крест (с помощью Polygonal Lasso Tool Инструмент - Многоугольное лассо (Инструмент Многоугольное лассо / Клавиша "L")).


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

Затем, просто нажмите кнопку Delete, чтобы удалить части отражения света.


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

Изменить режим наложения слоя "reflection" на Overlay (Перекрытие), а также еще нужно уменьшить непрозрачность до 35%.


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

Шаг 22: Добавим еще складки на куски бумаги..


Добавим нашим бумажкам некоторые штрихи. Создайте новый слой (назовем этот слой "crumples"). На новом слое, нарисуйте черные фигуры по краям, как показано ниже.


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

Сократите непрозрачность этого слоя примерно до 10%. Это дает нашим бумажкам некоторые тонкие определения.


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

Шаг 23: Добавить отражения света на краю корзины..


Для завершения нашей работы, мы добавим отражение света на верхней границе корзины. Этот процесс даст нашей поверхности еще более интересный элемент дизайна, а также привлечь взгляд зрителей к середине иконки. Создайте новый слой (мы можем назвать этот слой "add-shine"). С помощью инструмента Brush Tool Инструмент - Кисть (Инструмент Кисть / Клавиша "B") с белой, мягкой кистью размером около 45 px. Нажмите один раз в центре (в направлении сверху). С помощью Free Transform (Свободное трансформирование / Сочетание клавиш "Ctrl + T" / Вызов через меню: "Edit > Free Transform" (Редактирование > Свободная трансформация)) изменяем форму блика как на картинке ниже.


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

Установите непрозрачность этого слоя на 60%.


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

Вот и все.


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

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

Оригинал;

Перевод: NeSK;

Текст доработан командой сайта PhotoshopPro.ru