Hey, everyone.
Howard Pinsky here with another Photoshop tutorial.
Where we are going to be creating a very simple loading circle,
which you can use on your websites or before your video projects.
This effect which you can see playing here,
is going to take advantage of some Photoshop CS6's
improved animation capabilities leaving you with a silky smooth result.
Let's get to it.
In terms of the size of the document, 1280 by 720 pixels should be large enough for
most of the projects you're gonna be working on.
But feel free to use a larger or smaller document, if you wish.
As for the shape of the circle, there's a very handy custom shape that
comes with Photoshop that's gonna work great for a design like this.
Go ahead and grab the Custom Shape Tool from your Tools bar and
then on your Options bar at the top.
Open up the shape picker.
By default, the shape that we're looking for
may not be available, so you'll have to load in some additional shapes.
Open up the shape picker's menu by clicking on the gear icon at
the top-right corner, and then choose the Shapes pack towards the bottom.
This will allow you to Append them to the end of your current list or
to replace them completely.
And once they been loaded in,
scroll down a bit until you see that circle frame shape.
This will gives us that doughnut shape that we're looking for.
Which then you can drag out on your document as small or as large as you wish.
The coloring doesn't matter at this point,
as we are going to be adding a gradient overlay.
And to do that, let's go ahead and hop into our layers styles with a simple
double-click on new shape layer that we just created.
Let's start with the gradient overlay which is going to define the colors for
our design.
Now before changing any colors, you're gonna wanna set the Style to Angle.
This will allow us to create a gradient that will travel around the circle as we
adjust the angle of the gradient.
Now once that's set,
clicking on the Gradient bar will bring up our gradient editor.
We're gonna be working with four stops.
The two on each end and then two that we're gonna create near the left-side,
which is gonna help define the color of the globe.
One of them is gonna be place around the 30% mark, and then one around 40%.
Clicking right underneath the bar will add a new stop.
Now, the second stop from the left,
the one placed around 30% is going to be the color of the glow.
I'm gonna set that to a blue, for this example.
But feel free to use any color that you wish.
The other three stops are going to to be set to the same color.
We're going to go with an almost pure black.
Now once you've set one of them, you can simply click on the others and
then sample right from the Gradient bar.
Good. And that'll complete the gradient.
Next, we're gonna be adding an Inner Glow to add a bit of shine to the circle.
Once the glow has been added, start by changing the color to a pure white,
set the Blend Mode to Overlay and then the Opacity to 100%.
Now down below, go ahead and
set the Size to around 25 pixels and then change the Contour to Ring.
Of course, if you're looking for a different style of your Glow, feel free to
tweak the settings to your liking and that'll complete it for the design.
Nice and simple and ready to animate.
And to being the animation process, we first need to reveal our timeline.
This is usually found at the bottom of your workspace in a tab.
But if its not visible right away,
you can activate it under the Window menu at the top of your screen.
Once it's visible,
you'll likely need to press the Create Video Timeline button, to begin animating.
If you button currently says, Create Frame Animation,
click on the arrow to the right and choose the Timeline option.
Now once the timeline has been created,
you're gonna notice that the layers appear in the same order as they do in
your Layers panel and each of them can be expanded using the arrow to the left.
You're gonna want to expand the shape layer that we just worked on.
Expanding the layer will reveal the different elements that can be animated.
In this case the, Position, Opacity, Style and Vector Mask.
Because we're dealing with layers styles,
we're gonna be animating the style element.
Once you've identified what you're gonna be animating.
Clicking on the stop watch icon will create the first key
frame of the animation.
At this point, we want to use the playhead at the top of the timeline to go to
the next point in the animation.
Now you'd think it would be a simple two step animation, but
it's actually not that simple and I'll explain why in a moment.
You know, when you're at the next point in the timeline,
the gradient needs to be adjusted.
So a simple double-click on the Gradient Overlay layer style will open it up.
Now, here's why it's not a simple two step animation.
For the Angle value,
there's no way to tell Photoshop to rotate 360 degrees clockwise.
And if we set the angle at negative 90 degrees,
Photoshop wouldn't know which way to go, clockwise or counter clockwise.
So we need to give Photoshop a nudge.
So instead of negative 90 degrees,
we're gonna be setting the angle at negative 89 degrees.
This way Photoshop knows to rotate the angle clockwise.
Now when you press OK,
a new key frame will be automatically added to the timeline.
Now, we can go to the next point by moving the playhead one again.
This time when we adjust the Angle value, we wanna set it to 92 degrees.
Again, this will give Photoshop a nudge as to which direction the angle
should rotate.
And again, when you accept the changes, a new key frame will automatically be added.
Now before we playback the animation,
you can also set the last frame of the animation by dragging the end-point right
to the current position of the play head.
Animating only one rotation is going to be enough because if you wanted the animation
to loop under the Timeline's menu, you can choose to loop the animation if you wish.
Now pressing the space bar will playback your animation.
The first playback is going to be a little bit choppy as Photoshop is
rendering each frame.
But after that, animation is going to be silky smooth.
Now here's one more neat advantage of using Photoshop CS6.
Layer styles can now be added to groups, so if I go ahead and
place this shape layer into a group by holding down my Shift key and
clicking on the new Group Option icon,
I'm able to further stylize this design even after it's been animated.
For example, I can go ahead and
add a Pattern Overlay to give it a bit of texture.
Photoshop comes with a bunch of nice textures which may work well for a design
like this and of course, you can change the blend mode to blend it in nicely.
Now again, after applying layer styles, the first animation is going to
be a little bit choppy but it's smooth sailing after that.
And from here, you can export it as a movie file using the button at
the bottom left corner of the timeline or save it as an animated GIF,
if you choose and that will do it.
A simple animated loading circle in Photoshop CS6.
As with all tutorials, take what you learned in this video and
make it your own by changing the colors or adjusting the layer styles.