Photoshop: Minimal Loading Bar

Posted by | February 18, 2012 | content, Designing, Photoshop, Tutorials, Web Elements
minimal-loading-bar-ice-thumb

We’re going to go ahead and create a super cool little minimal loading bar in Photoshop. This bar will be created using a simple Shape Layer and Layer Styles so it will be very easy to edit and change so you’ll be able to use it on all kinds of different projects!

Create a Minimal Loading Bar – Photoshop Tutorial

This tutorial was inspired by: http://365psd.com/day/2-170/

Video

Step 1:

Create a new Photoshop document sized 1280px by 720px at a resolution of 72 pixels per inch. Fill the “Background” Layer with a light gray (I used #cfcfcf).

minimal loading bar 1 Photoshop: Minimal Loading Bar

Step 2:

We need to create a sweet background first because everything looks better on a sweet background! Create a new Layer and go Edit>Fill and choose to fill with 50% gray. Let’s name this Layer “4% Noise”.

minimal loading bar 2 Photoshop: Minimal Loading Bar

Step 3:

Go Filter>Noise>Add Noise and set the amount to 4%, Distribution: Gaussian, and Monochromatic ticked on. Hit “OK” and set the Layer Blend Mode to “Soft Light”.

minimal loading bar 3 Photoshop: Minimal Loading Bar

Step 4:

Click on the “Background” Layer and go Layer>Duplicate Layer and name it “8% Noise”. Drag this Layer above the “4% Noise” Layer in the Layers panel.

minimal loading bar 4 Photoshop: Minimal Loading Bar

Step 5:

Go Filter>Noise>Add Noise and set the amount to 8%, Distribution: Gaussian, and Monochromatic ticked off. Hit “OK” and set the Layer Blend Mode to “Soft Light”.

minimal loading bar 5 Photoshop: Minimal Loading Bar

Step 6:

Create a new Layer and name it “Swath”. Grab the Brush Tool and set the Brush to 500px size and 0% hardness. Set your foreground color to white and paint a mark just like I did.

minimal loading bar 6 Photoshop: Minimal Loading Bar

Step 7:

Set the “Swath” Layer Blend Mode to “Soft Light”.

minimal loading bar 7 Photoshop: Minimal Loading Bar

Step 8:

We need to create a little pattern for use later in the tutorial. Create a new Photoshop document sized 8px by 8px. Go View>Fit On Screen to zoom this all the way up to a better viewing size. Double click the “Background” Layer to unlock it.

minimal loading bar 8 Photoshop: Minimal Loading Bar

Step 9:

Create a new Layer and grab the Pencil Tool (located beneath the Brush Tool). Press the (D) key to set your foreground color to black. Use the Pencil Tool to draw three lines diagonally across the document just like I have.

minimal loading bar 9 Photoshop: Minimal Loading Bar

Step 10:

Select the “Layer 0” and drag it to the garbage can at the base of the Layers Panel. Next go Edit>Define Pattern and give your pattern a name.

minimal loading bar 10 Photoshop: Minimal Loading Bar

Step 11:

Close that pattern document (no need to save it!) and head back to our loading bar document. Grab the Rounded Rectangle Tool and set it to draw paths (second icon from the left in the Tool Options Bar) and set the Radius to 6px.

minimal loading bar 11 Photoshop: Minimal Loading Bar

Step 12:

Draw a path out in the center of the document. The ideal height for your path is 6px, you can drag out guides and measure it, or just take a guess and draw a size you like –let’s be dangerous and freehand this!

minimal loading bar 12 Photoshop: Minimal Loading Bar

Step 13:

Now that we have a path drawn out we can go Layer>New Fill Layer>Solid Color. Name this Layer “Track”. Let’s fill it with white.

minimal loading bar 13 Photoshop: Minimal Loading Bar

Step 14:

Next go Layer>Layer Style>Blending Options. Set the Fill Opacity to 0%.

minimal loading bar 14 Photoshop: Minimal Loading Bar

minimal loading bar 14b Photoshop: Minimal Loading Bar

Step 15:

Set a Drop Shadow, Inner Shadow, Outer Glow, and Inner Glow using the settings I have. Set a Color Overlay of #dbdae1 (or any light gray). That will create our track!

minimal loading bar 15 Photoshop: Minimal Loading Bar

minimal loading bar 15b Photoshop: Minimal Loading Bar

minimal loading bar 15c Photoshop: Minimal Loading Bar

minimal loading bar 15d Photoshop: Minimal Loading Bar

minimal loading bar 15e Photoshop: Minimal Loading Bar

minimal loading bar 15f Photoshop: Minimal Loading Bar

minimal loading bar 15g Photoshop: Minimal Loading Bar

minimal loading bar 15h Photoshop: Minimal Loading Bar

Step 16:

Go Layer>Duplicate Layer and then go Layer>Layer Style>Clear Layer Style. Name this duplicated Layer “Fill Color”.

minimal loading bar 16 Photoshop: Minimal Loading Bar

Step 17:

We need to size the fill down as if this loader was not quite finished loading. Grab the Direct Selection Tool (A) –you want to grab the white arrow. Click on the Vector Mask for the “Fill Color” Layer in the Layers Panel and drag a selection over the right side of the path and hold down your “Shift” key and tap the left arrow 9 or 10 times to back that fill up to about the half loaded point.

minimal loading bar 17 Photoshop: Minimal Loading Bar

Step 18:

Double click on color thumbnail of this Layer and fill it with the color #4281c8.

minimal loading bar 18 Photoshop: Minimal Loading Bar

Step 19:

Duplicate this Layer and we will begin applying our Layer Styles and finish this thing off! Add a Drop Shadow, Inner Shadow, Outer Glow, and Inner Glow using the settings provided below.

minimal loading bar 19 Photoshop: Minimal Loading Bar

minimal loading bar 19a Photoshop: Minimal Loading Bar

minimal loading bar 19c Photoshop: Minimal Loading Bar

minimal loading bar 19c2 Photoshop: Minimal Loading Bar

minimal loading bar 19d Photoshop: Minimal Loading Bar

minimal loading bar 19e Photoshop: Minimal Loading Bar

minimal loading bar 19f Photoshop: Minimal Loading Bar

minimal loading bar 19g Photoshop: Minimal Loading Bar

 

Step 20:

Next we want to reduce the Fill Opacity of this Layer to 0%. Go Layer>Layer Style>Gradient Overlay. Use the settings below.

minimal loading bar 20 Photoshop: Minimal Loading Bar

minimal loading bar 20b Photoshop: Minimal Loading Bar

minimal loading bar 20c Photoshop: Minimal Loading Bar

Step 21:

Next apply a Pattern Overlay and grab the pattern we created from the drop down. Use the settings I have.

minimal loading bar 21 Photoshop: Minimal Loading Bar

minimal loading bar 21b Photoshop: Minimal Loading Bar

Step 22:

Next Apply a Satin and Stroke using the settings I have.

minimal loading bar 22 Photoshop: Minimal Loading Bar

minimal loading bar 22b Photoshop: Minimal Loading Bar

minimal loading bar 22c Photoshop: Minimal Loading Bar

minimal loading bar 22d Photoshop: Minimal Loading Bar

Step 23:

That’s it! If we duplicate our three Layers and change the original “Fill Color” Layer it changes the whole look of the loading bar! TIP: Using desaturated medium brightness colors usually works best! Have fun with it!

minimal loading bar 23 Photoshop: Minimal Loading Bar

PHOTOSHOP TRAINING
OVER 400 FREE TUTORIALS

400
free videos
80
million video views
1
million followers

120 HD Photoshop Tutorials: $10! Buy Now!




Share Your Thoughts!

Loading Facebook Comments ...
Loading Disqus Comments ...
11,097