- Designing Motion Content with 3D Models
- Designing a 3D Product for Motion Design
- 3D Motion Design in After Effects
- Compositing with Additional Elements
- Rendering the 3D Motion Design
This chapter is from the book
This chapter is from the book
This chapter is from the book
Compositing with Additional Elements
At this point in the project, you’ve imported and granted dynamic motion to the 3D model of the mosquito repellent cream product. Yet, it exists in a black void and could be more engaging for the viewer. You will now add some additional design elements, including an AI-generated background, some 3D text, and environmental lighting derived from HDRi panoramic imagery.
Generating Background Content with Adobe Firefly
Although you could use stock photography or commission artwork or a photograph as a background for your motion design, you have options for creating all sorts of assets through generative AI platforms.
Adobe Firefly is a new set of generative AI tools that you can access via https://firefly.adobe.com/. It is increasingly being integrated into traditional products like Photoshop, Illustrator, and Express.
Firefly has many advantages over its competitors. It has been ethically trained on a dataset of Adobe Stock materials along with openly licensed work and public domain content with expired copyright. Other generative AI services have been trained on content simply scraped from the open web, which is problematic because copyrighted materials are included in such a dataset. When using Firefly, this is not a concern.
Additionally, Adobe has declared that content generated through Firefly is commercially viable. You do not have to worry about whether someone is going to come after you and declare that you’ve stolen their work.
Let’s use Firefly to create a suitable background for your motion content.
In your web browser, visit https://firefly.adobe.com/ and locate one of the Text To Image modules that are prominently displayed on the page.
In the text prompt field, enter soft texture consisting of greens and oranges, very dark, painterly strokes, obscured by mist and click the Generate button
to have Firefly interpret your text prompt into a visual asset.Being as descriptive as possible with your text prompt is likely to achieve results that more closely match what you envision.
The results appear, along with several additional options in the right column that you can tweak to improve or modify the visuals generated through the initial prompt. Since your After Effects composition is framed at a 16:9 resolution, you should tweak the Aspect Ratio value.
Select Widescreen (16:9) in the Aspect Ratio drop-down.
I also selected Photo for the Content Type and used Firefly Image 2 for the generative AI model.
Below these choices are even more ways of tweaking the resulting imagery.
Select the following values to tweak the result:
Color and Tone: Warm Tone
Lighting: Dramatic Light
Composition: Wide Angle
These options generate a visual of a hot, muggy environment that’s prone to be inhabited by many mosquitoes.
The Prompt area below the images reflects the choices made by adding tags alongside the original text prompt.
You can remove these tags, if desired, by clicking the small x icon to the right of each tag.
You can also adjust the initial text prompt from here to further refine the results being generated.
Click Refresh
to the right of the text prompt to refresh the generated visuals based on your refinements.A new set of four images is generated.
Click the image that most closely matches your vision to view it in greater detail.
Select the More Options icon
in the upper right of the image to download the image to your computer for use in After Effects and other applications.The image asset downloads to your computer as a high-resolution JPEG.
)
)
)
)
The image I produced measures 2688 pixels wide and 1536 pixels high. This is much larger than the After Effects composition that it was created for and should work well as a background element for the motion design.
Now that you have a suitable background image—thanks to Firefly—you can complete the After Effects composition.
Adding the Generated Background Image
Now that you have a suitable background asset, it is time to compose it in the motion design.
It will not be animated, but subtle panning or scaling might be appropriate, if desired.
Drag the Firefly-generated JPEG from your system file browser into the Project panel, or choose File > Import > File from the application menu, to import it.
The imported image appears in the Project panel.
Drag the imported image into the Timeline panel to add it as a layer. Be sure to drag it to the lowest point in the layer stack so that it appears behind the tube.
Since the resolution of the image from Firefly is greater than that of your composition, you’ll need to make it a 3D-enabled layer and make some other adjustments.
Click the 3D Layer toggle
to the right of the layer name, and set the following property values in the Properties panel or via the layer transform properties group in the timeline:
Scale: 85%
Position: 640, 360, 1335 in.
This ensures the background image is placed behind the tube in 3D space and that it is scaled appropriately.
)
The background image generated with Firefly integrates perfectly with the tube model from Substance 3D Stager. You really do get the feel of an oppressive, humid, mosquito-filled environment with this combination of assets!
)
You aren’t finished with this composition yet, though; you still need to add text content and adjust the lighting.
Firefly and 3D Workflows
Although you used Firefly in this project to generate background imagery, there are many more possible workflows with generative AI and 3D-capable software applications as part of Adobe Creative Cloud and Substance 3D.
A great example of this is material generation in Substance 3D Sampler. You saw how to generate your own materials using this software in Chapter 2. Of course, you can also generate very realistic materials using content generated with Firefly and then transformed in Substance 3D Sampler.
The prompt used to create these textures, for example, was “closeup detail of dirt and small pebbles from above.” As with all things generative AI, the more specific your prompt is, the more likely the resulting image will conform to your request.
)
Also of note are more direct 3D integrations through Firefly, as showcased through beta experiments such as project gingerbread, a service that leverages Firefly capabilities to generate visuals through a combination of 3D primitives and generative text prompts. These elements work together to influence the composition and structure of the resulting visual that is generated. This is a great example of what to expect from generative AI in the months and years ahead.
Creating 3D Text
You are approaching the completion of this project. The addition of a suitable background image has certainly helped create a fully formed composition in After Effects, but there is more to be done.
You will now add text that implores the viewer to purchase the product before summer strikes and the mosquitoes are out in full force.
Choose the Text tool
from the tools at the top of the interface, and click in the top left of the Composition panel to create a new text object.Type Buy Before Summer! for the text content.
In the Properties panel, set the following values:
Position: 55 for x and 125 for y
Typeface: Arial Black
Text size: 72px
Text fill color: #FFE972 (light yellow)
Use the alignment options in the paragraph properties to left-align the text.
The text appears across the background image. Since similar colors are present in the image and the text, some of the text is difficult to read.
You can remedy this in several ways, but here you will use the Advanced 3D renderer to transform your text to native 3D.
In the timeline, click the Enable 3D Layer toggle
for the newly created text layer.The text object now includes additional 3D properties, thanks to the Advanced 3D renderer.
To provide a more 3D appearance to the text, open the layer properties and then the Geometry Options and Material Options property groups.
These property groups are available because the text is a 3D layer. Additional properties are available in the Transform property group, similar to what you saw in Chapter 5.
Change Bevel Style to Angular and adjust the Extrusion Depth value to 10.
)
With these changes made to the text properties, a visible bevel surrounds the edges of each character, greatly improving readability.
)
With the text element created and transformed to a 3D object, the only thing left to do with this object is transition it into view through a small bit of animation.
Animating 3D Text
The text message should appear only after the animation of the 3D tube has completed. Right now, the text is always present across the entire composition. You will now prepare the text for animation and use standard keyframing techniques to perform a small transition.
Using the Selection tool
, right-click the text in the Composition panel, and align the anchor point to the visual center of the text by choosing Transform > Center Anchor Point in Layer Content from the context menu.This causes properties such as Scale and Rotate to align to the center of the text instead of to the left edge, which was the original placement of the anchor point.
Move the playhead to the 5-second mark, at 0:00:05:00, and open the Transform properties group.
Enable the Stopwatch toggle
for the Scale and Opacity properties.You will use these properties to design a short fade-in transition where the text scales up a small amount.
Move the playhead a bit to the right, to 0:00:05:13, and click the Insert Keyframe button
to the left of the Scale and Opacity properties.This duplicates the previous keyframes for both properties, which ensures these properties retain their current values at the end of the transition.
Leave the keyframe values at 0:00:05:13 at 100% and click the Go to Previous Keyframe button
to the left of either property to return to the keyframes at 0:00:05:00.Adjust Scale to 66% and Opacity to 0%.
These changes make the text initially transparent and 66% smaller.
Now let’s finish the motion off with a bit of easing.
Select all four keyframes by dragging a selection rectangle around them in the timeline.
The keyframes are highlighted with a blue outline.
Choose Animation > Keyframe Assistant > Easy Ease from the application menu.
The diamond-shaped keyframes transform into small hourglass shapes, indicating that an ease has been applied.
Play back the full composition to view the results of your work.
)
)
All the animation is now complete, but there are still a few items left to examine before you close out this project.
Applying an HDRi Image as an Environmental Light
The Advanced 3D rendering engine allows for a new type of lighting, based on HDRi photography.
Included in the files for this chapter is an image named rainforest_trail_8k.hdr.
)
This is an HDRi file that has been downloaded from HDRI-HAVEN, although you can use any HDRi photo that you like, of course. The image file is a high-resolution, equirectangular 360° photo taken in a rainforest environment. This is perfect for your mosquito composition.
You will now create a new environment light and use the HDRi image for its source. You will first get the HDRi file into the existing composition so that you can use it.
Choose File > Import > File from the application menu and select the .hdr file. Alternatively, drag the file into the Project panel from your system file browser.
Click Open.
Drag the .hdr file from the Project panel to the bottom of the layer stack in the timeline.
Since the image is going to be used as a source for the light you will create, it doesn’t need to be visible to the viewer in any way. Placing it at the very bottom of the layer stack completely obscures it from view.
Select the top layer in the composition layer stack—this should be the text layer—and then choose Layer > New > Light from the application menu.
The Light Settings dialog box appears, allowing you to make choices about what sort of light to create and its specific properties.
In the Light Settings dialog box, choose Environment from the Light Type menu and click OK.
A new light named Environment Light 1 is created and added as a new layer at the top of the layer stack.
Open the layer properties and then the Light Options group.
Click the Source dropdown and select the HDRi image layer.
Because After Effects is aware that this layer contains HDRi data, it is presented as a source option for use in this light. Non-HDRi images will not appear in this drop-down.
The composition takes on a look that is much more overcast—as though beneath a vast jungle environment and potentially filled with mosquitoes.
Although the environment light has the intended effect on the look of the composition, you can add additional light to bring focus directly onto the centerpiece.
Select the topmost layer in the layer stack and choose Layer > New > Light from the application menu.
The Light Settings dialog box appears.
In the Light Settings dialog box, choose Point for the Light Type and enter #F45922 (bright orange) for the Color.
Click OK.
A new point light is added to the composition, making the lighting more intense across the cream tube.
If desired, you can adjust the position of the point light and other properties to achieve the exact look you want.
)
)
)
With the lighting taken care of, your 3D-motion design is complete.