Create a Download Folder Icon in Photoshop
Tutorial Details
- Program: Adobe Photoshop CS4+
- Difficulty: Beginner
- Estimated Completion Time: 1 Hour
Download Source Files
Final Product What You'll Be Creating
Icons are an important part of most interactive and web design. While icons are small, they can often be challenging to create. In today’s tutorial we will demonstrate how to create a download folder icon using different shapes and reflections in Photoshop. Let’s get started!
Step 1 – New File/Pen Tool Technique
Open Photoshop and set up a new document (Command/Ctrl + N). Use the following settings:
- Resolution: 72dpi
- Color Mode RGB color
- Dimensions: 600×600 px
Create the following shape using the Pen tool (P).
Step 2 – Creating Shapes Using Pen Tool
Draw the back part of the folder using the Pen Tool using the same drawing technique. Then draw the stripe as shown.
Step 3 – Finishing the Shapes
Once you have finished drawing your folder, go ahead and add the paper and arrow as shown. You should now have the following 5 layers. Each shape will be in its own layer. Be sure to give each layer a unique name.
Step 4 – Adding Colour Effects
Add the following layer styles to the front part of the folder. Lower opacity to 90%.
Add the following layer styles to the Paper. Lower the opacity of the layer to around 90-95%.
Add the following layer styles to the Stripe.
Add the following layer styles to the rear part of the folder.
Add the following layer styles to the arrow.
Your icon should now look like this.
Step 5 – Adding Reflections
Add a new group named "refs." Use the pen tool to draw reflections as shown. Make sure you draw your shapes as paths instead of shape layers (see arrow). After you have closed the path, right-click on the workspace and choose "make selection" (feather 0). Pick up a big brush (master diameter around 470, hardness 0) and brush round the right part of the selection as I did creating a white reflection. Change the blending mode to Overlay and reduce the opacity to 63%.
Step 6 – Margins
Create a new group named "margins," create a new layer in it (Command/Ctrl + Shift + N). Adding highlights on the margins emphasizes the effect of the 3d icon. Use the pen tool to create the stroke lines around the corners and all the margins of the folder, paper and arrow. Then, right-click on the workspace and choose stroke path – brush. The brush settings must be changed to 8 px master diameter, hardness 0.
Step 7 – Shadows
Create a new layer (Command/Ctrl + Shift + N) for shadows and place it into a new group (Command/Ctrl + G). Make selection as you did in step 5 for creating reflections. Fill the selections with black and then blur the margins using the blur tool. If the shadows look too strong, it means that you must lower the opacity of the layer to 40%.
Step 8 – Adding Text
Add text using whichever font you like. In this case, I chose "Agency FB." Font size: 40, Layer Opacity: 75%.
Step 9 – Add the Final Reflections and Shadows
Add some more reflections to the paper using the same techniques we demonstrated in Step 5.
Add a shadow using the ellipse tool (E). Draw an ellipse as shown and add a slight motion blur. Reduce the opacity to your liking.
Final Preview
I hope you enjoyed this tutorial. I added some additional icons that I created using the same techniques below.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Photoshop to HTML
Take your Photoshop skills to the next level by learning how to slice up a PSD into a working standards driven HTML website.
Join our newsletter!
U-Design WordPress Theme only $35.00 
Karma - Clean and Modern Wor ... only $35.00 
The Wrath - More
Photoshop Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Wow its really helpful for me…Thanks admin…wonderful
Thumbs up!
Excellent ! Very good tutorial ! I love it !!
how to use the icon after its done?
Great design vs Good design is all in the details. Adding little edge highlights here and there, and some gradients makes the design stand out therefore making it great.
Great turorial! Not very experienced using the pen tool so found it a bit tricky (and gave up half way through!) but will definitely give it another try soon!
It helps to get a design tablet.
I like the technique used for making the highlights and 3D illusion. Thanks!
thanks
nice
Great tutorial. Very much helpful for me, in sense of making these folders . Thank’s to admin.
wow this post very nice and cool
I like. No new techniques but at least i rly like the gradients. =)
Nice one.
Yeah, no new techniques but a really cool outcome.
Great tutorial
Bravo Tudore
ti-a iesit, puteai sa faci si luminile alea din forme vectoriale
Beginner difficulty you must be kidding me lol But thanks great tutorial!
Great tutorial!
It is good news for my psd
Hey guys! Thank you very much for all the good feedback ! Hope you will improve your skills using my techniques.
You can help your skill on making icons and than you can put your own ideas and create another one and upload it on graphicriver(Envato marketplace) for making sales and money !
Link to graphicriver ! Create an account now !
great one !!!!:D
Thanks for the tut.
Had fun with it :]
My Result:
http://i1094.photobucket.com/albums/i443/NeonTyphoon/FolderTuT.png
Great ! But you have to do some updates to make it more clean and catchy
In the places you added stroke path as white margins of the folder they look too blury and you have to lower the feather in some way.This will improve the 3d effect.
And add some more feather or blur on the shadow of the folder.It really looks nice ! You have changed the shape too
As for the font used it looks too basic and it is a little bit small so you should change it.
Thanks for the tips!
I thought the margin highlights weren’t bright enough.
Thanks! Thes is shadow: http://awesomescreenshot.com/00b8rudfa ?
I was reffering to the bottom one,the one that is placed on the ground and gives the floating effect
Nice technique but I had a hard time following your tutorial instructions. Fun little icon! thanx
Thanks! Very good tut
Nice tut!!
I really like it.Thank you very much
Great tutorial. Very much helpful for me, in sense of making these folders . Thank’s to admin.
Great ! But you have to do some updates to make it more clean and catchy
In the places you added stroke path as white margins of the folder they look too blury and you have to lower the feather in some way.This will improve the 3d effect.
And add some more feather or blur on the shadow of the folder.It really looks nice ! You have changed the shape too
As for the font used it looks too basic and it is a little bit small so you should change it.
Only starting to get used to this pen tool – thanks a mil. Loved every step!
Final result (brace yourselves, ha!) ->> http://i1124.photobucket.com/albums/l570/Client404/tutFolder.jpg
I think this tutorial is so effective. Great tutorial I am really like this tutorial….. Thanks for this kind of tutorial…….
thank you for the great tutorial…
here a link for free icons and templates:
http://www.bijusubhash.com/blog/category/downloads-2
Nice tutorial !! ^O^ I can make a delicate icon now! THX !!
Nice tutorial also shared on my website
http://www.linetoweb.com/how-to-make-a-cool-download-folder-icon-from-scratch-in-photoshop/
Creative Imaginations helpful for me…Thanks
This is a great post. This really made it so easy to make icons for me as I am just a beginner. I loved the way its all shown in each and every step. Thanks for sharing.
nice..so nice..