Animated Loading Circle

Quick reference

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

Lesson notes are only available for subscribers.