Design a clean download progress bar in Photoshop

There are limitless ways of creating a download bar for a website using Photoshop. I will show you how to design a simple and clean looking version.

Create a new Photoshop document of any size.

I went for the 400 x 550 px.

Choose a color you will use for the progress bar background.

Choose the Rounded Rectangle Tool.

In the toolbar above set the Radius to 5 px and choose the white color (see picture).

Draw a rounded rectangle similar to mine.

This will be the shape of your progress bar.

In the menu click  Layer, Rasterize and choose Shape.

In the menu click  Layer, Layer Style and choose Drop Shadow....

Choose the same Drop Shadow settings as I did ..

Don't close the window yet.

In the left pane click the Inner Shadow and choose the same settings as I did.

Click OK to confirm the changes.

This is how it should look like at this point.

Press and hold the Ctrl key (Command in MacOS) then click the thumbnail of the shape layer to create a selection around the progress bar shape.

Now press and hold the Alt key (Option in MacOS) and create a selection similar to mine (from left to right).

This will remove the part of the existing selection.

At this point you you should have about 2 thirds of the progress bar shape selected.

Press Ctrl + J (Command + J in MacOS) to duplicate the selection into a new layer.

In the menu click Layer, Layer Style and choose Color Overlay...

Set Blend Mode to Normal, Opacity to 100% and now choose a color you want for your progress bar.

Click OK.

We will now create a little pointing field that will display the progress in numbers (percentage).

Create a new layer.

Choose the Rounded Rectangle Tool.

In the toolbar above set the Radius to 5 px and choose the white color (see picture).

Now draw a little rounded rectangle above the progress bar. The end of the progress bar should split the the rectangle right in the middle (see picture).

In the toolbar above look for the Shape and choose the same arrow pointing to the right as I did (see picture).

You probably won't see the arrow, you need to click the little down arrow and choose All to display all the available shapes.

Create a new layer (see step 12).

Draw an arrow of about the same size as I did.

In the menu click Edit and choose Free Transform then move and rotate the arrow so it will point down towards the end of the progress bar.

Hold the Shift key to help the arrow rotate the right way.

Press Enter to confirm the transformation.

Press Ctrl (Command on MacOS) and select the upper most two layers.

Then press Ctrl + E to merge them into a single layer.

Click to choose the progress bar layer, right-click it and choose Copy Layer Style.

Click to choose the uppermost layer (the merged one), right-click it and choose Paste Layer Style.

Choose the Horizontal Type Tool.

And enter a number of percentage into the progress bar pointer (see picture).

Done!