In this tutorial, you will learn how to create an animated bootloader icon that can be used as a user interface widget. Feel free to mix your own styles and variations of the loader.
Program – Photoshop CS3 Extended and higher.
Here are the three main sections that we will create.
- Creating loader forms.
- Stylization forms.
- Animation loader.
Step 1. Creating Loader Forms
Let’s start by creating a new document and adding a background.
File> New (File – New Document)
Size – 100 pixels per 100 pixels
Double click on the layer and convert it to a regular layer.
Fill the layer with dark gray # 3d3d3d.
Just for fun, we’ll add a pattern to our background, and then proceed to create the bootloader.
Create a new 7px 7px document with a transparent background. Select Pencil Tool (Pencil) 1px color black and draw a diagonal line. (Click in the upper left corner, hold Shift and click in the lower right corner).
Next, go to the menu Edit> Define Pattern (Editing-Define Pattern).
Return to the working paper. Standing on the background layer menu Layer> Layer Style> Pattern Overlay (Layer-Style Layer-Overlapping Patterned). In the set of patterns, select the created pattern, reduce the opacity to 20%.
Now you need to set several markers. For this we will use Transform Again – Shift + Ctrl + T (Repeat Transformation), this will speed up the process.
Choose a tool Line Tool (Line) 1 px in the figures mode, the color is white and with the Shift pressed, draw a vertical line.
To center the line, select both layers, select the move tool, and on the top panel, click the button. Align Horizontal Centers (Align Horizontal Centers).
Turn the line 45 ° – menu Edit> Free Transform – Ctrl + T (Edit-Free Transform)
Next, press the key combination Ctrl +Shift +Alt +T. Press this key combination several times until it turns out, as in the screenshot below.
Using the same technique as described above, we are going to add small shapes for our loader on each line of the created grid, as if our loader is going in a circle.
Add a few guides around where you want the first shape to be. Make sure the guides do not intersect the pixels.
Choose a tool Rounded Rectangle Tool (Rectangle with Rounded Angles) radius 1 px and create a rectangle along the guides. Make sure the Bind to Guides option is enabled (View-Snap to Guides).
Using the tool Direct selection tool (Arrow) move the lower corners (nodes) of our rectangular shape inward so that the shape narrows.
Use the same copying and rotate 45 ° trick that was used above to duplicate the shape on all lines. When rotated 45 °, the center point of the transformation should be set to the center of the intersection of the lines. To do this, hold down Alt and move the point.
Repeat these steps several times until the form is copied around the perimeter as follows.
Your layer panel should look like this:
Step 5. Styling forms
We have a preliminary loader shape, now we are going to add several layer styles to decorate it a little.
Color overlay (Overlapping Color) color # 242424
Drop shadow (Shadow)
Inner shadow (Inner Shadow)
Your bootloader should look like this:
Duplicate the pre-shape layer four times. Then start deleting tick marks on each layer, leaving only the one you need until you finish. To do this, use the tool. PathSelectionTool (Contour selection).
Now add styles for each layer.
Add a layer style to the layer called Shine-Active. Outer glow (External Glow) color # 90dcfc:
Add layer style to this layer. Inner glow (Inner Glow) color # a2defd:
Then change the color in style Color overlay (Overlapping Color) to color # 0087c6
On the layer called Shine-Fading1 add the same styles as above, omitting the layer style Outer glow (External Glow) and turn off the appearance of style Inner shadow (Inner Shadow).
On the layer called Shine-Fading2 change the color in the style Color overlay (Overlapping with Color) to color # 0087c6 opacity 80%.
On the Shine-Fading3 layer, change the color in the style Color overlay (Overlapping with Color) to color # 0087c6 opacity 25% (note the change in opacity).
Your bootloader should look something like this (layer style settings to your liking)
We have a base of styles, now it’s time to duplicate the layers. Select all layers except background and group them. Layer> Group Layers (Layer-Group Layer) or Ctrl + G.
Duplicate the group, and then rotate 45 ° Edit> Free Transform (Edit-Free Transformation) or Ctrl + T. Duplicate the top group again and rotate 45 ° (for a total of eight groups).
Your bootloader should look something like this:
Step 9. Loader animation
Well, our layers are set up, and we’re ready for the animation. Open the animation panel Window> Animation (Window Animation). Turn off the visibility of all groups except the first, then click Duplicate Selected Frames (Duplicate Selected Frames) in the animation panel.
Translator’s Note: in versions CS6 and up Window-Timeline –Сreate Frame Animation (Window-Timeline-Create Frame-by-Frame Animation)
Turn off the visibility of the first group and turn on the visibility of the second.
Repeat the previous step for each of the groups of layers. Select all the frames in the animation (click on the first frame and hold Shift on the last one) and set the frame duration to 0.1 seconds, play Forever (Continuously).
Next, save the animation. File> Save for Web Devices. Use the following options to animate gifs.
Open your GIF in a web browser and admire your new downloader!