Adobe Photoshop CS6 дополнен разнообразными 3D-эффектами и элементами  управления, включая отражения и тени, которые можно перемещать в пределах картинки. В этом уроке мы расскажем, как использовать эти возможности для создания осеннего эффекта 3D-текста. Давайте начнем!

Конечный результат:

Детали урока:

• Софт: Adobe Photoshop CS6 Extended
• Сложность: Intermediate
• Время: 2 часа

Изображения для выполнения урока:

• Autumn park
• English Alphabet
• Concrete texture (Image 1)
• Crackles texture
• Autumn bush
• Yellow maple leaf
• Yellow maple leaf 2
• Red maple leaf

Шаг 1

Создаем новый документ (File> New) со следующими настройками:

Шаг 2

Загружаем изображение Autumn park и помещаем его на нашем холсте. Фотография, которая используется в уроке, имеет тот же размер, что сам холст, поэтому она будет полностью покрывать его.  Если вы хотите использовать собственное изображение для фона, нужно изменить его размер в соответствии с размером холста. Таким образом, поместите его в холст и перетащите одну из угловы точек. Удерживайте Shift, чтобы изменять размер изображения пропорционально. Выберите «Background» слой, слой с вашей фотографией и объедините их (Command / Ctrl + E).

Шаг 3

Итак, давайте начнем создание 3D букв. Загрузите изображение с английским алфавитом и откройте его в Photoshop. Теперь вы должны решить, какое слово вы будете составлять из букв, и какие цвета будете использовать для них. В уроке — «Лист». Возьмите Lasso Tool (L) и выберите первую букву выбранного слова, скопируйте (Command / Ctrl + C) и вставьте ее (Command / Ctrl + V) в свой ​​холст. 

Назовите слой с буквой в соответствии самой букве, например,  "Letter L". Теперь нужно удалить белый фон. Возьмите Magic Wand Tool (W), выберите слой с буквой и нажмите на белом фоне. Нажмите кнопку Удалить. Обратите внимание, что параметр «Sample All Layers»  не должен быть активным.

Выберите слой буквой и активируйте инструмент Transform (Command / Ctrl + T). Удерживая клавишу Shift перетащите один из угловых маркеров, чтобы уменьшить размер буквы. Если хотите изменить цвет вашего письма, можно использовать Adjustment Layers (например, Color Balance или Selective color). Это будет более подробно описано в шаге 15.

Шаг 4

Для создания 3D-текста выберите слой с буквой и перейдите к 3D> New 3D Extrusion для выбранного слоя. Photoshop спросит о переключении в 3D рабочее пространство — нажмите кнопку ОК. Таким образом, перед вами находится 3D рабочее пространство Photoshop CS6. Сначала мы должны определить положение плоскости земли, на которой будет расположен текст. Чтобы сделать это, в 3D-панели выбираем Scene и регулируем положение Ground Plane с помощью значков на панели Options.

Нужно расположить Ground Plane так, что она совпадает с горизонтальной поверхностью, где будут размещены буквы. Если фоновое изображение отличается от данного, вы должны самостоятельно выбрать правильное положение Ground Plane.

Шаг 5

Теперь нам нужно сделать текстуру для текста. Скачиваем текстуру бетона и откройте ее в Photoshop. Мы будем использовать ее для  видимых частей букв. Обрезаем изображение таким образом, чтобы его размер был 500×500 px. В данном случае была выбрана следующая область. После того, как область была выбрана, нажимаем клавишу Enter и сохраняем текстуру под именем "texture_front".

Шаг 6

Теперь пришло время, чтобы применить рельеф текстуры в тексте. На панели 3D выберите “Front Inflation Material”  и перейдите к панели 3D-объектов  Properties. Эта панель будет открываться автоматически при переключении в 3D-пространство. В панели Properties находим свойство Bump настройки и выбираем “Load texture”. В открывшемся окне выбираем текстуру, которая была подготовлена в предыдущем шаге  («texture_front.jpg»):

Настроек Bump позволяют установить желаемую степень рельефа, для этого нужно использовать ползунок. Ставим на 20%. Теперь нужно изменить масштаб и расположение текстуры. Для этого нажмите на значок папки рядом с Bump и выберите пункт “Edit UV Properties”.

Вертикальная и горизонтальная шкала (V Scale и  U Scaleсоответственно) являются основными параметрами, которые необходимо отрегулировать. Параметры U Offset и V Offset отвечают за перемещение текстур. Вы можете настроить их по своему собственному вкусу.

Шаг 7

Далее нам нужно добавить текстуру на экструдированную часть буквы. Чтобы сделать это, перейдите к панели 3D  и выберите"Extrusion Material" и загрузить ту же текстуру («texture_front.jpg»). 

Увеличиваем значение Bump до 25% . Точно так же, как мы делали в предыдущем шаге, редактируем свойства текстуры: нажимаем на значок папки рядом с Bump и в настройках выбираем пункт «Edit UV Properties». Как видите, цвет Extrusion был изменен на розовый. Это дает нам возможность видеть, как на текстуру влияет изменение параметров.

Шаг 8

Теперь пришло время работать над размещением буквы. Переходим в 3D-панель и выбираем letter  - Вы увидите, что в центре буквы появилось три оси.  Используя такие же инструменты, как и для перемещения Ground Plane, можно перемещать, вращать и изменять размеры буквы. 

При перемещении курсора по стороне куба, движение буквы будет осуществляться по одной плоскости ( она также будет выделена желтым цветом). Если вы хотите, чтобы буква была размещена на поверхности — перемещать ее по вертикально оси не нужно. Если все же она  была сдвинута вертикально, перейдите 3D > Snap Object - Ground Plane и в разделе Coordinates нужно установить необходимые координаты. Также, чтобы вернуть букву в исходное положение, можно установить угол поворота соответствующей оси на 0 градусов.

Теперь вы знаете, как изменить положение 3D-объектов. Таким образом разместите букву на Ground Plane, как вам больше нравится, и измените ее размер, если это необходимо. 

Шаг 9

В этом шаге мы будем будем корректировать величину выдавливания. С помощью Mesh Сетка раздел для регулировать толщину буквы. 

Значение Extrusion Depth поставим на 250, но, если хотите, можете использовать другое значение. Кроме того, параметры Catch Shadows и Cast Shadows должны быть включены. 

Шаг 10

В этом шаге мы настроим скосы. Перейдите к панели Properties panel > Mesh. Был выбран следующий вид Bevel, но можно попробовать, а затем поэкспериментировать с его настройками:

Далее мы переходим к Cap и выбираем Contour of the Bevel (Cove – Deep).

 Шаг 11

Теперь вы должны определить цвет выдавливания. Чтобы изменить свой цвет, выберите Extrusion Material в 3D панели и перейдите к панели Properties. Выбираем цвет #f25646.

Также можно поэкспериментировать с другими настройками, такими как Specular (она влияет на резкость / контрастность текстуры) и Illumination  (она влияет на яркость боковых краев). В данном случае были выбраны следующие значения: Specular color - # 645858, Illumination color- # 290816.

Шаг 12

Теперь пришло время для работы над источниками света. В 3D-панели выберите первый источник света (он у вас уже там есть) — Infinite Light 1. Мы создадим основной источник света. В этом случае основным источником света является Солнце, и он находится в правом верхнем углу.Если вы используете собственное фоновое изображение, нужно определить положение основного источника света самостоятельно (обратите внимание на тени на людях/ объектах). Щелкните левой кнопкой мыши на источнике и поверните его так, чтобы тень буквы находилась примерно в левом нижнем углу.

Параметры и координаты этого источника света приведены ниже (цвет # ffebcf). Поскольку это основной источник света, нужно запомнить (или записать) его координаты. Они будут одинаковы для всех букв, которые будут созданы позже.

Шаг 13

Давайте добавим еще один источник света, так чтобы буква была немного светлее. Для этого щелкните в нижней части панели 3D на Add new Light иNew Infinite Light. 

Был добавлен источник со следующими параметрами.

Шаг 14

Таким образом, первая буква практически завершена. На этом этапе мы будем корректировать цвета обводки. Если вам нравится черный цвет, можете пропустить этот шаг.

Мы будем редактировать текстуры, которые используются в двух местах на букве —  Front Inflation Material and Front Bevel Material. Итак, когда вы выбираетеEdit texture, Photoshop предупредит вас о том, что изменения будут применены ко всем местам. Нажмите кнопку ОК. New Adjustment Layer> Selective Color. Выберите черный канал и настройте цвет обводки. В этом примере был выбран красный.

После того как вы закончили работать с текстурой, сохраните ее (Command / Ctrl + S) и закройте этот файл. Вы увидите, что текстура была обновлена.

Шаг 15

Теперь таким же образом можно создать остальные буквы. Но если вы хотите изменить цвет буквы сразу, можно использовать Adjustment Layer  Selective Color и опцию Replace Color. Давайте сделаем это с буквой «E». Разместите следующую букву в рабочем документе и удалите ее фон, как было сделано в шаге 3. Называем слой «Letter E». Выберете слой «Letter E» и перейдите к Image > Adjustments > Replace Color. Возьмите Eyedropper пипетку со знаком «+» и расширьте зону замены цвета, нажав на оттенки светло-голубого цвета. А затем отрегулируйте ползунки, чтобы получить цвет, близкий к этому ( # fed4b6).

Далее создайте корректирующий слой Selective Color (Layer> New Adjustment Layer> Selective Color) и преобразуйте его в слой Clipping Mask для  "Letter E". Для этого на панели слоев щелкните правой кнопкой мыши на Selective Color  и выберите Create Clipping Mask. Этот слой будет влиять только на слой  "Letter E".

Теперь выбираем оранжевый цвета и объединяем слой буквы и Selective Color (выберите оба слоя на панели слоев и нажмите Command / Ctrl + E).

Шаг 16

Перейдите к шагу 4 и повторите все инструкции для создания 3D текста. Не забывайте о перспективе: если буква дальше от зрителя, размеры ее должны быть меньше. Слой с первой буквой должна быть на верхней части панели Layers, а все остальные слои под ней один за другим. Не забывайте, что настройки 3D, движение букв, цвет текстуры можно изменять, пока не получите желаемый результат.

Мы получили следующее:

Шаг 17

Теперь нужно растрировать 3D-слои. Но перед этим их нужно сохранить, если позже захотите что-то изменить. Для этого дублируем слои (выберите их на панели слоев и нажмите Command / Ctrl + J). Оригинальные слои объединяем в группу (Command / Ctrl + G), называем ее "3D"  и отключаем видимость. Дальше переходим к дублированным слоям и на каждом из слоем нажимаем правой кнопкой мsши, выбрав при этом Rasterize 3D.

Шаг 18

В этом шаге мы добавим больше контраста теням  на траве. Чтобы сделать это, создайте новый слой (Command / Ctrl + Shift + N), назовите его «Shadow» и поставьте его под все слои с буквами на панели слоев. Возьмите Brush Tool (B) со следующими настройками: Цвет Colo: # 1d280a, твердость Hardnes: 50%, режим смешивания Blending mode: Multiply, Opacity: 10-15%. Размер кисти зависит от вас.

Выбранной кистью затемняем участки, создавая этим больше тени.

Шаг 19

Теперь мы собираемся сделать, чтобы нижние части буквы выглядят, как будто они действительно стоят на траве. Для этого будем использовать стандартный набор кистей. Возьмите Brush Tool (B) и выберите жесткую (100% Hardness) круглую кисть, непрозрачность около 50%. Добавьте маски всем слоям букв (Layer> Layer Mask> Reveal All) и измените цвет переднего плана на черный. Нажмите на слоях с  масками и закрасьте нижнюю часть букв, чтобы скрыть их:

Если вы закрасили некоторые дополнительные области, просто измените цвет Foreground на белый и закрасьте те области, чтобы сделать их видимыми. 
В панели Brush Tool выбран, нажав клавишу F5, выберите кисти «Dune Grass». Параметры кисти следующие:

Выбранной кистью  на слоях с масками закрашиваем нижнюю часть букв. Выберите кисть небольшого размера — около 30 пикселей. Вы должны получить:

Шаг 20

Как вы видите, мы закрасили некоторые части тени от буквы. Это потому что они находятся на том же слое, что и сами буквы. Таким образом, вернемся к шагу 18. Выберите слой «Shadow» и закрасьте области, которые были скрыты под маской:

Если вы не полностью удовлетворены результатом, выберите кисть «Dry Brush Tip Light Flow» из стандартного набора кистей и закрасте нижнюю часть букв на Layer Mask.

Шаг 21

Далее нам нужно изменить части букв, так чтобы они не были такими гладкими. Чтобы сделать это, возьмите Brush Tool (B) и выберите один из следующих кисти (Opacity: 100%, размер кисти: около 50 px, основной цвет: черный):

В слоях масок закрашиваем задний край букв. Если вы хотите повернуть кисть, нажмите клавишу F5 и поставьте указатель на необходимый угол: 

Мы получили следующий результат:

Шаг 22

Теперь нам нужно применить фильтр Gaussian Blur к буквами, чтобы текстура была не столь резкой. Но прежде чем сделать это, лучше, чтобы все слои с буквами были преобразованы в смарт-объект — в этом случае у вас будет возможность изменить настройки фильтра после его применения. Щелкните правой кнопкой мыши на одном из слоев с буквами на панели слоев и выберите  Convert to Smart Object. Не беспокойтесь о маске слоя. Она не была удалена. Для редактирования дважды щелкните на текущий слое.

Шаг 23

Выберите слой с первой буквой L и перейдите к Filter> Blur> Gaussian Blur. Размытие зависит от размера вашего текста. В данном случае значение 0,4 px: 

Примените фильтр Gaussian Blur к другим буквам. Не забывайте о глубине поля: если буква дальше от зрителя, она должно быть более размытой. Если вы хотите изменить степень размытия, дважды щелкните на фильтре на панели слоев: 

Получаем:

Шаг 24

Загрузить изображение с трещинами (размер 1600×1200 пикселей) и поместить его в документ. Уменьшите размер текстуры, как показано на рисунке (при изменении размера не забывайте держать клавишу Shift): 

Активизируйте инструмент Transform (Command / Ctrl + T), щелкните правой кнопкой мыши на холсте и выберите Distort. Потяните за угловые маркеры так, чтобы текстура размещалась параллельно лицевой стороне буквы:

Растеризируйте слой с текстурой (щелкните правой кнопкой мыши по слою> Rasterize Layer). Назовите этот слой «Texture L.» Загрузите выделение слоя «Letter L copy» (Command / Ctrl плюс щелкните по иконке слоя на панели слоев), выберите слой «Texture L» и нажмите на иконку Add Layer Mask в нижней части панели Layers.

Измените режим наложения Blend mode  "Texture L"  на Soft Light, возьмите Brush Tool (B), установите непрозрачность до 50% и измените цвет переднего плана на черный. Переключитесь на маску «Texture L» слоя и закрасьте стороны так, чтобы текстура выглядела более реалистично:

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

У вас должно получиться следующее:

Шаг 25

Объединяем все слои с буквами (Command / Ctrl + G) и называем группу «Letters»:

Шаг 26

В этом шаге мы будем делать фон более насыщенным и контрастностным. Чтобы сделать это, создайте слой Levels Adjustment (Layer> New Adjustment Layer> Levels), поместите его над слоем «Background».  После этого выберите Hue / Saturation Adjustment Layer (Layer> New Adjustment Layer> Hue / Saturation) и установите следующие значения:

Далее возьмите Gradient Tool (G), цвета градиента черный и белый, тип градиента — линейный Linear. Переключитесь на «Levels» слоя-маски и нарисуйте градиент от верха к низу. Выберите  "Hue / Saturation" слоя с маской и нарисуйте градиент с теми же настройками, но в этом случае он должен быть шире:

Шаг 27

Теперь настраиваем контрастность и насыщенность цветов букв, чтобы они лучше вписывались в окружающую среду. Чтобы это сделать, создайте два корректирующих слоя: Levels и Hue / Saturation, и конвертируйте их в Clipping Mask для группы «Letters» группы, чтобы они влияли только на эту группу. Настройки Adjustment Layers следующие: 

Шаг 28

Загрузить изображение с желтым кленовым листом и откройте его в Photoshop. Возьмите Quick Selection Tool (W) и выберите лист. Если вы выбрали лишнюю площадь, переключитесь на режим «Subtract from Selection» и нажмите на область, которую вы хотите удалить. 

Скопируйте и вставьте выбранный лист в свой рабочий документ, измените его размер в соответствии с изображением ниже. Отразите по горизонтали (нажмите Command / Ctrl + T> щелкните правой кнопкой мыши на холсте> Flip Horizontal), а затем используйте Warp (нажмите Command / Ctrl + T> щелкните правой кнопкой мыши на холсте> Warp).

Далее, нам необходимо добавить два стиля к слою «Leaf»: Gradient Overlay и Drop Shadow. Дважды щелкните  на панели слоев на «Leaf» и примените следующие параметры:
Gradient Overlay: — оранжевый, желтый, оранжевый из стандартного набора градиентов. Drop Shadow: цвет # 460000

Шаг 29

Скачать еще одна картинку с желтым кленовыми листом , выделите ее таким же образом, и вставьте в ваш документ. Назовите этот слой «Leaf 2». Используйте преобразование Warp, чтобы сделать следующую форму:

Дважды щелкните на этом слое на панели слоев, установите следующие значения:

Результат:

Шаг 30

Теперь скачиваем и открывать изображения с кустом и с помощью Quick Selection Tool (W) следующую область:

Скопируйте и вставьте эту область в ваш документ. Поместите эти листья рядом с буквой «L», назовите ее «Leaf 3» и создайте слой Levels Adjustment Layer в режиме Clipping Mask. Настройки уровней корректирующего слоя  показаны на рисунке ниже. Кроме того, непрозрачность «Лист 3» уменьшаем до 85%.

Шаг 31

Наконец открываем третье изображение с кленовым листом. Выберите его с помощью Quick Selection Tool (W) и вставьте в ваш документ. Назовите этот слой «Leaf 4». Изменение размер листа и используйте деформацию преобразования Warp, чтобы сделать следующую форму:

Выберите слой «Leaf 4» и добавьте Drop Shadow Layer Style (цвет: # 172617):

Если вы посмотрите на букву «F», вы увидите, что на верхнюю сторону листа должна падать тень.Чтобы сделать это, для слоя «Leaf 4» создайте Hue / Saturation Adjustment Layer в режиме Clipping Mask. Устанавливаем значения, как на рисунке ниже. Переходим к Levels Adjustment Layer mask, выбираем инструмент Brush Tool (B), меняем цвет переднего плана Foreground на черный и закрашиваем нижнюю часть листа. Кроме того, непрозрачность слоя «Лист 4» уменьшаем на 85%.

Теперь объединяем все слои  (Command / Ctrl + G) и называем группу «Leaves».

Шаг 32

В этом шаге мы будем делать тени и блик. Чтобы сделать это, создайте новый слой (Command / Ctrl + Shift + N), назовите его «Shadows / Highlights», поместите его на верхней части панели Layers и залейте 50% серым цветом (Edit> Fill):

Измените режим смешивания blending mode "Shadows / Highlights" на Soft Light. Возьмите Brush Tool (B), измените цвет переднего плана Foreground на белый, установите непрозрачность 5% и закрасьте некоторые участки. Затем нажмите кнопку «D», чтобы изменить цвет переднего плана на черный и закрашиваем области тени. 

Шаг 33

В этом шаге мы будем снижать насыщенность желтого цвета кроны дерева. Таким образом, создаем слой Color (Layer> New Adjustment Layer> Selective Color), выбираем канал желтого и устанавливаем значения, которые показаны на изображении ниже. Переключитесь на маску этого слоя и залейте его черным цветом (Edit> Fill, используйте: Black).Возьмите Brush Tool (B), измените цвет переднего плана на белый и закрасьте крону дерева. Таким образом корректирующий слой будет влиять только на эту область. 

Шаг 34

Мы почти закончили. В этом шаге мы будем создавать реалистичную глубину резкости. Прежде всего, нам нужно создать карту глубины, другими словами, мы должны определить степень размытия, и какие объекты будут размыты. Создайте новый слой (Command / Ctrl + Shift + N), назовите его «Depth map», поместите его на верхней части панели слоев и загрузите выделения буквы A. Нажмите Shift + Backspace, чтобы открыть настройки Fill. Убедитесь, что выбран слой «Depth map» и залейте его цветом # 474747. Далее, выберите буквы, которые немного ближе, в данном примере это  "E" и «F» (для их выбора нажмите Command / Ctrl + Shift  + клик по cлою). Перейдите на слой «Depth map» и залейте выделение цветом # 2d2d2d. И, наконец, загрузить выделение последней буквы «L» и листьев, что расположены рядом с буквой. Залейте выделение черным цветом. Вы, наверное, случайно выделили тень от листьев поблизости букв. Она нам не нужна, так что удаляем их с помощью Eraser Tool (E). 

Шаг 35

Теперь создайте еще один слой (Command / Ctrl + Shift + N) и поместите его под слоем «Depth map». Залейте этот слой любым цветом. Дважды щелкните на нем и добавьте Gradient Overlay Layer Style. 

Ваш градиент должен выглядеть следующим образом:

Теперь объединяем два слоя (Command / Ctrl + E) — слой с градиентов и «Depth map».

Шаг 36

Выберите слой «Depth map», нажмите Command / Ctrl + A> Command / Ctrl + C, чтобы скопировать карту, а затем нужно переключиться на панель каналов и создайте новый канал «Alpha 1» (нажмите на иконку Create New Channel в нижней части панели каналов). Выберите канал "Alpha 1"  и нажмите Command / Ctrl + V, чтобы вставить карту глубины. 

Перейдите на панель каналов, выберите режим RGB и перейти к панели  со слойми. Отключите видимость слоя «Depth map»  (для этого щелкните левой кнопкой мыши на иконку глаза возле слоя). Выберите слой, который находится под «Depth map». В примере это слой «Selective Color 1». Нажмите Command / Ctrl + Shift + Alt + E, чтобы объединить все слои и сделать один результирующий слой. 

Выберите результирующий слой (он называется «Layer 1» ) и перейдите к Filter> Blur> Lens Blur. Выберите «Alpha 1» в качестве источника в панели Source, а также устанавливаем следующие параметры.

Шаг 37

Теперь мы должны сделать цвета размытого фона менее насыщенным. Чтобы сделать это, создайте Hue / Saturation Adjustment Layer и разместите его на верхней части панели Layers. Выделите и скопируйте содержимое слоя «Depth map», затем, удерживая Alt, нажмите на Hue / Saturation маски слоя, чтобы открыть его. Вставьте скопированное изображение на маске. Загрузите выделение всех букв, и, находясь на маске слоя  Hue / Saturation, залейте выделение черным цветом.

Нажмите на иконку слоя Hue / Saturation, чтобы перейти в нормальный режим. Настройки слоя Hue / Saturation показаны на рисунке ниже. Активируйте маски слоя  Hue / Saturation, возьмите мягкую черную кисть и закрасьте крону на дереве: 

Шаг 38

Создайте еще одни Hue/Saturation Adjustment Layer, но на этот раз мы должны сделать цвета на переднем плане более насыщенным. Еще раз скопируйте содержимое вашей слоя «Depth map», затем нужно переключиться на маски слоя Hue / Saturation. Вставьте скопированное изображение на маске и инвертируйте его цвета, нажав Command / Ctrl + I. Настройки слоя Hue / Saturation следующие:

Вот что вы должны получить:

Шаг 39

Этот шаг является необязательным. Можно немного обрезать изображение Crop Tool ©: 

Шаг 40

В качестве последнего шага давайте добавим виньетирование (края изображения более темными или более светлыми). Выберите верхний слой на панели слоев и нажмите Command / Ctrl + Shift + Alt + E, чтобы получить один результирующий слой. Выделите его и перейдите к Filter> Lens Correction. В разделе Vignette выберите «Custom».

Введите следующие значения:

Окончательный результат

Автор: Ekaterina Chepikova

Перевод — Дежурка