Focus video player for keyboard shortcuts
Auto
- HD
- 720p
- 540p
- 360p
1.00x
cc
- 0.50x
- 0.75x
- 1.00x
- 1.25x
- 1.50x
- 1.75x
- 2.00x
We hope you enjoyed this lesson.
Cool lesson, huh? Share it with your friends
About this lesson
This tutorial will show you how to make an animation that pulses a great light effect with layer styles and animation.
Exercise files
Download the Photoshop file used in the video tutorial and try the lesson yourself.
Animated Loading Circle757.1 KB
Quick reference
Topic: Animated Loading Circle
Create a loading circle animation.
When to use
This tutorial will show you how to make an animation that pulses a great light effect with layer styles and animation.
Instructions
Set up
- New document of 1280 by 720 pxs.
The circle shape
- Go to the custom shape tool. From the options bar open the shape picker, find the doughnut shape (in shapes pack).
- Drag out shape on document.
The circle shape layer styles
- Gradient Overlay - Style: Angle,
- Gradient; 0%: 131313,
- 30%: 0096ff,
- 40%: 131313,
- 100%:131313.
- Inner Glow - Blend mode: Overlay,
- Opacity: 100%,
- Size: 25,
- Color: white,
- Gloss Contour - Ring Contour.
Activate the timeline
- Menu/Workspaces/Timeline.
- Press the ‘Create Video Timeline’ button, select ‘Create Video Timeline’.
- Expand the layer animation options so that the ‘Style’ stopwatch is visible.
Animate
- At Frame 0 click on the ‘Style’ stopwatch.
- Go to Frame 15.
- Double click the gradient layer style effect to open up the window and set the angle to -89 degrees.
- Go to Frame 1 sec.
- Double click the gradient layer style effect to open up the window and set the angle to 92 degrees.
- Drag the animation end point to the last key frame (1 sec mark).
- Choose Timeline dropdown: Loop Playback.
- Press Space bar to view animation.
Add more layer styles and pattern overlay
- Add animated layer to new group.
- Double-click group layer to bring up layer styles.
- Pattern overlay - Blend mode: Overlay, Opacity: 40%.
Save as GIF
- Menu/File/Save for Web.
- Mask sure that GIF is selected.
- Switch looping options to forever.
- Save to computer.
- 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.