Make a Modern Glowing Loading Bar in Photoshop

This tutorial will teatch you how to create a nice loading bar for your website or other content.

01. First make a new document and fill the background with a color that you’d like. Also, you can jump straight to making the bar and skip making the background.

02. Then add some texture to the background, going to Filter – Noise – Add Noise and set the Amount to about 1. We don’t want it to be too “noisy”.

03. Then give a little bit of light in the middle of the background by using the Dodge Tool with big soft brush.

04. Now it is time to create an actual loading bar. Take a Rounded Rectangle Tool and drag a nice long shape along your background.


05. Double click in the layers window on your newly made shape layer and from the new window that opens, choose Color Overlay, set the Blend mode to Normal and color either dark grey or darker color of your background.


06. When color is set, go to Stroke, set the size to 1, Fill Type to Gradient, Angle to 90 and then set the color from one shade to another.


07. Then go to Inner Glow, set the opacity to 50% or lower and color to black (or darker shade of your bar main color).


08.Now pick Rounded Rectangle Tool again, set the Radius to 20, again, and drag a new shape inside your first one.


09. Double click on the new shape, from the new popup go to Gradient overlay, set the angle to 90 and color made of 2-3 colors – fist darker shade, 2nd lightest and 3rd darker again.


10. Then choose Inner Glow, set color the same as your lightest, Blend Mode Linear Light and Size something small like 5px.


11. Again, choose another Layer Style from the same popup – this time Outer Glow. Set the color the same as your lightest, opacity to around 50% and Size again something low as 4px.


Press OK and voila! your loading bar is ready for use!

Leave a Reply