The last article I released was a nice round up of some amazing free UI kits available for download (Read it here). After releasing the article I thought it would be nice to make a tutorial teaching you, step by step, how to make a nice, clean progress bar in Photoshop.
Progress bars can be great for use in UI on the web or mobile devices. They can be used to show the status of something or the progress of a download.
Let’s get started.
Outcome
Step 1: The Background
Create your new Photoshop file, for the purpose of this tutorial, mine will be 450x200px. Fill your layers background with #22262b.
Now duplicate that layer. On the duplicated layer we will add some noise, go to Filter > Noise > Add Noise, apply the following settings:
Click “Ok”.
Now lower the opacity of that layer to 5%. You should have the following result:
The background is almost finished. Let’s now select our brush tool, set your foreground colour to white #ffffff and choose a soft brush. Set the master diameter of the brush to 285px, hardness to 0% and opacity to 100%. On a new layer, make a single click of your brush in the middle of your document.
Now lower the opacity of the new layer to 30%, which will provide you the following result:
Step 2: Starting The Progress Bar
Time to get started on the actual bar.
Create a new layer and set your foreground colour to white #ffffff. Pull out your rounded rectangle tool and draw a nice, long rectangle in the middle of your document:
Right click on your layer, select “Blending Options” and apply the following settings:
Click on “Ok” to save your changes, which will give you the following result:
Step 3: Continuing The Bar
Highlight your bar:
Now create a new layer while you have your bar highlighted. Click “Select” > “Modify” > “Contract”:
And contract your selection by 1px. Click on “Ok” to save your changes. This will bring your selection 1px inside of the bars borders.
Now select your Gradient Tool, set your foreground colour to #27b9dd and background colour to # 1494b4. Now create a gradient within your selection. After creating the gradient, cut about 20% off of the end of it like so:
We will make the blue gradient look a little better now, drop the opacity of the gradient layer to 60%. Now duplicate this layer and set the layer style to “Overlay”.
As you can see, there isn’t a huge different from doing this but it definitely makes the gradient stand out a little bit better.
Step 4: Finishing The Bar
Now we want to make some slanted bars to run along our progress bar.
Create a new layer, set your foreground colour to white #ffffff and select your pen tool. Draw a horizontal bar like the following:
Now cut the white bar so that it fits within the progress bar:
Now set the layer style of the white bar to “Overlay” and lower the opacity of the layer to 15%. Now duplicate the white bar and move it across the progress bar, 10px apart.
And that is it, you have now made a clean progress bar. Your final result should look like the below:
Comments
[...] Tutorial: Create a progress bar [...]
Nice, so simple, next stop for me is to find a tutorial on how to make a load script, that’d be cool.
Thank you Yung.
I am sure there are some tutorials out there like that. I may look into writing up a little one in Jquery that can be used with this bar.
[...] Detail here [...]
[...] "The last article I released was a nice round up of some amazing free UI kits available for download (Read it here). After releasing the article I thought it would be nice to make a tutorial teaching you, step by step, how to make a nice, clean progress bar in Photoshop." [...]
Good and easy tutorials, will try it. Thanks for it! 
Glad you enjoyed it Rahul.
Nice and simple tut! I love it.
[...] wallpaper is a loading bar. I found a wonderful tutorial here. You can sit in your chair pretending your computer has not quite completely loaded. Ooohhh! The [...]
This is an excellent and easy to follow tutorial. Thank you for taking the time to make it.
I had a go here:
http://redandblackwallpapers.com/?p=1259
Threeyzmonkeys, thank you. I took a look at your outcome, looks nice.
[...] we have a roundup of the best icon design tutorials [...]
[...] Tutorial: Create a progress bar [...]
[...] Designing a Retro Flyer with Photoshop How to Create Your Own Fractal-Style Design Using Photoshop Tutorial: Create a Progress Bar Create a Polished 3D Gold Bars Text Effect Applying a Grunge Shattered Glass Effect to Your Design [...]
[...] Tutorial: Create a Progress Bar [...]
[...] Tutorial: Create a progress bar [...]
[...] Tutorial: Create a Progress Bar [...]
[...] Tutorial: Create a Progress Bar [...]
