How to make a folder icon



The web is full of awesome icon stocks , but making you own is a great experience ..

It is worth mentioning that i use windows .. so Alt and Window keys are in the opposite positions from the Option and Command keys on a Mac keyboard

hope the tutorial will be simple & helpful :)

The final preview

Folder icon final preview

Step 1 .. a rectangular start

make a new document, activate smart guides ” Ctrl + U ” . now make a rectangle .. make a copy of it ” alt + drag ”

foldertut-01

Step 2 .. align

activate the align window ” shift + F7 ” , select the both rectangles by the selection tool ( the black arrow ) , now align them to left horizontaly
leave the window open .. we will use the path finder

Step 2

Step 3 .. round corners

select the top  rectangle, go to Effects > Stylize > Round corners.. give it a suitable value, i used 40 px.
expand it from Object > expand appearence , reposition & transform to get a nice rounded corners rectangle

Select both rounded & normal rectangles, go to the pathfinder .. add the two shapes by ” alt + add” .. make a copy of the final shape “alt + drag”

Step 3

Step 3'

step 4 .. left wing

select one of the shapes, now press alt + shift + drag up .. now you have a copy aligned horizontaly with it’s parent .. transform it to a smaller size (from it’s right angle) .. you will get something like the image below, do the (add) process again.

Step 4

Optional step :  you can adjust the nodes to make a better curve ..

Optional step

step 5 .. 3D

now we will use the 3D filter, select the left part of the folder, go to effects > 3D > Rotate .. give the angles this values : 4 , -40 , 11

do the same with the other part .. but change the X-axis angle like : 44, -40, 11 . give it another color & reposition it with the left part to get the folder shaped , now expand the both.

Step 5

hint: you may want to clean the objects after expanding .. go to the layers window, delete any clipping mask.. ungroup, now you are done with just two shapes.

Step 5'

step 6 .. something inside

we are now about coloring & adding some elements ..
i’ll add some papers inside .. make a rectangle with a gradient & stroke, copy it & (paste in front) = Ctrl + F , rotate the front object something,you may change the top paper gradient’s direction, now select the both & press (Alt + Ctrl + B) .. this will make a blend between them.
if you don’t like the result go to Object > blend > blending options & make it a one step blend .
now place papers between folder parts :) .

Step 6

color the folder as you like, i added some strokes & gradients.

Step 6'

hint: seeing gradient strokes ? just copy an object, paste it in back ” Ctrl + B “, transform it to a bigger size (not much) , change the direction of the gradient & change it’s color to add more contrast

Step 7 ..  label

adding label & a pattern to fill the white side.
_______

• making the pattern  :  draw a rectangle, deselect it, select rectangle tool again but with no fill nor stroke, draw another wider rectangle from the center of the previous one, select both & drag to the swatches pannel .
now select the white wing of the folder, go to the appearance panel, add a new fill, select the pattern from swatches, to rotate it just go to object > transform > rotate , give -60 to tha nagle & unckeck “objects” .for scaling .. doubl click on the scale tool &  do the same.
you may adjust it’s opacity from transparency tab.

foldertut-makpatt

foldertut-17

• adding the label : make a rectangle, rotate it with the 3D filter whith the angles
you gave to the white part of the folder, retransform & reposition then expand.
now type whatever you want by the type tool ” T ” & rotate it to suit the sahpe.

again, the final result

FolderIcon_final

hint : i added some lighting & shading effects which we will cover later, anyway .. the

file is available for downloading :) , enjoy !

download

any suggestions or questions ?? please post your comment :)





Related Posts










5 Comments »

5 Responses to “How to make a folder icon”

  1. [...] Popular posts How to make a folder icon [...]

  2. TheWebTuts says:

    Tutorial added to thewebtuts.com

  3. Abdo_Eldesokey says:

    IVO .. ent GAMEEEED

    wel site GAMEEEED

    Keep it up man

  4. Seth Haake says:

    Thanks for sharing, it’s a really informative publish and really helpful for some kind of businesses like mine. I really like when Quite possibly browsing the web and i appear throughout a web page with helpful issues such as this. Thanks a good deal for your exploration, I have noted a few of them the following so I can use them in a future. Kudos for you and sustain the good blogging function.

Leave a Reply ( in English please )