Using a Progress Bar in your Application is a good way to interact with your users. Today I will show you how can you achieve a simple solution if your planning to create a Progress Bar that you can use on your website, software or apps. Creating this from scratch is really easy, the good part is you can change the colors, designs, and layout according to your needs.
You can download the PSD at the bottom of this tutorial!
Progress Bar
The Tutorial
![1-canvas - how to create a minimal progress bar ui in photoshop 1 canvas How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/1-canvas.png)
Open your Photoshop and create a new canvas, width is 450px height is 300px. Now name this layer as index, fill it with color #565a59. Select Filter > Noise > Add Noise and set it up to 1%.
![2-body-of-progress-bar - how to create a minimal progress bar ui in photoshop 2 body of progress bar How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/2-body-of-progress-bar.png)
Grab your Rounded Rectangle Tool (M) and set your Radius to 50px, draw a simple shape like the one above and name it body. Fill it with color #454847.
![3-dropshadow-for-progressbar - how to create a minimal progress bar ui in photoshop 3 dropshadow for progressbar How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/3-dropshadow-for-progressbar.png)
Right Click the body layer and select Drop Shadows, follow the settings above and use the color #B7B4B4.
![4-innershadow-for-progressbar - how to create a minimal progress bar ui in photoshop 4 innershadow for progressbar How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/4-innershadow-for-progressbar.png)
Moving on to Inner Shadow, just change the Distance and Size, color #454847.
![5-progressbar-with-detail - how to create a minimal progress bar ui in photoshop 5 progressbar with detail How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/5-progressbar-with-detail.png)
You should have the same result as above, now we will create the progress bar itself.
![6-darkline - how to create a minimal progress bar ui in photoshop 6 darkline How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/6-darkline.png)
Now, set your Foreground Color to #030303, using your Single Marquee Tool (M) draw a line and fill it with the said color.
![7-whiteline - how to create a minimal progress bar ui in photoshop 7 whiteline How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/7-whiteline.png)
Repeat the step above, only change the color to #8c8e8d and make sure that the dark line is on top and the lighter line in the bottom.
![8-progressbar-no-details - how to create a minimal progress bar ui in photoshop 8 progressbar no details How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/8-progressbar-no-details.png)
Create a new layer (name it progress bar) and select your Pen tool and draw a line (nearly half of the dark line) and right click > fill stroke, set to 2px and use this color #b3d754.
![9-innershadow-progressbar - how to create a minimal progress bar ui in photoshop 9 innershadow progressbar How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/9-innershadow-progressbar.png)
In progress bar layer, select Blending Options and set your Inner Shadow’s settings like the one above.
![10-gradient-progressbar - how to create a minimal progress bar ui in photoshop 10 gradient progressbar How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/10-gradient-progressbar.png)
In Gradient, use this color.
![11-gradient-progressbar-settings - how to create a minimal progress bar ui in photoshop 11 gradient progressbar settings How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/11-gradient-progressbar-settings.png)
Here is the Gradient Settings, set your angle to 90 and that’s it for the progress bar details.
![13-number - how to create a minimal progress bar ui in photoshop 13 number How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/13-number.png)
Next is the number percentage, repeat the steps on creating the body layer. Make sure that the height is the same with the original layer. Or I can show you a cool tip! Just grab Rounded Rectangle Tool (M) and draw the shape like the one above and select body layer > right click > copy layer style and go to the new number layer shape > right click > paste layer style.
![progressbar - how to create a minimal progress bar ui in photoshop progressbar1 How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/progressbar1.png)
To create the text, set the Foreground Color to #b3d754 and Arial font 8pt.
![progressbar - how to create a minimal progress bar ui in photoshop progressbar2 How to Create a Minimal Progress Bar UI Photoshop](http://sanjaykhemlani.com/wp-content/uploads/2011/12/progressbar2.png)
I will leave the part of the glowing end of the progress bar on you, I bet you can do that! All you need is some “glow” and some “depth”, (I can’t tell anymore hints now 🙂 )
There you have it! A minimal Progress bar that you can use on you’re projects, you can change the colors and layouts of this one, or re-create your own. Pretty much this covers the basic idea when building your own progress bar.
I hope you’ve enjoyed this tutorial, and learned a few tricks as well. Feel free to comment if you have suggestions or want to show your end product.