In this tutorial, I`m going to show you how to create a clean and sleek progress/loading bar in Photoshop. I`m sure you`ve seen a lot of progress bars but did you asked yourself how to create one? Now you`ll know. Along the way, we`ll use different tools, create layers and apply multiple layer styles in order to obtain a great progress bar just ready to be coded.

What we`ll be doing today:

First step, as usually, open Photoshop and create a new document of 600×400px(should be enough). Make sure to set the “Background Contents” to “Transparent”.

You already noticed that in the layers palette is one layer but the canvas is still empty. Grab the Paint Bucket Tool(G) pick any color and paint the canvas. Then double-click the layer (or right-click and choose Blending Options) and apply this nice dark-blue gradient:

Now that we`ve set the background, let`s create a bar…Select the Rounded Rectangle Tool(U) and with a radius of 5px, draw a rectangle of 330×30px. Make sure to be in “Shape Layers” mode in order to create a shape and not a path.

Stylize the bar by adding the next blending options:

The bar looks ok until now…I want to mention that this is the main bar on which the progress bar will stand. We`ll get there now too…

Now let`s create the second bar. Again, select the same Rounded Rectangle Tool(U) and with the same radius of 5px, draw a bar of 198×26px. 198 represents 60% from the total of 330px.

Progress bars have their own unique element: stripes…every fancy progress bar is customized with oblique stripes and we`ll add them too…I chose to use patterns in order to obtain the stripes I wanted…So I created a very nice pattern which can be downloaded from here:

Stripes Pattern

Load them into Photoshop and apply to the progress bar(the smaller one) the next blending options:

Take a look at how the bar looks like…pretty sleek but there`s room for more. We`ll make it shine!

Ctrl+Click on the second bar`s layer thumbnail to make it selectable and then pick up the Rectangular Marquee Tool(M). Choose “Subtract from Selection” mode and select the bottom-half of the current selection. Now should be revealed only the top-half selection. This procedure allows us to have rectangle corners on the bottom and rounded corners on the top.

Create a new layer, grab the Paint Bucket Tool(G) and paint the half selection with white. Reduce the opacity of the layer until 15-20% and you`ll obtain a nice shining effect.

Let`s create a tooltip…The tooltip will show the current progress of the bar. Select the Rounded Rectangle Tool(U) and with a radius of 5px, draw a rectangle of 66×27px just above the end of the progress bar.

Now we need an arrow…select the Custom Shape Tool(U), grab an arrow and draw it just under the small box. Make sure to rotate it from left to bottom.

Merge the two layers created(select them and Right-Click+Merge Layers) and apply the same blending options you added to the main bar(bigger one). Easier is to just copy the styles and paste them to the new layer.(Right Click+Copy/Paste Layer Styles). Type in “60%” using what font you want and the progress bar is done.

What do you think about this loading bar? If you have any feedback, don`t hesitate to leave a comment below! See you next time for another tutorial!

Related posts:

1. How to create a clean and design portfolio layout using Photoshop
2. How to do a glossy and animated jQuery button 1/2 Photoshop part
3. How to create an energy ball effect as Dragon ball Z with Photoshop