Home | Hex color finder »
Easy web 2.0 style folder icon
By Ps graphiX | August 13, 2007
Ok, this is my first tutorial so don’t be to hard on me if anything should be done different. The images can be viewed larger if you click on them and that’s about all you should know except from that this is a Photoshop tutorial 
.
First, start with creating a new document with any size you want (I used 200*200) and fill it with a dark color or gradient. Then ewe are just going to create a square with the rectangular marquee tool and fill it with any color. It doesn’t matter cause we are going to add gradient overlay. Now you should have something that look like this:
Now you are going to shape this square so it gets a more 3d shape you will see the shape below together with the gradient overlay i used on the layer. And by the way, you can shape the layer by going to Edit>Transform> Skew, but i prefer to hold down Crtl while in Free transform. I kind of feel more free.
It might seem a bit weird, but you’ll understand if you scroll down the site. But NOW we are just going to duplicate this layer and then shape it just like we did with the first square. Try to make it so that they are about like the image below. Don’t worry if it’s not like mine. It might be better. Anyway you can change it later.
Duplicate this layer too and shape it. The only difference is that we are going to add drop shadow and change the gradient overlay. Below are the layer styles and how it looks now.
And there it is. An important paper in our important folder. Don’t forget to adjust/shape the layer so that it fits together as you are working. The next step is to just add more paper. Just duplicate the paper layer and shape it. Repeat this until you have about 4-5 papers. And there you have a folder!
But to make it cooler and more web 2.0ish, we’ll add some reflection. It’s not hard if you know how to do it, but if you dont know, folow these steps:
Create a new layer. Use elliptical marquee tool to select an area about like on the picture below and fill it with white (#ffffff)
Now, right-click the top layer of the folder in the layers palette (the one beneath that we just maked). Rember that you are going to click at the icon of it, not the text. You now have a selection of the top folder layer. Go to Select>Modify>Contract. Select about 3pixels and click ok. Right click the selection you now have, with a selection tool selected, and chose select inverse. And while having our reflection layer selected, click backspace.
I hope you’re still with me after that little step and now you should have something like this:
Now simply just lower the opacity to about 23% and you’re done! Of course you can continue customize it at your own and get another outcome. Hope you liked my tutorial, and a comment of what you feel right now would be appreciated 
And here is my outcome after doing this tutorial. I also added a little reflection at the bottom:
There are many web hosting websites like easycgi which are offering different web hosting packages for people looking for shared hosting solutions. They are also providing complete control, flexibility and high-speed connection & processing with the help of dedicated web server. Each web host provider makes different web advertising policy for different website according to their need and requirement in order to give complete marketing support as well as results. Before you sign up for any web host it is better to read their blogs and reviews like anhosting and Netfirms reviews in order to get a clear picture that which website hosting service is better and fulfills the requirement.
Topics: Photoshop Tutorials |
It’s a nice commenting feature here if you didn’t notice. Just kidding… but what do you think of the tutorial?
it’s a good clean tutorial. All it needs is the finished picture at the end and not just at the beginning. Also a zoomed in view would be great!
Ok. Since it’s you I’ll add a picture at the end. Not a bad idea…
I’ll do it tomorrow, or… it is tomorrow, but sometime after i wake up i guess.
EDIT: Fixed now!
Nice tutorial! quite easy but with very nice esthetic results
Skew option isnt easy to work with tho, but i think its about practice
Icons really makes the web page look n feel more attractive..thanks for the tutorial…!!!!
Well thanks for liking it and your comment
Excellent tutorial. Your step by step instructions were clear, with just enough verbage and pictures. Also, it was a wonderful exercise for mastering the ctrl+free transform tool.
Another way to do the top reflection is to just do an outer glow to the translucent ellipse.
Can you tell us how you did the bottom reflection?
Thanks for the comment!
Best of all comments in this pages one week history 
And it’s not a bad idea to make a tutorial about the bottom reflection actually. So I think I’ll make a tutorial about that soon.
Hey ya,
thnx for this, its the first tutorial i could make with photoshop, maybe because it is very clear and not like other tutorials who are more complex… thnx anyway
Yeah, I remember when I didn’t understand tutorials either. It’s actually under two years ago so just keep on reading tuts and you will find it fun to do almost whatever you want to in Photoshop
Thanks for this quality tutorial.
I Added it to my photoshop tutorial directory and attached a photoshop contest to it:
http://www.photoshoptalent.com/photoshop-tutorials/ext/
Ok. Hope someone click it and like it!
Nice tutorial dude! I going to try this in Fireworks.
Brilliant Tut
Didnt do last bit. So easy to follow 
Thanks for your comments!
This was nice…. But, come with more tuts like this one
plzz send different ideas for folder this is used in website, adjust the text and images in folder….