How to Design a Minimal Progress Bar in Photoshop

progress bar

In this tutorial, I`m going to show you how to create a clean and minimal 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.

Using a Progress Bar in your Application is a good way to interact with your users. Creating this from scratch is really easy, the good part is you can change the colors, designs, and layout according to your needs.

Progress Bar

progressbar2 How to Create a Minimal Progress Bar UI Photoshop

The Tutorial

1 canvas How to Create a Minimal Progress Bar UI Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

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 Photoshop

In Gradient, use this color.

11 gradient progressbar settings How to Create a Minimal Progress Bar UI Photoshop

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 Photoshop

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.

progressbar1 How to Create a Minimal Progress Bar UI Photoshop

To create the text, set the Foreground Color to #b3d754 and Arial font 8pt.

progressbar2 How to Create a Minimal Progress Bar UI Photoshop

Read more: How to Create a Minimal Progress Bar UI Photoshop – Sanjay http://sanjaykhemlani.com/how-create-minimal-progress-bar-ui-photoshop/#ixzz4YUiXcS9Q
Follow us: @sanjaykhemlani on Twitter | SanjayKhemlaniWebsite on Facebook

0 I like it
0 I don't like it