Vista Folder Icon

18 Comments
Icons, Web Graphics

Learn how to make a Folder Icon with the new Vista style

1. Start by opening up a new 100px * 100px file
2. Create a new layer and using the Pen Tool draw something like this
Photoshop Tutorials

3. Now let’s add some layer styles
- Inner Glow
Photoshop Tutorials

- Gradient: #ffd46f to fff29e
Photoshop Tutorials

- Stroke: #f4c65b
Photoshop Tutorials

4. It should look something like this now
Photoshop Tutorials

5. Now duplicate the layer with the shape. Go to Edit -> Transform -> Perspective
Photoshop Tutorials

6. Go to Edit -> Transform -> Scale and scale it down a bit so it looks like opened
Photoshop Tutorials

7. Now we’re going to add a piece of paper. Create a new layer and draw a rectangule like below
Photoshop Tutorials

8. Let’s add some layer styles
- Gradient: #000000 to #ffffff
Photoshop Tutorials

- Stroke: #d6d6d6
Photoshop Tutorials

9. It should look like this
Photoshop Tutorials

10. Now rotate the paper a bit. Go to Edit -> Free Transform
Photoshop Tutorials

11. Put the piece of paper layer under the duplicated folder shape
Photoshop Tutorials

12. Set the top folder layer’s opacity to 70%
Photoshop Tutorials

13. Now let’s “curve” the top corner of the paper. Delete a small part of the top corner
Photoshop Tutorials

14. Draw a shape with the Pen Tool to look similar to the one below(the one in black)
Photoshop Tutorials

15. Add this layer styles to the shape
- Drop Shadow
Photoshop Tutorials

- Gradient
Photoshop Tutorials

16. That’s it. Your folder icon should look like this
Photoshop Tutorials

Rate Tutorial:

1 Star2 Stars3 Stars4 Stars5 Stars

18 comments on this tutorial

nice tutorial and very good explained.

very nice tutorial!

Ballin’ stuff man. i love a good icon tut.

nice concept n beautifully presented…!!! thanks for the tutorial…!!!

That was great…

Thanks for this great tutorial.
I Added it to my photoshop tutorial directory and attached a photoshop contest to it.

[…] Tutorial donde nos enseñan a crear iconos al estilo del Windows Vista - pincha aqui para ver el tutorial […]

By Muhammad Usama

Ha Ha Ha ! Boo Yaa
This will help a hothead like me alot.So Slick and Crystal Clear.
Keep Rocking Brother.

the images are shit down, restablish please i love this tut

[…] Icône d’un dossier vista […]

Leave a Reply