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.
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:
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: