KENT: Hi my name is Kent
I'm the creative specialist on the Google Web Designer team
and I'd like to show how to use the Image Effect component
This component allows you to create special effects with your images
You'll find it in the Components panel under Graphics & Effects
Drag Image Effect to the stage
or just double click
Now you can resize it
And double-click to open the dialog
First thing is to add an image
and you can click this link
or drag and drop one from your filesystem
You'll see the standard image scaling options
and a time limit which is recommended for most ads
Now we can select an effect
and I'll start with Wave
For my slider controls I have Speed
Magnitude which if you're familiar with waves is like amplitude
and Length which is the distance between waves or frequency
You can change the image source
I've got a few loaded in my Library
and I'll choose one with the transparent background
Now I'll change scaling to fit
and I'll point out I've included some blank space around my image
otherwise it would be right up against the edge
With transparent images you normally want to enable Trimming
and Reverse changes the wave direction to move downwards
We have two types of waves
Standard, and Lensing will enlarge your image symmetrically
Now Advanced has the position controls
and there's four of them
Start & End for both Wave area and Full strength
You can enter values numerically
or use these sliders
To make this easier to see
I'll change my scaling to Stretch
and increase the Magnitude
Now move these two sliders close to the middle
and the region between them is where the wave is the strongest
so as the wave moves down the image
it becomes widest in the middle
And I see two more sliders that control
where the wave starts and ends
so I'll adjust these to account for that
empty space of the top and bottom of my image
and I'll pull my Magnitude down little
to see the top and bottom of my image are unaffected by the wave
There's one last control to show
and I'll change my image for it
change Scale to fit again
and Wave type to Standard
and the control I want to show is Orientation
which I'll change to Vertical
Now I tweak my position controls to get full strength
at the end of the flag and be stationary at the pole
And here we have a great flag-waving effect
that might be used for a Fourth of July sale
The next one I want to show is the Breathe effect
which distorts your image in and out elastically
Notice the image is automatically reduced in size
allowing room for the expanded state
You can adjust the speed
and we have four controls for the strength of this effect
defining the amount of expansion and contraction in both axes
So just in the horizontal direction
I can max them both out for the most extreme effect
and reduce to zero for no effect horizontally
Again the base size of my image changes as I do this
and same for the vertical direction
Command Z reverts those changes
Next we have the Hold time
which adds a pause at either end of the effect
I'll hold the expansion for about a second
and the same goes for a contraction
I'll show an example use case for this effect with a different image
Let's say we're making an exploding can effect
I'll reduce vertical effects to zero
and for horizontal only give expansion
and just a touch of contraction
One last control with this effect is Curves
with two directions normally set to one
but can be used to increase distortions in your image
The next effect is Before and After
which is used to compare two images
so I'll update mine
And you see an automated wipe effect
You can swap the images
and change the Angle
Feathering is a little soft by default
and I can bring it down to zero for a hard edge
with Follow mouse checked the effect follows your cursor
and when leaving the frame will return to autoplay
You can also turn off autoplay
but still keep the mouse interaction
And here are Speed and Hold time like the other effects
The last controls are for the initial state
Delay in seconds is the amount of time before autoplay starts
and position is used when autoplay is off
and it refers to the starting point for the wipe
The last effect is Reveal
and is similar to Before and After
and that you need two images
So I'll update mine again
And we see the effect is similar to the last one
except only a small window is revealed
We call that the focus and can change its size
by clicking and dragging in one of these fields
and click the link icon to make it an ellipse
Feathering creates a hard or soft edge
This effect has more autoplay options
Wander is the default
and shows a random path
Wrapping wander goes off one edge and comes back the other
and Circle moves in a fixed radius around the center
Like all the other effects
we can control the autoplay speed
Follow mouse lets the user control the reveal
and the final option is to Stay revealed control
which is used to wipe away the top image
and gives a scratch to reveal effect
I'll change my images one last time
to give an example of this
Enables Stay revealed, Follow mouse
and Autoplay none
And when you're done you just save from this dialog
And I can preview in a browser to see the finished effect
That does it for the Image Effect component
Thanks for watching!