Follow this quick tip and you will learn how to create your own set of file icons. I picked out the mp3, avi and jpeg file formats but using the same technique you can create any other format you want. Let’s start!
Step 1
Start with a 256×256 px rectangle which will be the final size of the icons then take the Rounded Rectangle Tool and draw the pink rectangle inside. Select them both and click the Horizontal Align Centre and the Vertical Align Top buttons in the Align Panel. The small space between the two shapes at the bottom is needed for the corner of the second page.
Now, having the pink rectangle selected go to Object menu > Path > Offset Path and apply a -3 px Offset value. The resulting blue rectangle is the first file. To obtain the second one in back go to Object menu > Transform > Rotate, select a -5 degrees angle and click Copy. The bottom right corner fits perfectly inside the boundaries but the top left one doesn’t. To fix that select with the Direct Selection Tool (A) only the anchor points from that corner and move them down using the arrow key on your keyboard.
Step 2
Next take the Line Segment Tool (backslash key), click on your artboard and enter the values you see below. Select both the pink rectangle and this line and click Divide from the Pathfinder Panel then Ungroup from the Object menu. Delete the rest and keep only the corner shape. Basically, these are the three shapes that we will need next.
Step 3
Focus on the first page which is the blue rectangle. Take the Add Anchor Point Tool (+) and add the two points shown then select using the Direct Selection Tool (A) the other two points indicated and move them a bit up and to the left to distort the corner.
Select for the file in back a 0.5 pt white Inside Stroke and fill it with the linear gradient shown using gray shades. When you are done fill the corner shape with the other gradient shown.
Step 4
For the first file select a 0.75 pt white Inside Stroke and fill it with the gradient shown. Change the angle value then, if needed, move the dark gray slider until you see the shadow under the corner shape. Also adjust the last two sliders until the distorted corner looks like in the image.
Step 5
Having the first file selected go to the Appearance Panel, open the fly-out menu and choose Add New Fill. I used the 10 lpi 10% Pattern which can be found in the Swatch Libraries menu under Patterns > Basic Graphics > Basic Graphics_Lines. Change the Blending mode to Soft Light and reduce the Opacity to 60%.
Step 6
Next, zoom on the indicated area and draw with the Pen Tool (P) the two shapes as shown in the close-up. Do the same thing on the other side when you are finished.
Step 7
Select the corner shape and add a new fill as you did before. Keep the same gradient then go to Effect menu > Artistic and apply the Film Grain effect. Change the Blending mode to Hard Light. Copy and Paste in front the corner shape, delete the existing appearances then select both the corner shape and the one pasted and go to Object menu > Clipping Mask > Make. This way you get the sharp edges.
Step 8
Take the Ellipse Tool (L) and draw a 210×8 px oval shape then switch to the Convert Anchor Point Tool (Shift + C) and click on the left and right points to transform them to corner points. Drag the resulting shape into the Brushes Panel and choose New Art Brush.
Now, follow the corner shape and draw with the Pen Tool (P) the blue and the red paths you see below. Select the red one and stroke it using this art brush then reduce the Stroke weight to 0.1 pt. Choose Expand Appearance from the Object menu then fill it with the radial gradient shown. When you are done do the same thing for the blue path.
Step 9
Next go to Effect menu > Stylize and apply the Drop Shadow effect for each file.
Step 10
Take the Type Tool (T) and type the text using Arial Black, size of 30 pt then choose Expand and Ungroup from the Object menu. Having one of the letters selected, go to Object menu > Path > Offset Path and apply a -1 px Offset value. Copy and Paste in front the black letter, select both the smaller red path and the pasted letter and click Subtract from shape area > Expand from the Pathfinder Panel to obtain the red border. Do the same thing for the other two letters. When you are done fill all the border shapes with a linear gradient from white to black and reduce the Opacity to 30%. For the original black letters use the other gradient shown.
Group all the shapes and rotate them 45 degrees. Now you can place them on top of the corner shape.
Step 11
At this step you can draw your own musical note or you can use one from the library. Open the Symbol Libraries menu and under Document Icons find Music. Drag it into your working area and press the Break Link to Symbol button at the bottom of the panel then Ungroup it twice. Delete the other shapes and keep only the musical note. At this point the note is far too small therefore go to Object menu > Transform and Scale it about 510%.
Copy and Paste in front the note and give it only a red stroke. Take the Rotate Tool (R) and while holding the Alt key click on the indicated point to open the Rotate window. Here enter a -3 degrees angle and press Copy. Select both red paths and click Subtract from shape area > Expand from the Pathfinder Panel. You will obtain a compound path but go to Object menu > Compound Path > Release then delete the indicated shape because you don’t need it. Copy and Paste in front one more time the musical note and repeat this step only this time select a 2 degrees angle value.
Step 12
Fill the musical note with the linear gradient shown and also give it a 1 pt Stroke. Add a new fill, keep the same gradient and apply the Film Grain effect using the same settings shown at the step 7. Change the Blending mode to Hard Light. After you color the shapes obtained at the previous step as indicated go to Effect > Blur and apply a 1.5 px Gaussian Blur for all of them. Now you need to mask these blurry shapes to obtain the sharp edges. To do that, first Copy and Paste in front the musical note and remove the existing appearances then select all four blurry shapes and also the pasted note and go to Object > Clipping Mask > Make.
Step 13
Place the musical note on top of the pages then make a copy and scale it as shown. Now you need to mask the bigger musical note. Copy and Paste in front the first page and delete all the appearances. Select the note and the pasted page (that must be in front) and go to Object menu > Clipping Mask > Make. Change the Blending mode to Luminosity and lower the Opacity to 5%. You are done with the mp3 file icon.
Step 14
To create the other icons the process is similar. Basically just the color scheme is different and the main symbols. To create the movie symbol start with a 100×127 px rounded rectangle then draw the three yellow rectangles on top. Select them all and press the Horizontal Align Center button in the Align Panel to make sure they are centered then click Subtract from shape area > Expand from the Pathfinder Panel. Next draw the small squares on the sides then select everything and subtract again. Next, use the Rotate Tool (R) to obtain the blue and the red shapes just as you did at step 11 and fill them with the two colors shown. Apply a 1.5 px Gaussian Blur for all of them then use a copy of the movie symbol to mask them as you did before. In the image below you can also see the appearances for the movie shape which are the same as the ones for the musical note only the colors are different.
Step 15
For the pictures symbol take the Rectangle Tool (M) and draw two rectangles having the dimensions indicated. The bigger one in back has a white fill and a dark gray stroke and the smaller one is filled with the linear gradient shown. Duplicate these two rectangles to obtain the second picture behind it. Now, open the Symbol Libraries menu and under Flowers find Lotus and Orchids then drag them into your working area. The Trees symbol can be found under Nature. Press the Break Link to Symbol button then arrange the symbols on top of the pictures. Change the Blending modes as indicated then use a copy of the smaller rectangle to mask them. Now you can group all the shapes and place the pictures symbol on top of the pages.
Final Image
The work is done and here are the three file icons. If you want to scale them make sure you select Expand Appearance or Expand, depending on the case, for every shape that has an effect, pattern or stroke applied before you do that.
