Create a Shiny Psdtuts+ Folder Icon in Photoshop
Tutorial Details
- Program: Adobe Photoshop CS3
- Difficulty: Intermediate
- Estimated Completion time: About 55 minutes
Download Source Files
Final Product What You'll Be Creating
Icon design is an essential element in any designer’s tool chest. No matter how simple or how complex your design is, a nice looking icon will almost always help to spruce things up. In this Photoshop tutorial we will demonstrate some easy steps to help you to produce your own shiny Psdtuts+ icon in Photoshop. These steps can be easily modified to produce a family of icons for your website.
Step 1
Start with a new document, I’ve used Width – 600px, Height – 600px. Take the Rounded Rectangle Tool (U), Radius- 20px, and draw a shape like this, modify the shape using the Add Anchor Point Tool, then move the new anchor points as shown.
Step 2
Hit Ctrl + Enter to make selection, fill it with color – #05b4ba and then apply a Gradient Overlay using a Layer Style.
Step 3
Name this Layer “Base”, Ctrl + Click on the Layer thumbnail to create selection. Now create a new later and name it “Outside Stroke”. Go to Edit > Stroke. Apply a Stroke of 8px, Location – Center. (You can use any color).
Step 4
Now we need to create a shadow of the layer “Outside Stroke”. To do this, you will need to duplicate that layer and drag it under the main “Outside Stroke” layer. Go to Layer > Layer Style > Color Overlay. Fill it with Black color. Now go to Filter > Blur > Gaussian Blur. Radius – 0.9 px. Change its Opacity to 7%. You should get something like this.
Step 5
Now again Ctrl + Click on the “Base” layer thumbnail. Create a new layer and name it “Glow Overlay 1″. Fill it with white color and move the selection down using your arrow key. Hit delete. Change its Opacity to 7%.
Step 6
It’s time for another glow light. Use the Pen Tool (P) and draw a shape like this. Name this layer “Glow Overlay 2″. Change its Opacity to 11%.
Step 7
Again Ctrl + Click on the “Base” layer. Create a new layer and name it “Box Glow”. Fill it with white. Go to Select > Modify > Contract, contract by 30px. Delete this area. Take the Eraser Tool (E), follow the next image.
Step 8
Optionally, you can add your own effects as shown.
Step 9
Our next step is to give it a glassy look. Create a new layer and name it “Glass”. Take the Rounded Rectangle Tool, Radius – 10px, change the layer blending mode to Lighten. See instructions in next image.
Step 10
Now we need to create the edge of the glass themed area. Draw the same shape using the Rounded Rectangle Tool, press Ctrl + Enter to make selection, go to Edit > Stroke, width – 1px, Location – Center, color – white. Change the Layer Blending mode to Overlay. Take Eraser Tool (E). See the next image.
Step 11
Now that the text has been typed out, it’s time to adjust some of the layers. Create a new Layer Group, name it “Object Front”, and then put all the layers inside it.
Step 11
Time for adjusting the layers. Create a new Layer Group, name it “Object Front” and put all the layers inside it.
Step 12
To create the back side of the object, we will next create a new layer under the “Object Front” group and name it “Object Back”, create a shape using Rounded Rectangle tool, then apply the following Layer Blending Styles.
Step 13
Now it is time to add another glow on “Object Back” layer. Something like this. Use the steps we laid out in earlier parts of this tutorial for this.
Step 14
Our next step is to apply a shadow to our back object. See the following image.
Step 15
Create a New layer Group, name it “Object Back” and put the layers inside it. After that, create the upper area of the folder icon by creating a new layer above the “Object Back” Group. Name it “Head”. Start using the Pen Tool, follow the next image.
Step 16
Ctrl + Click on the thumbnail of the Head layer, create a new layer and name it “Head Stroke”, Go to Edit > Stroke, width – 1 px, color – white. Now add some glow on the Head layer, try creating this one yourself.
Step 17
Now we will be creating our tag. To do this, follow the instructions on the image below.
Step 18
To create the rope, draw it using your pen tool and apply the hole’s Blending Style. (Used in Step 17.)
Step 19
To create the shadow of the tag, follow the steps laid out in Step 4 and erase the outer areas. Set its Opacity to 61%.
Step 20
Create a shadow for the folder icon just like this and place the layer at the bottom.
Final Image
You can create a family of icons using very similar techniques. Thank you! I hope you have enjoyed this tutorial.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Tanmoy Dey
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 
Modernize - Flexibility of W ... only $35.00 
When the storm comes - 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
Exceptionally poor results and needless use of raster elements. No mention of actual icon sizes, and a randomly chosen starting size (600px). No details about scaling down and neatening for required sizes. I’m not sure who this is aimed at at all; beginners shouldn’t be following this workflow because it will only limit them as they progress, and anyone of “intermediate” knowledge should easily spot the flaws here.
I don’t usually leave comments at all, let alone negative ones, but this is nowhere near the standard I would expect form Tuts and just doesn’t represent the correct workflow for creating something like a folder icon.
now before you make an inconsiderate comments to “FREE” tutorial, this tutorial is totally a great one with great details. He had some jagged edges or a bit less detailed parts but i think its a really good tutorial for intermediates..
i suggest dont even leave any comments whatsoever you are just a troll.
I agree with Dot. The icon looks horrible and I don’t think somebody shold learn by reading this. Just ask yourself Omer if this is worth 150$? I don’t think so.
Dot is totally right …
This is nowhere near a folder icon. This looks like he followed some kind of MSN Avatar style tutorial and came up with this…
I would have expected a higher standard from psdtuts
I also agree with him. I usually defends the tutorials for keeping in mind the beginners but this doesn’t look very good.
I’m glad this was the first comment because it’s the most truthful here. The tutorial and results are terrible and this should of never been published. A good Folder icon looks like a folder not like a bulging square on top of another bulging square.
PSD tuts has really lost its appeal to me. Yes it’s free and the premium content does look decent, but it doesn’t mean that the free content should be as bad as this and other tutorials published recently. I think the admin needs to up their quality control considerably.
Think you have some problem with, the page:
the page laods without any style and…
there IS NO IMAGES!
Hope you resolve the problems soon.
i had that problem with ie so try firefox or safari
i tried with firefox 3.6, crhome 4.0, and i see only plain and unstyiled text with no images..
very nice tutorial
for u Andrea just change your browser(opera is good)
Just wanted to confirm that Andrea posted – no images or stlye on this page.
Great tutorial… but ugly icon.
Yeah, I’d have to agree. This tutorial isn’t up to par with the standard of quality expected here on this site.
Wow the tutorial details at the top is such a lovely difference
But hey, that’s a folder? I think it would’ve passed off way better as a lunch box haha..The graphic is lacking in some serious depth that can’t be saved with a couple of shadows..
I totally agree with you! It looks like a lunch box
Very poor compared to other tuts here.
Sorry, This is utter Pap.
that’s ugly….
Yes, unfortunately I have to agree with the posts above, especially with Dot’s… This tutorial is poorly executed and the final effect is down right atrocious…
I love some of the techniques laid out by this tutorial, though I feel that the terminal application is pretty poor. An icon needs to tread that fine line between clarity, detail, and visual simplicity. In order to achieve optimal UX (user experience), you want the icon to be… well, iconic! It needs to be easily identifiable. In this case, the folder doesn’t LOOK like a folder. It looks like a shiny blue lunchbox, like Melody said.
The only thing that visually lends itself to being a folder is the little tab on the top…
The sides should be completely straight. I’ve never seen a folder with rounded sides. Also, perspective and shading is off. AND since this is an icon, which is probably meant to be a lot smaller in size and resolution, how much of those fancy details are going to actually come through?
Good effort, but one must always consider substance before style.
Good effort for beginners
Good work ! thanks for share.
It’s a good tutorial for showing how to achieve an effect. I’m hoping the rest of the posters aren’t just slipping into cynicism as they gain free knowledge…
Beauty is indeed in the eye of the beholder.
I’m just anxious for the day that the shiny effect is considered “old”. (It is already by designers, but clients unfortunately still want it.)
Thanks for free tutorials.
Great tutorial!
For those saying that it’s a good tutorial for beginners, please refer to DOT’s comment. This is not the way beginners should be learning photoshop at all. There are so many needless steps, and there are so many more efficient ways of doing this.
A folder should have no needless glares, reflections, or highlights. For something with this much “advanced lighting” it sure does lack depth. This just looks terrible.
Why has everything since 2008 been covered in a coat of resin? This comes off as a weak attempt to make a “2.0ish” icon, and looks forced, dated, and just plain unattractive.
Not only is this not an icon, as per Dot’s comment above, the shape, colors, shading and reflections are completely random. Instead, shapes, colors, shadows and reflections follow precise rules.
Intermediate to advanced designers immediately spot the lack of value in this work and complain its publication on such an influential website but beginners might be badly influenced. Let’s not encourage randomness and amateur work.
Full ACK
Nice tutorial,
I like how it’s explained.
This message goes to to all commentators. Hello, friends, I know this is a ugly or box like icon, I am not a super designer or something like this. But thanks to psdtuts.com who gave me this chance to publish my tutorial here.
I’ve tried to help the beginner users of photoshop.
I always thought that this site was shit, thanks to the tuts+ (more like tuts-) shit and the very slow rate of updates, but the new site format pretty much fucked everything up.
this is so so poor, doesnt really look like much of a folder, theres the style is all over the place
That looks nothing like a folder!
This is pure chaos; there are way too many things going on here. It doesn’t even really look like a folder…
It looks….. shiny! It looks like Windows 7 inspired folder, but its not my kind of cup.
The color is too bright.., but nice
lamest icon i’ve seen in Tuts.
but nice tutorial.. very easy to do
in other words, this “Picture” doesnt look like an icon at all.. actually in the first site i was thinking its a very very lame TV.
anyway, thanks!
Its not like folder, but look great
. Thanks for share
I think this is a fantastic tutorial! If nothing else, it was extremely easy to follow (some tutorials on this site don’t give clear steps) and teaches some Photoshop techniques that I would have otherwised not used.
If you’ve been using Photoshop a while, it should be fairly easy to modify the steps to make this a fully vector icon (perhaps using Photoshop shapes with Layer masks?).
Thanks to Tanmoy for stepping out there and doing this tutorial! Obviously TutsPlus thought it was good enough to post
.
This is not aesthetically pleasing at all, I am really surprised that this made it through the process and was published, maybe it made it because it had the word “tuts+” on the “Folder” I am not trying to disrespect the author, because I know how much work goes into preparing tutorials to be published, but I am just saying..it does not look like a nice folder anyone would want for an icon.
HAAHAHAHAH this guy is so amazing, make me a better designer. thanks for exist!
Eh, not my cup of tea really, too glossy and shiny. Thanks for sharing though, I’m sure it’ll help someone :]
To borrow a colloquialism, this tutorial is crispy-fried puke right down to the bone marrow.
Totally agreed. This tutorial is poor, compared to the rest of tuts+. Luckily tuts+ have a fan-base, and one lame tutorial wouldn’t send visitors away.
Not worth the $150 in my opinion.
Great tutorial, i’ve learnt to play with shadow in ps
I am not getting the finish touch
Nice tutorial
One retweet from me
Ugly icon, but good tutorial.
gr8, but i have some problem to finish it, hope in future we will get detail tutorial… Thanks
very good icon photos
very nice easy to follow this tut thanks
thank for tutorial
Wery Good Thanks.
Nice tutorial, but I think the glares are a bit overdone. It looks way too shiny for a folder.
Also if this was a real folder, the PSD tag would just fall because the rope isn’t around the folder, but on top of it. You could easily have avoided this by copying the hole in the tag and by making the rope go through it. But that doesn’t really matter, because it’s a tutorial and therefore it’s meant to learn you new techniques, not to look perfect.
More folder tutorial goodness
http://www.phoenixstudios.co.uk/blog/?p=502