Как в фотошопе cs6 сделать эффект 3d: Создание 3D-объектов и анимаций в Photoshop — DesignLessons – все о дизайне

Содержание

3D Pop Up Effect — Учебник по Photoshop

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

Чтобы добавить еще больше трехмерного вида, мы будем скручивать края фотографии, используя команду «Деформация» в Photoshop, и добавляем собственную тень под ним. Для создания эффекта достаточно много шагов, но все они очень просты и легки. Я буду использовать Photoshop CS6 здесь, но любая последняя версия Photoshop будет работать.

Вот фото, с которого я начну:

Исходное изображение.

Вот как будет выглядеть окончательный результат:

Конечный эффект.

Как создать 3D всплывающий эффект

Шаг 1: сделайте две копии фонового слоя

С нашей новой фотографией, открытой в Photoshop, если мы посмотрим на панель «Слои», то увидим, что наше изображение само по себе расположено на фоновом слое :

Фоновый слой содержит наше исходное изображение.

Давайте начнем с создания нескольких копий слоя. Нажмите Ctrl + J (Победа) / Command + J (Mac) на клавиатуре, чтобы быстро сделать первую копию. Вы увидите копию, которую Photoshop автоматически называет «Слой 1», и которая появится над фоновым слоем на панели «Слои». Эти имена по умолчанию, которые Photoshop дает новым слоям, не очень полезны, поэтому, поскольку эта первая копия будет использоваться в качестве «плоской» версии нашего изображения, дважды щелкните непосредственно по имени слоя и переименуйте его в плоский . Нажмите Enter (Win) / Return (Mac) на клавиатуре, когда вы закончите, чтобы принять изменение имени:

Измените имя нового слоя с «Слой 1» на «плоский».

Теперь мы сделаем вторую копию слоя. Снова нажмите Ctrl + J (Победа) / Command + J (Mac) на клавиатуре. Другой новый слой, на этот раз называемый «плоская копия», появится над двумя другими слоями на панели «Слои». Мы будем использовать этот слой для создания нашего всплывающего эффекта, поэтому дважды щелкните имя слоя и переименуйте его во всплывающем окне. Нажмите Enter (Win) / Return (Mac), когда вы закончите, чтобы принять изменение имени. Теперь у вас должно быть всего три слоя:

Измените имя второй копии с «плоской копии» на «всплывающее».

Шаг 2: отключите видимость новых слоев

Нам пока не нужно видеть эти два новых слоя в документе, поэтому щелкните значок видимости «плоского» и «всплывающего» слоя (глазное яблоко) в дальнем левом углу каждого слоя, чтобы временно отключить их и скрыть их из поля зрения (хотя в окне документа, похоже, ничего не произошло, поскольку все три слоя содержат одно и то же изображение):

Когда глазное яблоко исчезает, это означает, что слои выключены.

Шаг 3: выберите фоновый слой

Нажмите на исходный фоновый слой, чтобы выбрать его (выделенные слои выделены синим цветом):

Выбор фонового слоя.

Шаг 4: добавь слой градиентной заливки

Давайте добавим слой для использования в качестве фона для нашего эффекта. Мы будем использовать слой Gradient Fill, поскольку градиенты немного интереснее, чем сплошные цвета. Нажмите на значок « Новый заливочный или корректирующий слой» в нижней части панели «Слои»:

Нажав на значок «Новый заливочный слой» или «Корректирующий слой».

Затем выберите градиент из появившегося списка:

Выбор слоя градиентной заливки.

Шаг 5: выбери черный, белый градиент

Откроется диалоговое окно «Градиентная заливка». Нажмите на панель предварительного просмотра градиента в верхней части диалогового окна, чтобы изменить градиент:

Нажав на панель предварительного просмотра градиента.

Откроется диалоговое окно « Редактор градиентов большего размера» с выбором предустановленных градиентов, которые мы можем выбрать в верхней части. Выберите черный, белый градиент, нажав на его миниатюру (третий слева, верхний ряд):

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

Шаг 6: замени черный на светло-серый

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

Дважды щелкните на черном цветном ограничителе ниже и в крайнем левом углу панели предварительного просмотра градиента:

Двойной щелчок на черном цвете остановит.

Это открывает палитру цветов Photoshop, позволяя нам изменить черный цвет в градиенте на другой цвет. Черный цвет слишком темный для нашего фона, поэтому выберите более светлый серый, чтобы заменить его, по крайней мере, сейчас. Мы узнаем, как вернуться и изменить цвета градиента, если это необходимо, в конце урока:

Выбор более светло-серого с помощью палитры цветов.

Нажмите кнопку «ОК», чтобы закрыть палитру цветов, затем нажмите кнопку «ОК», чтобы закрыть редактор градиентов. Наконец, нажмите кнопку ОК, чтобы закрыть диалоговое окно Градиентная заливка. Если мы посмотрим на панель «Слои», то увидим наш новый слой «Градиентная заливка», расположенный прямо над фоновым слоем (но под двумя другими слоями):

Панель «Слои», показывающая слой «Градиентная заливка» над фоновым слоем.

И если мы посмотрим в окно нашего документа, то увидим только что добавленный градиентный фон:

Наш градиентный фон.

Шаг 7: выберите и включите «плоский» слой

Далее мы создадим «плоскую» версию нашей фотографии. Нажмите «плоский» слой на панели «Слои», чтобы выбрать его (чтобы он выделен синим цветом), затем нажмите значок видимости слоя, чтобы снова включить слой в окне документа:

Выбор и включение «плоского» слоя.

Ваша фотография снова появится в окне документа, так как «плоский» слой находится над слоем градиентной заливки и теперь блокирует слой градиентной заливки из вида:

Фотография снова видна в окне документа.

Шаг 8: выбери Прямоугольный Marquee Tool

Возьмите инструмент Rectangular Marquee Tool с панели «Инструменты» или нажмите букву M на клавиатуре, чтобы быстро выбрать его с помощью ярлыка:

Выбор инструмента «Прямоугольная область» на панели «Инструменты».

Шаг 9: перетащить прямоугольное выделение внутри изображения

Выбрав Rectangular Marquee Tool, щелкните и перетащите прямоугольное выделение внутри изображения вокруг области, которая станет плоской версией фотографии. Не волнуйтесь о том, чтобы получить что-то точно прямо сейчас Первоначальный выбор вокруг общей области — все, что нам нужно:

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

Шаг 10: выберите команду Transform Selection

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

Transform Selection . Поднимитесь в меню Select в строке меню вдоль верхней части экрана и выберите Transform Selection :

Перейти к Select> Transform Selection.

Шаг 11: переключитесь в режим перспективы

Как только вы выберете Transform Selection, вы увидите, что вокруг контура выделения появятся маркеры преобразования (маленькие квадраты) (по одному в каждом углу и по одному сверху, снизу, слева и справа). Мы будем использовать эти дескрипторы, чтобы изменить форму выделения, но перед этим нам нужно переключить команду «Преобразовать выделение» в режим «Перспектива». Для этого щелкните правой кнопкой мыши (Win) или удерживая нажатой клавишу « Control» (Mac) в любом месте внутри контура выбора и выберите « Перспектива» в появившемся меню:

Выбрав «Перспектива» из меню.

Шаг 12: перетащите угловые маркеры, чтобы создать трехмерную перспективу

Теперь, когда мы находимся в режиме перспективы, нажмите на маркер в верхнем левом углу контура выделения и, удерживая нажатой кнопку мыши, перетащите маркер вправо. Противоположная ручка в верхнем правом углу будет двигаться вместе с ней:

Перетащите верхнюю левую ручку вправо. Верхняя правая ручка будет двигаться влево.

Затем нажмите на ручку в нижнем левом углу контура выделения и, снова, удерживая нажатой кнопку мыши, перетащите эту ручку наружу влево. Поскольку мы все еще в режиме перспективы, противоположная ручка в нижнем правом углу будет двигаться вместе с ней:

Перетащите нижнюю левую ручку влево.

Нижняя правая ручка будет двигаться вправо.

Шаг 13: переключитесь в режим масштабирования

Далее нам нужно переключить команду Transform Selection из режима перспективы в более распространенный режим Scale. Щелкните правой кнопкой мыши (Win) / Control-click (Mac) еще раз внутри контура выбора, и на этот раз выберите Scale из меню:

Выбор «Масштаб» из меню.

Теперь, когда мы находимся в режиме «Масштаб», нажмите на маркер в верхней части контура выделения и, удерживая нажатой кнопку мыши, перетащите маркер вниз:

Перетащите верхнюю часть контура выделения вниз к центру.

Наконец, нажмите на ручку в нижней части контура выделения, удерживайте мышь нажатой и перетащите эту ручку вверх:

Перетащите нижнюю часть контура выделения вверх к центру.

Продолжайте перетаскивать маркеры, чтобы изменить форму контура выделения, переключаясь между режимами «Перспектива» и «Масштаб» по мере необходимости, пока контур выделения не станет больше похож на исчезновение на расстоянии. Когда вы закончите, нажмите Enter (Win) / Return (Mac), чтобы принять его и выйти из команды Transform Selection:

Схема выбора теперь выглядит более «3D-иш» (технический термин).

Шаг 14: добавь маску слоя

С нашим выбором на месте, нажмите на иконку Layer Mask внизу панели Layers:

Нажав на значок маски слоя.

Это преобразует наш выбор в маску слоя. Мы можем видеть новый эскиз маски слоя, который был добавлен к «плоскому» слою на панели «Слои». Черная область на миниатюре представляет часть слоя, которая скрыта от просмотра в документе, в то время как белая область представляет часть, которая остается видимой в документе:

На «плоском» слое появляется миниатюра маски слоя.

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

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

Шаг 15: добавь стиль слоя белого удара

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

Нажав на значок стиля слоя.

Затем выберите Stroke из появившегося списка стилей слоя:

Выбор стиля слоя обводки.

Откроется диалоговое окно «Стиль слоя» в Photoshop. Во-первых, нам нужно изменить цвет обводки, поэтому нажмите на

образец цвета :

Нажав на образец цвета.

Выберите белый цвет в палитре цветов, когда он появится, затем нажмите кнопку «ОК», чтобы закрыть палитру цветов:

Измените цвет обводки на белый с помощью палитры цветов.

Вернитесь в диалоговое окно «Стиль слоя» и измените положение обводки с внешней на внутреннюю :

Изменение параметра «Положение» на «Внутри».

Наконец, нажмите на ползунок « Размер» и начните перетаскивать его вправо, чтобы увеличить размер рамки вокруг фотографии (следите за окном документа при перетаскивании ползунка).

Я собираюсь установить свой размер обводки на 16 пикселей, но в зависимости от разрешения вашего изображения вам может потребоваться установить еще больший размер, чтобы получить аналогичный результат:

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

Когда вы закончите, нажмите кнопку ОК, чтобы закрыть диалоговое окно Стиль слоя. Теперь у нас есть фото границы:

Изображение после добавления белого обводки вокруг фотографии.

Шаг 16: выберите и включите всплывающий слой

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

Выберите верхний слой и щелкните его значок видимости.

Шаг 17: выбери свой основной предмет

Используя выбранный инструмент выделения (инструмент Лассо, инструмент быстрого выбора, инструмент «Перо» и т. Д.), Нарисуйте выделение вокруг основного объекта на фотографии. Здесь я выбрал двух мальчиков и снеговика. Постарайтесь сделать свой выбор как можно более точным вокруг областей, которые будут фактически появляться на фотографии (другими словами, области, которые в конечном итоге будут появляться перед градиентным фоном), но можно нарисовать свободный выбор. вокруг нижних областей, которые появятся перед плоской версией фотографии:

Выбор основных объектов, которые появятся на изображении.

Шаг 18: добавь маску слоя

Выбрав наш основной предмет, нажмите еще раз на значок « Маска слоя» в нижней части панели «Слои»:

Нажав на значок маски слоя.

Как мы уже видели ранее, Photoshop преобразует наше выделение в маску слоя, отображая миниатюру маски на всплывающем слое:

Панель «Слои», показывающая новый эскиз маски слоя для всплывающего слоя.

И с добавленной маской слоя, область, которую мы выбрали, теперь выскакивает из изображения:

Изображение после добавления маски второго слоя.

Шаг 19: выберите «плоский» слой

Давайте закончим эффект, изогнув углы фотографии и добавив тень. Нажмите на «плоский» слой на панели «Слои», чтобы выбрать его:

Выбор «плоского» слоя.

Шаг 20: перезагрузите маску слоя как выделение

Удерживая нажатой клавишу « Ctrl» («Победа») / « Command» (Mac) на клавиатуре, нажмите непосредственно на миниатюру маски «плоского» слоя:

Ctrl + щелчок (Win) / Ctrl + щелчок (Mac) на миниатюре маски слоя.

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

Контур выделения снова виден вокруг фотографии.

Шаг 21: добавь новый слой ниже «плоского» слоя

Удерживая нажатой клавишу « Ctrl» («Победа») / « Command» (Mac) на клавиатуре, щелкните значок « Новый слой» в нижней части панели «Слои»:

Удерживая нажатой клавишу «Ctrl» («Победа») / «Command» (Mac), нажмите значок «Новый слой».

Обычно Photoshop добавляет новые слои непосредственно над текущим выбранным слоем, но, добавив клавишу Ctrl (Win) / Command (Mac), Photoshop помещает новый слой ниже выбранного слоя. В нашем случае он размещается ниже «плоского» слоя. Дважды щелкните имя нового слоя и переименуйте его в «shadow», затем нажмите Enter (Win) / Return (Mac), чтобы принять изменение имени:

Photoshop добавляет новый слой ниже «плоского» слоя. Переименуйте новый слой в «тень».

Шаг 22: заполните выделение на новом слое черным

Давайте заполним наш выбор на «теневом» слое черным. Поднимитесь в меню Edit в верхней части экрана и выберите команду Fill :

Перейдите в Edit> Fill.

Откроется диалоговое окно «Заполнение» в Photoshop. Измените параметр « Использовать» вверху на «Черный», затем убедитесь, что параметр « Режим» в нижней половине диалогового окна установлен на « Нормальный», а параметр « Непрозрачность» — на 100% :

Диалоговое окно Fill.

Нажмите OK, когда вы закончите, чтобы закрыть из диалогового окна. Фотошоп заполняет выделение на «теневом» слое черным. На самом деле мы не можем видеть его в данный момент в окне документа, потому что фотография на «плоском» слое над ним закрывает его от просмотра, но мы можем увидеть нашу черную область, если мы посмотрим на предварительный просмотр «теневого» слоя миниатюра на панели «Слои»:

Миниатюра предварительного просмотра каждого слоя показывает нам, что находится на слое, даже когда мы не видим его в окне документа.

Шаг 23: выбери «плоскую» маску слоя

Мы вернемся к тени после того, как свернули углы нашей фотографии, что мы и будем делать дальше. Нажмите непосредственно на миниатюру маски слоя на «плоском» слое, чтобы выбрать маску:

Выбирая «плоскую» маску слоя, нажимая на миниатюру маски.

Шаг 24: отсоединить слой от его маски

Если вы присмотритесь, вы увидите маленький значок ссылки между эскизом предварительного просмотра «плоского» слоя и его миниатюрой маски на панели «Слои». Нажмите на значок ссылки, чтобы удалить ее, которая отсоединит маску от содержимого слоя:

Нажмите на значок ссылки, чтобы отсоединить маску от содержимого слоя (фото).

Шаг 25: выбери команду деформации

Выбрав и отсоединив миниатюру маски слоя от самой фотографии, перейдите в меню « Правка» в верхней части экрана, выберите « Преобразование», затем выберите « Деформация» :

Перейдите в Edit> Transform> Warp.

Шаг 26: перетащите четыре угловых точки вверх, чтобы свернуть углы

Вы увидите сетку основы вокруг фотографии. Нажмите на каждую из четырех угловых ручек на сетке и перетащите их вверх. Перетаскивая каждую ручку, вы увидите, что угол фотографии закручивается вверх, и вы обнаружите часть черного «теневого» слоя под фотографией. Нажмите Enter (Win) / Return (Mac), когда вы закончите, чтобы принять эффект и выйти из команды Warp:

Перетащите каждый угол сетки вверх, чтобы деформировать фотографию и свернуть углы.

Шаг 27: выберите «теневой» слой

Давайте закончим все, смягчив тень под фотографией. Нажмите на «теневой» слой на панели «Слои», чтобы выбрать его:

Выбор «теневого» слоя.

Шаг 28: примени фильтр Gaussian Blur

Поднимитесь в меню Filter в верхней части экрана, выберите Blur, затем Gaussian Blur :

Перейдите в Filter> Blur> Gaussian Blur.

Откроется диалоговое окно «Размытие по Гауссу» в Photoshop. Перетащите ползунок «Радиус» в нижней части диалогового окна вправо, чтобы увеличить степень размытия, применяемого к тени. Чем больше размытия мы применяем, тем мягче будут появляться тени. Я собираюсь увеличить значение радиуса примерно до 10 пикселей, но в зависимости от разрешения вашего изображения, вы можете установить значение радиуса выше, поэтому обязательно следите за изображением в окне документа при перетаскивании слайдер:

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

Нажмите OK, когда вы закончите, чтобы закрыть из диалогового окна. Вот как теперь выглядит моя тень после применения фильтра размытия:

Тени теперь стали мягче благодаря фильтру Gaussian Blur.

Шаг 29: понизь непрозрачность тени

Мы смягчили края тени, но она все еще слишком темная и интенсивная. Перейдите к параметру « Непрозрачность» в правом верхнем углу панели «Слои» и уменьшите непрозрачность «теневого» слоя со 100% до 60% :

Уменьшение непрозрачности слоя до 60%.

С уменьшенной непрозрачностью тень теперь больше отходит на задний план:

Изображение после снижения непрозрачности тени.

Шаг 30: измени форму тени с помощью команды Free Transform

Последняя вещь. Давайте немного приберем тень, чтобы она выглядела как на самом деле под фотографией. Поднимитесь в меню Edit и выберите Free Transform :

Перейдите в Edit> Free Transform.

Это помещает поле Free Transform и обрабатывает тень. Я просто собираюсь щелкнуть и перетащить левый, правый и нижний маркеры внутрь, чтобы края тени лучше совпали с краями фотографии:

Перемещение левого, правого и нижнего края тени внутрь.

Когда вы закончите, нажмите Enter (Win) / Return (Mac) на клавиатуре, чтобы принять преобразование и выйти из команды Free Transform. Вот мой эффект после изменения формы тени с помощью Free Transform:

Края теней теперь лучше совпадают с краями фото.

Изменение цвета градиента фона

Если вы решили, что вам не нравится цвет градиента фона, вы можете попробовать выбрать цвет непосредственно из изображения, чтобы использовать его для фона. Давайте быстро посмотрим, как это сделать. Сначала дважды щелкните миниатюру слоя «Градиентная заливка» на панели «Слои»:

Двойной щелчок по миниатюре градиентной заливки.

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

Нажав на панель предварительного просмотра градиента.

Откроется

редактор градиентов . Я хочу изменить серый цвет в градиенте на что-то другое, поэтому я дважды щелкну на сером цвете, расположенном ниже и в крайнем левом углу панели предварительного просмотра градиента:

Двойной щелчок по серому цвету остановит.

Photoshop снова откроет палитру цветов, но вместо выбора цвета из палитры цветов я наведу курсор мыши прямо на само изображение, что временно превратит мой курсор мыши в значок пипетки . Чтобы выбрать цвет, просто нажмите на цвет, который вы хотите на изображении. Я нажму на область голубого цвета на снегу. Фотошоп дает мне мгновенный предварительный просмотр того, как новый цвет выглядит в градиенте:

Выбор цвета из изображения для использования с градиентом.

После того, как вы выбрали понравившийся вам цвет, нажмите кнопку «ОК», чтобы выйти из палитры цветов, затем нажмите кнопку «ОК», чтобы закрыть редактор градиентов, а затем диалоговое окно «Градиентная заливка». И с этим мы закончили! Вот для сравнения мое оригинальное фото еще раз:

Исходное изображение.

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

Конечный эффект.

Как создать 3D Chrome Badge в Photoshop

Недавно я действительно увлекся 3D-инструментами Photoshop. Они отлично подходят для создания простых 3D-моделей с ультра-реалистичным освещением и такими материалами, как металл, пластик и дерево. Chrome — это один из эффектов, который часто имитируется в Photoshop с различными градиентами и стилями слоев, но функция 3D в версиях CS6 и CC позволяет достичь результатов, превосходящих традиционные методы. В сегодняшнем уроке мы будем использовать Adobe Illustrator для создания классного дизайна значка или эмблемы, а затем перенесем его в Photoshop, чтобы превратить его в 3D с блестящей хромированной отделкой.

Мы создадим художественную работу этого хромированного автомобильного значка для RocketEagle, вымышленного бренда с крыльями и узорами в стиле ар-деко. Мы будем использовать мощные инструменты Illustrator для создания плоского дизайна, а затем перенесем графику в Photoshop, чтобы смоделировать эмблему в 3D с несколькими экструзиями. Затем наступает захватывающая часть, где мы настраиваем освещение и материалы для получения потрясающего эффекта хрома.

Основной дизайн значков, безусловно, можно сделать в Photoshop, но я считаю, что векторные инструменты Illustrator намного проще использовать при создании логотипов. Нарисуйте круг, затем сделайте пару дубликатов и уменьшите масштаб до центра. Добавьте инициалы вашего бренда в центр. Я использую классный шрифт в стиле ар-деко под названием Metropolis 1920 . Преобразуйте текст в форму, щелкнув правой кнопкой мыши и выбрав Создать контуры.

Масштабируйте и выравнивайте текст по одному из кругов, затем увеличивайте вес обводки, чтобы ширина линий была одинаковой. Перейдите в Object> Expand и выберите опцию Stroke, чтобы обвести этот обведенный круговой путь в форме кольца.

Используйте инструмент «Прямой выбор», чтобы расширить части текста, которые перекрывают круг. В некоторых областях могут потребоваться дополнительные опорные точки, чтобы сохранить первоначальную форму букв.

Удостоверьтесь, что расширенные части текста выходят за рамки круга, а затем с выбранными обеими фигурами используйте инструмент «Построитель фигур», чтобы обрезать участки, чтобы получить непрерывную линию между кругом и текстом.

Используйте параметр «Объединить» на панели «Навигатор», чтобы объединить остатки двух отдельных элементов в одну фигуру.

В другом месте артборда используйте инструмент «Перо», чтобы создать контур с линиями под углом 45 °. Это сформирует внутреннюю часть крыла.

Включите Smart Guides («Просмотр»> «Smart Guides»), затем нарисуйте маленький прямоугольник. Удерживайте нажатой клавишу ALT при перетаскивании дубликата и используйте зеленые умные направляющие, чтобы выровнять их идеально. Нажмите сочетание клавиш CMD + D несколько раз, чтобы повторить преобразование.

Сгруппируйте серии прямоугольников, затем поверните их на 45 °. Поместите их поверх формы внутреннего крыла и используйте сочетание клавиш CMD + Shift + [, чтобы отправить их на дно стека.

Используя ту же технику дублирования, нарисуйте серию длинных горизонтальных прямоугольников в качестве основных перьев крыла. Нарисуйте временный квадрат и поверните его на 45 °, затем разместите над кончиками крыльев. Выберите эту форму вместе со всеми прямоугольниками крыльев и удерживайте клавишу ALT при перетаскивании с помощью Shape Builder, чтобы обрезать концы.

Сгруппируйте перья крыльев, затем используйте сочетание клавиш CMD + Shift + [или щелкните правой кнопкой мыши и выберите «Расстановка> Отправить назад», чтобы поместить эти перья под другие фигуры.

Выделите и сгруппируйте все крыло, затем перейдите в Object> Transform> Reflect. Установите флажок «Вертикально», затем нажмите «Копировать». Удерживайте Shift, перемещая крыло на место с противоположной стороны.

Переместите крылья на место под центральной эмблемой, чтобы скрыть неприглядные формы, где крылья пересекаются посередине.

При перетаскивании фигуры с помощью инструмента «Многоугольник» используйте клавиши курсора, чтобы уменьшить количество сторон до 5. Переместите нижний край вниз с помощью инструмента «Прямой выбор», удерживая клавишу «Shift», чтобы расширить фигуру.

Нарисуйте дополнительную линию, проходящую по центру, используя Smart Guides для привязки и выравнивания пути. Поверните фигуру на 180 °, чтобы ее можно было использовать как хвостовое перо. Выберите инструмент «Поворот» и щелкните, чтобы поместить точку поворота в центр прямого края. Удерживайте Alt при перетаскивании фигуры, чтобы сделать угловую копию.

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

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

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

Сгруппируйте и поместите перья хвоста на главную эмблему, не забывая изменить порядок расположения, чтобы они сидели под другими формами. Используйте Align Panel, чтобы расположить их по центру. Дайте одному из кругов дополнительный щелчок, чтобы сделать его ключевым объектом, чтобы он не сдвинулся с места.

Нарисуйте квадрат над макетом эмблемы. Выберите две верхние точки с помощью инструмента «Прямой выбор» и переместите их к центру с помощью инструмента «Масштаб».

Нарисуйте контур головы орла с помощью инструмента «Перо», делая одиночные щелчки без ручек Безье, чтобы он был сделан из прямых линий. Объедините эти две фигуры с помощью инструментов Shape Builder или Pathfinder.

Выбрав головку, перейдите в Object> Path> Offset Path и введите -4mm.

Перетащите нижний край пути вставки вниз с помощью инструмента «Прямой выбор», чтобы он выступал за пределы исходной формы.

Используйте опцию «Минус спереди» в Навигаторе, чтобы обрезать эту внутреннюю форму от оригинала, затем расположите голову по центру на эмблеме. Этот элемент просто нужно выстроить на глаз из-за его асимметричной формы.

Нарисуйте выделение вокруг всех фигур, которые составляют эмблему, и нажмите кнопку Unite на панели Pathfinder. Удалите небольшую внутреннюю форму с помощью инструмента «Прямой выбор», чтобы создать целостный силуэт всего дизайна.

Перейдите в Object> Path> Offset Path и введите 3 мм, чтобы создать дополнительный контур. Примените стандартную белую заливку / черную обводку и отправьте фигуру на дно стека.

Выберите все формы эмблемы, кроме центрального исходного дизайна (нажмите Shift, чтобы удалить этот элемент из выделения), затем щелкните с помощью инструмента Live Paint, чтобы создать группу Live Paint.

Переключитесь на инструмент Live Paint Selection и нарисуйте выделение вокруг всех объектов. Примените случайный цвет ко всем объектам.

Перейдите в Object> Expand и выберите только опцию Object, чтобы навсегда применить эффект Live Paint.

Повторно щелкните правой кнопкой мыши и выберите «Разгруппировать», пока опция больше не будет доступна, чтобы полностью разбить элементы на части.

Выберите одну из фигур, затем выберите «Выделение»> «Одинаково»> «Цвет заливки». Объедините все фигуры в одну, щелкнув параметр «Объединить» на панели «Навигатор».

Выберите один из штриховых контуров в дизайне и выберите «Выделение»> «Одинаково»> «Цвет обводки». Идите к объекту> Разверните, но на этот раз выберите опцию Stroke, чтобы превратить эти штрихи в фигуры.

Выберите параметр «Объединить» в Навигаторе, чтобы объединить все крошечные сегменты контура в одну непрерывную форму.

Добавьте цветные фигуры к выделению, затем нажмите кнопку «Минус спереди» в Навигаторе, чтобы выделить контуры.

Выберите любые подобные элементы, которые составляют различные части дизайна, и выберите Make Compound Path из меню правой кнопки мыши. Эти группы форм включают в себя три различных секции крыла, каждую половину трех слоев хвостовых перьев, небольшие кусочки, составляющие центральный логотип и т. Д. Это все группы форм, которые вы хотите выдавливать на одной и той же глубине. когда мы будем манипулировать настройками 3D позже.

Как только части будут объединены в отдельные составные группы путей, выберите опцию «Разблокировать по слоям (последовательность)» в меню панели «Слои».

Найдите основную форму контура внутри слоев, затем используйте инструмент «Прямой выбор», чтобы удалить внутренние части, чтобы оставить сплошную форму. Больше невозможно будет увидеть дизайн, потому что все фигуры одного цвета, но мы знаем, что есть другие фигуры. Этот шаг гарантирует, что наша 3D эмблема будет иметь прочную основу.

Выберите «Файл»> «Экспорт» и сохраните документ в формате PSD для Photoshop. В следующем поле параметров, убедитесь, что опция Write Layers отмечена.

Откройте экспортированный PSD в Photoshop и обратите внимание, как все группы фигур были размещены на отдельных слоях. Увеличьте документ с помощью инструмента «Обрезка» и поместите новый слой внизу панели, чтобы заполнить его как временный фон.

Выделите каждый слой по очереди и выберите «Новый 3D-выдавливание из выбранного слоя» в меню 3D.

Когда все слои были преобразованы в 3D-объекты, перейдите в 3D> Объединить 3D-слои, чтобы все объекты были доступны в одной 3D-сцене.

Под панелью 3D выберите сцену из списка элементов и используйте инструменты навигации на верхней панели инструментов Photoshop, чтобы вращать окружение, чтобы вы могли видеть глубину 3D-объектов. Shift + щелкните между верхним и нижним слоями на 3D-панели, чтобы выделить их все, затем отредактируйте глубину выдавливания до 5 пикселей на панели свойств.

Различные части будут размещены повсюду, поэтому выбирайте каждый слой по очереди и меняйте координату позиции Z на ноль.

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

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

Когда все формы вытянуты, дизайн начинает выглядеть действительно круто в трех измерениях. Тема ар-деко начинает оживать по мере постепенного выпадения предметов.

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

Image Based Lights (IBL) обеспечивают наиболее реалистичные световые эффекты. Выберите «Среда» на панели 3D, затем выберите «Заменить текстуру» в настройках IBL на панели «Свойства». Выберите фотографию с прохладным освещением, например, закатом. Я использую это изображение из Unsplash. В идеале изображение должно быть сценой, в которую будет помещена окончательная 3D-модель, чтобы освещение и отражения идеально соответствовали окружающей обстановке. Уменьшите интенсивность света примерно до 45%.

Выберите «Бесконечный источник света» на панели 3D и переместите ручку, чтобы изменить направление источника света. Направив его вниз под большим углом, вы избежите ярких отражений и создадите приятное затенение. Уменьшите интенсивность этого света примерно до 50% и смягчите тени до 60%.

Shift + щелкните все слои на панели 3D еще раз, чтобы выделить их все. В настройках Cap измените выпадающий список на Front и Back, затем измените настройки на 3% ширины скоса, -45 ° угла скоса, -45 ° угла наклона и 2% силы надувания. Это добавит некоторую тонкую фаску кромок и мягко скруглит поверхность 3D-фигур, что поможет генерировать больше отражений для эффекта хрома.

Вы можете точно настроить, какая часть IBL отражается, выбрав «Среда» на панели 3D. При активном инструменте «Выделение» щелкните и перетащите трехмерный мир вокруг себя, пока не найдете красивую часть, которая отражается от блестящих поверхностей.

Выберите сцену на панели 3D и поверните вид вокруг, чтобы создать окончательное изображение, используя инструменты 3D на верхней панели инструментов, затем перейдите к 3D> Render. Я бы рекомендовал оставить это включенным на ночь, так как это может занять много часов. Вы можете настроить параметры рендеринга в разделе «Настройки»> «3D», чтобы настроить конечное качество.

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

Копирование визуализированного изображения на новый слой и изменение режима наложения на Soft Light также может помочь улучшить контраст. Уменьшите непрозрачность этого слоя, чтобы смягчить эффект.

Я быстро смоделировал свою 3D-модель в документе, используя небо с той же фотографии, которую я использовал для IBL, чтобы соответствовать цветам, а также копию логотипа, который мы изначально сделали в Illustrator. 3D-рендеринг показал блестящий эффект хрома, который намного лучше, чем альтернативные методы стиля слоя. Еще одна полезная функция 3D-режима Photoshop — модель можно поворачивать и позиционировать для любого применения, например, для капота автомобиля. Просто убедитесь, что он выровнен идеально, прежде чем нажать на кнопку рендеринга!

Тонирующие градиенты в Photoshop CS6 | Soohar

Хотите мгновенно создать эффект тонирования для фотографии? Photoshop CS6 поставляется с предустановленными пресетами, которые позволят тонировать или создать эффект винтажной фотографии за считанные секунды, но они достаточно далеко скрыты. Прочтите этот урок и узнайте, где их найти и как их использовать для создания профессионального сплит-тонированного эффекта. Ниже представлено изображение со всеми пресетами.

Шаг 1

Откройте изображение в Фотошопе. Для этого урока мы будем использовать это изображение:

Шаг 2

Добавьте корректирующий слой Gradient Map (Карта Градиента). Вы можете сделать это,через палитру слоев или через палитру Adjustments (Коррекция) ( если эта палитра отсутствует, то отобразите ее через менюWindow> Adjustments).

Шаг 3

В параметрах корректирующего слоя , кликните по градиенту, как показано на рисунке ниже.

Шаг 4

Перед вами откроется окно с выбором градиента. Именно здесь и спрятаны необходимые нам тонирующие градиенты. Кликните по верхнему меню, которое расположено в верхней правой области пресетов (Рис ниже). Перед вами появится плавающее меню где нужно выбрать пресеты Photographic:

Шаг 5

Выберите для себя понравившийся градиент. Большинство из них будет выглядеть довольно темными, но мы будем минимизируем их эффект в это в следующем шаге.

Шаг 6

Один из способов уменьшить эффект, это добавить корректирующий слой Black and White (Черно-Белое) (Layer> New Adjustment Layer> Black & White) (Слой — Новый Корректирующий слой — Черно-Белый). Расположите этот слой между основным слоем и слоем с картой градиента. Затем понизьте непрозрачность корректирующего слоя с картой градиента до 50%.

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

Автор Denny Tang. Перевод текста Алексей Логвинов.

Интересно и по теме:

Создание винтажного эффекта

Создание модного ретро эффекта за 3 шага

Создаём 3D анимацию логотипа в Фотошоп

В этом уроке вы узнаете, как сделать объёмным плоский логотип с помощью 3D инструментов и оживить его, используя новую Шкалу времени (Timeline) в Photoshop CS6.

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

Программа: Adobe Photoshop CS6 Extended
Сложность: средняя
Предполагаемый срок завершения: 1 час + время рендеринга
Финальный результат

Для прохождения урока загрузите логотип ресурса Envato.

Примечание переводчика: стоит заметить, что для этого урока потребуются значительные ресурсы вашего компьютера, так как рендеринг длится достаточно долго. Логотип, предоставленный для использования — большого размера, поэтому предлагаю сразу уменьшить его для работы.

Шаг 1

Откройте логотип в Photoshop. Обратите внимание, что файл с расширением PNG -это важно, потому что он содержит прозрачность и так будет удобнее, когда мы будем преобразовывать объект в 3D. Сейчас нет необходимости корректировать размер логотипа, так как мы будем изменять его в конце, при сохранении анимации.

Шаг 2

Выберите инструмент Рамка (Crop Tool) и расширьте верх и низ документа, чтобы увеличить пространство для нашей сцены. Нажмите Enter, чтобы принять изменения.

Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите текст Envato, исключая листик логотипа и внизу палитры слоёв нажмите кнопку Добавить слой маску (Add Layer Mask). Это действие позволит выделить только текст.

Шаг 3

Чтобы облегчить задачу, автор переименовал слой с видимым текстом на Text. Создайте копию этого слоя, переименуйте её в Leaf и сделайте активной маску слоя. После этого мы сможем её редактировать. Теперь нажмите комбинацию клавиш Ctrl + I, чтобы инвертировать маску. Таким образом, на этом слое будет виден только лист, а текст будет исключен. Результат должен выглядеть идентично оригиналу изображения с логотипом, которые мы открыли в начале урока. Разница лишь в том, что текст и значок листика в настоящее время на отдельных слоях.

Делаем активным слой с листиком Leaf и идём в меню Слои – Слой маска – Применить( Layer > Layer Mask > Apply). Это действие позволит удалить все пиксели, которые были скрыты под маской.

Теперь идём в меню 3D и выбираем пункт Новая 3D-экструзия из выделенного слоя (3D > New 3D Extrusion From Selected Layer). После этого вы будете автоматически перемещены в 3D пространство, где будете работать с 3D сценой. Если этого не произошло, вы можете самостоятельно включить его в меню Окно – Рабочая среда — 3D (Window> Workspace> 3D). Обратите внимание, что теперь слой с листиком является 3D слоем в палитре слоёв.

Шаг 4

Перейдите в 3D палитру, выделите объект Leaf (обозначается значком звезды) и включите палитру Свойства (Properties). В настройках палитры установите Глубину экструзии (Extrusion Depth) на 35 и снимите флажки с опций Захват тени (Catch Shadows) и Наложить тени (Cast Shadows).

Теперь нам нужно переместить объект Leaf точно в центр сцены. Прежде чем мы это сделаем, для удобства изменим вид нашей камеры. Выделите Текущий вид (Current View) в 3D палитре и выберите настройку Сверху (Top) для опции Вид (View) в палитре Свойства (Properties).

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

Примечание переводчика: для того чтобы элементы управления стали видимыми, щёлкните курсором по 3D объекту.

Шаг 5

В настоящее время наш документ имеет вид сверху. Для изменения и сброса вида камеры в палитре Свойства (Properties) установите вид По умолчанию (Default Camera). Обратите внимание, что 3D объект Leaf не окажется в правильном положении. Мы исправим это в следующем шаге.

Исправим положение листика. Используйте инструменты камеры в верхнем меню, которые показаны на скриншоте. Перемещайте камеру до правильного размещения логотипа. Просто перемещая камеру, мы можем добиться вида объекта в надлежащем положении. Важно, что на самом деле, таким образом, не двигается 3D объект, как это было в шаге 4.

Шаг 6

Примечание переводчика: Важно, перед началом создания анимации, продумайте какой у вас будет фон, например — цвет, градиент Необходимо подготовить фоновый слой заранее самым нижним в палитре слоёв. Автор не говорит об этом, но у него завершённая анимация с белым фоном.

Теперь мы готовы к создании анимации. Откройте Шкалу времени (Timeline) и нажмите кнопку Создать временную шкалу для видео (Create Video Timeline). Если вы не видите в рабочем пространстве программы шкалу времени, вы можете её открыть в меню Окно – Шкала времени (Window > Timeline).

Когда вы сделаете это, то увидите, что все слои отображаются в виде отдельных видео-слоёв в шкале времени. В нашем случае это будет два видео-слоя.

Шаг 7

Так как нужно анимировать листик, нам необходимо получить доступ к его свойствам в шкале времени. Чтобы раскрыть список свойств, которые могут быть анимированы, щёлкните по маленькой стрелке напротив названия видео-слоя. Для этой анимации мы сосредоточимся на опции Положение 3D сцены (3D Scene Position).

Щёлкните по иконке секундомера чтобы Включить анимацию ключевых кадров (Enable Keyframe Animation). Это действие добавит первый ключевой кадр в шкале времени, обозначенный жёлтым ромбиком.

Поскольку ключевой кадр анимации включен, Photoshop автоматически добавит ключевой кадр, когда вы внесёте изменения в положение сцены (или вращения).Прежде чем начать вращать сцену, необходимо указать, как долго будет длиться анимация. Для этого перетащите индикатор текущего времени (обозначается синим слайдером) в другую точку на временной шкале.

Шаг 8

Вернитесь в 3D палитру активируйте слой Сцена (Scene) и перейдите в палитру Свойства (Properties). Щёлкните иконку Координаты (Coordinate) и измените на оси Y значение угла на 360 градусов. Это будет вращать сцену вокруг ее Оси Y на 360 градусов.

Обратите внимание, что после этих действий на шкале времени был добавлен новый ключевой кадр. Используя индикатор текущего времени (голубой слайдер), двигая его назад и вперёд, вы можете просматривать процесс анимации 3D объекта. Так как наш 3D листик был помещен в самый центр нашей сцены, мы будем видеть его вращающимся на месте.

Шаг 9

Наша цель состоит в том, чтобы 3D объект листик постоянно вращался вокруг своей оси, но показывал всё время только свою переднюю часть. Чтобы сделать это, нужно сначала дублировать слой Leaf в палитре слоёв. Обратите внимание, что копия слоя с листиком сразу же появится и в шкале времени.

Теперь очистим шкалу времени, чтобы 3D объект листик делал три четверти оборота.

Подведите курсор к началу видео-слоя с копией листика. Когда курсор изменится на значок с видом квадратной скобки с двумя стрелочками, перетащите слой к красной линии. Этот видео-слой теперь будет обрезан и его анимация начнётся после трёх четвертей оборота.

На этот раз нужно очистить первую часть нашей анимации. Для этого нужно найти точку, в которой объект листик поворачивается на одну четверть. Активируйте видео- слой Leaf в Шкале времени (Timeline) и перетащите его конец к красной линии как показано на скриншоте.

Наконец сдвиньте видео-слой с копией листика к новой красной линии. Убедитесь, что ваша анимация проходит гладко.

Шаг 10

Прежде чем продолжить создание нашей анимации, мы должны указать программе какие именно кадры хотим использовать. Используйте индикатор текущего времени, чтобы определить точку, где наш объект появляется, чтобы сделать полный оборот. Теперь сдвиньте к красной линии ползунок Задать конец рабочего участка, который находится под тайм баром. После этих действий в анимации будут показаны только эти кадры.

Шаг 11

Наша работа с подготовкой анимации завершена и нам пора заняться её сохранением в формате GIF. Рассмотрим два варианта. Первый – быстрое сохранение с низким качеством. Второй вариант займет больше времени, но позволит нам сохранить высококачественный GIF.
Вариант 1 – идём в меню Файл – Сохранить для Web (File > Save for Web). Эта опция пропускает процесс рендеринга и сохранит кадры, какие они есть в нашем документе. Идем дальше, и изменяем настройки по своему усмотрению. Нажмите кнопку Сохранить, когда закончите.

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

Шаг 12

Вариант 2 – требует рендеринга нашей сцены. Это настоятельно рекомендуется для улучшения качества конечного продукта. Идём в меню Файл – Экспортировать – Просмотреть видео (File > Export > Render Video) и внесите изменения, как показано на скриншоте. Убедитесь, что у вас установлен параметр Последовательность изображений Photoshop (Photoshop Image Sequence) для выхода и Окончательная трассировка лучей (Ray Traced Final). Этот метод сделает нашу сцену в виде отдельных кадров.

После того как все кадры пройдут рендеринг, мы сможем открыть их как анимацию. Идём в меню Файл – Открыть как (File > Open As) и перейдите к папке, которую вы создали для обработанных кадров. Выберите первый кадр и внизу окна поставьте флажок на опции Последовательность изображений (Image Sequence). Теперь нажмите кнопку Открыть (Open ) и в следующем диалоговом окне подтвердите ОК.

После этих действий кадры, которые прошли рендеринг, автоматически появятся новой анимацией в новой шкале времени.

Финальный шаг. Чтобы сохранить анимацию в формате GIF, просто повторите Шаг 11, и все готово!

Автор: Stephen Petrany

Переводчик: Рыбка

Источник

Создание гладкого металлического 3D эффекта для текста в Photoshop CS6

3D среда в Photoshop CS6+ предоставляет разнообразные опции и настройки, которые помогут вам легко создать удивительные текстовые 3D-эффекты. Этот урок покажет вам, как можно поиграть с различными настройками, чтобы создать простой, но утонченный, металлический текстовый эффект.

Предварительный просмотр результата

Детали урока

Программа: Adobe Photoshop CS6 Extended
Предполагаемое время выполнения: 45 минут
Уровень сложности: Начинающий