Industrial Folder Style Icon

Industrial Folder Style Icon

Resources Used In This Tutorial

What We’ll Be Creating

Industrial Style Folder Icon

Getting Started

Start off with a new document (Ctrl + N) with a canvas size of 700 x 700 pixels. Fill (G) your background with your desired color, I’ve filled mine with a grey and white gradient.

Industrial Style Folder Icon

Creating The Folder Front

Select the “Rounded Rectangle Tool” (U) with a radius of 10px (10px by default), once you’ve selected the “Rounded Rectangle Tool” (U) change the path type to “Shape Layers”.

Industrial Style Folder Icon

Drag out a rectangle which is about 495×300 pixels, then go to “Edit > Transform > Perspective”. Select either the left or right bottom anchor points then drag them inwards by about 10-40 pixels.

Industrial Style Folder Icon

Once your happy with the perspective label your layer “Folder Front 1” then add the following layer styles.

Industrial Style Folder Icon

Industrial Style Folder Icon

You should have something like this.

Industrial Style Folder Icon

Creating The Second Folder Front

Right-Click your “Folder Front 1” layer then select “Duplicate Layer” from the menu. Select your duplicated layer then Right-Click and select “Clear Layer Styles” once the layer styles have been cleared label your duplicated layer “Folder Front 2”.

Select the “Move Tool” (V) then move your “Folder Front 2” layer down 5 pixels, you should have something like this.

Industrial Style Folder Icon

Now add the following layer styles to your “Folder Front 2” layer.

Industrial Style Folder Icon

Industrial Style Folder Icon

Industrial Style Folder Icon

You should have something like this.

Industrial Style Folder Icon

Creating The Folder Shadows

Select the “Elliptical Marquee Tool” (M) then make a small selection underneath the folder.

Industrial Style Folder Icon

Once you’ve made the selection create a new layer above your background layer and label it “Shadow”. Select the “Paint Bucket Tool” (G) and fill your ellipse with the color black #000000, then deselect the selection with “Ctrl + D”.

We now need to blur the ellipse, do this by going to “Filter > Blur > Guassian Blur” blur the ellipse by about 2-3 px. Finally change the layer opacity from 100% to 55%, you should have something like this.

Industrial Style Folder Icon

Creating The Second Shadow

Select the “Polygonal Lasso Tool” (L) then make a selection like the image below.

Industrial Style Folder Icon

Create a new layer above your “Shadow” layer then label the new layer “Shadow 2”. Select the “Paint Bucket Tool” (G) then fill the selection with the color black #000000.

Industrial Style Folder Icon

Set the “Shadow 2” layers opacity to 11% then add a layer mask to the layer. Once you’ve added the layer mask select the “Gradient Tool” (G) then drag a linear gradient over a the top of the shape. The look your going for is to have a small portion of the top area blend in or gradually disappear. You should have something like this.

Industrial Style Folder Icon

Creating The Folder Back

Select the “Rounded Rectangle Tool” (U) with a radius of 10px (10px by default) then drag out a rectangle behind your two front folder shapes. Label this new layer “Folder Back”.

Industrial Style Folder Icon

Select the vector mask thumbnail in the layers window, doing this will show a line around your rectangle. Select the “Rounded Rectangle Tool” (U) then change the settings to “Add To Shape Area”.

Industrial Style Folder Icon

When your set to go drag out a small rectangle in the top left corner, creating a small tab.

Industrial Style Folder Icon

Still with the “Rounded Rectangle Tool” (U) create two more small rectangles where the bottom of the first rectangle meets the “Folder Back” layer rectangle.

Industrial Style Folder Icon

Industrial Style Folder Icon

Again with the “Rounded Rectangle Tool” (U) only this time change the settings to “Subtract From Shape Area”.

Industrial Style Folder Icon

Drag two rectangles either side of the tab until the tab has rounded joining corners at the bottom.

Industrial Style Folder Icon

You should have something like this.

Industrial Style Folder Icon

Now add the following layer styles to your “Folder Back” layer to complete this step.

Industrial Style Folder Icon

Industrial Style Folder Icon

Industrial Style Folder Icon

Industrial Style Folder Icon

You should have something like this.

Industrial Style Folder Icon

Adding Metal Texture

Open up the “Texture” from the resources list then drag it onto your canvas.

Place the texture over your folder so that its all covered, then load a selection around your “Folder Front 2” layer.

Quick Tip:

To load a selection around an element click the little thumbnail inside of your desired layer whilst holding down the CTRL key on the keyboard.

Once you’ve loaded the selection around your folder go to “Select > Inverse”, once the selection has been inversed select your texture layer and hit the delete key.

Industrial Style Folder Icon

Finally set your textures blend mode to “Soft Light”.

Industrial Style Folder Icon

Creating And Adding The Custom Pattern

Create a new document (Ctrl + N) 25x25px then replicate the image below.

Industrial Style Folder Icon

Once you’ve replicated the image above go to “Edit > Define Pattern” then give your pattern a name and save it.

Head back to your folder icon canvas then select the “Rectangular Marquee Tool” (M), make a selection at the bottom of your folder about 10-20 pixels from the bottom.

Industrial Style Folder Icon

Select the “Paint Bucket Tool” (G), change the fill type to pattern then select your pattern from the list.

Industrial Style Folder Icon

Create a new layer above your texture layer and label it “Black and Yellow Lines”. Now fill your selection with your pattern.

Industrial Style Folder Icon

Chop away the excess pattern from outside of the folder just like we did with our texture. Once you’ve chopped away the excess pattern repeat the same steps and create a the same for the top of the folder. Finally once your done set the patterns blend modes to “Overlay”. You should have something like this.

Industrial Style Folder Icon

Creating The Rivets

Select the “Pen Tool” (P) then change the path type to “Paths”.

Industrial Style Folder Icon

Create a new layer and label it “Rivets”, then create four anchor points in each of the folders corners.

Industrial Style Folder Icon

Select the “Brush Tool” (B) then open up the brush settings window “Window > Brush” (F5) and apply the following settings.

Industrial Style Folder Icon

Close the brush settings window then right click on your canvas and go to “Stroke Path”, in the window that pops make sure the brush is selected in the drop down menu. Once you press OK right click once more and go to “Delete Path”.

Industrial Style Folder Icon

Now add the following layer styles to your rivets layer.

Industrial Style Folder Icon

Industrial Style Folder Icon

You should now have something like this.

Industrial Style Folder Icon

Adding Additional Detailing

You can finish off the icon by adding a little bit of text to the main folder area and the tab.

Industrial Style Folder Icon

Finally were going to add a reflection to the folder. Select your background layer then hide it, now press “Shift + Ctrl + Alt + E” which will take a snapshot of all your layers and place them onto one single layer. The new layer should of been added above your background layer if not then it will be in your layer stack somewhere.

Flip your snapshot vertically “Edit > Transform > Flip Vertically” then move it below the folder. To add abit of depth to the reflection blur it by 2px by going to “Filter > Blur > Guassian Blur”.

Industrial Style Folder Icon

Finally add a layer mask to your snap shot then drag a linear gradient from the bottom of the canvas upwards so the reflection blends in.

Industrial Style Folder Icon

Conclusion

Once you’ve completed this tutorial your finish icon should look something like this.

Industrial Style Folder Icon

Thank you for taking part in this tutorial, if you liked it then please promote it by retweeting, digging and sharing. Thank You.

Purchase Psd Now

About the Author Wilma Hamlin

Wilma Hamlin is a creative designer & writer. She writes for Crayonify. Being a designer as well she use to create amazing designs using many tools. In her lesuire time she love to read books and tries to learn new designs.

Leave a Comment:

15 comments
Chris M. says

Looks awesome, thanks for tutorial.

Reply
Richard Carpenter says

Thanks for your comment

Reply
roney says

thank you

Reply
Harminder Singh says

To much good……….
thanx…..

Reply
David says

Great tutorial. Was able to follow it easily. Great outcome too. You might add layer mask to black and yellow stripes layer rather than delete the excess.

Reply
mustapha says

thnaks for tutorial

Reply
musa says

thanks very good

Reply
anderson says

i like the style

Reply
web India says

Great tutorial, thanks a lot. I like it.

Reply
Sridhar says

It’s very Nice, but How to create it as a Icon file Please Help me

Reply
Raj Mehta says

NICE TUTORIAL

THANKS FOR SHARING WITH US

:)

Reply
Helen says

Thanks a lot for sharing! a very detailed tutorial~

Reply
Matt Sweeny says

These instructions were super helpful, thanks for sharing.

Reply
Rahul says

Good Tut. with detail description of each step.THANKS

Reply
fazal khan says

Overall it looks nice but this folder icon does not looks opened. It looks like one layer placed behind other layer.

Reply
Add Your Reply

Popular posts

css.php