Ever have problems staying organized? I know I do, so I’m here to help! In the following tutorial you will learn how to create a detailed folder vector icon in Adobe Illustrator. For starters you will learn how to setup a simple grid and how to create the main shapes using basic tools and effect. Moving on, you will learn how to add subtle shading and highlights using basic blending and vector shape building techniques along with some linear gradients and simple effects. Using the Rounded Corners effects and some basic stroke features you will learn how to create a simple paperclip and how to easily mask it. Finally, you will learn how to add a subtle shadow for the overall icon and how to easily recolor it. Getting all your things in order will be up to you. ; )

Tutorial Details: Folder Vector Icon

• Program: Adobe Illustrator CC
• Difficulty: Beginner-Intermediate
• Topics Covered: Basic Tools and Effects, Blending and Masking techniques
• Estimated Completion Time: 45 minutes

Final Image: Folder Vector Icon

As always, this is the final folder vector icon image that we’ll be creating:

Step 1: Folder Vector Icon

To start out this folder vector icon tutorial, hit Control + N to create a new document. Select Pixels from the Units drop-down menu, enter 600 in the width box and 900 height box and then click on the Advanced button. Select RGB, Screen (72ppi) and make sure that the Align New Objects to Pixel Grid box is unchecked before you click OK.

Enable the Grid (View > Show Grid) and the Snap to Grid (View > Snap to Grid). For starters, you will need a grid every 5px, so simply go to Edit > Preferences > Guides > Grid, enter 5 in the Gridline every box and 1 in the Subdivisions box. Try not to get discouraged by all that grid, it will ease your work and keep in mind that you can easily enable or disable it using the Control + “ keyboard shortcut.

You should also open the Info panel (Window > Info) for a live preview with the size and position of your shapes. Do not forget to set the unit of measurement to pixels from Edit > Preferences > Units > General. All these options will significantly increase your work speed.

Step 2

Pick the Rectangle Tool (M) and focus on your Toolbar. Remove the color from the stroke and then select the fill and set its color at R=39 G=170 B=225. Move to your Artboard and simply create a 100 x 20px rectangle, the grid and the Snap to Grid feature should ease your work.

Step 3

Using the same tool, create a 45 x 10 px shape and place it as shown in the first image. Focus on the right side o this new rectangle and switch to the Direct Selection Tool (A). Select the top anchor point and simply drag it 10 px to the left.

Step 4

Reselect both shapes made so far, open the Pathfinder panel (Window > Pathfinder) and click the Unite button.

Focus on the resulting shape and make sure that the Direct Selection Tool (A) is active. Select the anchor points highlighted by the green circle in the second image, move to the top bar and simply enter 8 px in that Corners box. Return to to your shape, this time select the two anchor points highlighted by the black circles and enter 4 px in that Corners box. In the end your blue shape should look like in the third image – the beginning of the tab portion of your folder vector icon.

Step 5

Make sure that your blue shape is still selected and make a copy in front (Control + C > Control + F). Using the Rectangle Tool (M), create a 55 x 15 px shape and place it as shown in the first image. Select this new rectangle along with the copy made in the beginning of the step and click the Intersect button from the Pathfinder panel.

Fill the resulting shape with the linear gradient shown in the following, keep in mind that the yellow zero from the Gradient image stands for Opacity percentage and then focus on the Appearance panel (Window > Appearance). Simply click on that “Opacity” piece of text to open the Transparency fly-out panel, lower the Opacity to 20% and change the Blending Mode to Soft Light.

Step 6

Disable the Snap to Grid (Shift + Control + “) and then go to Edit > Preferences > General and make sure that the Keyboard Increment is set at 1px.

Make sure that your blue shape is selected and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1 px down using the down arrow button from your keyboard. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Select the resulting shape and focus on the Appearance panel. Replace the existing fill color with a simple white, lower the Opacity to 60% and change the Blending Mode to Soft Light.

Step 7

Enable the Snap to Grid (Shift + Control + ‘). Using the Rectangle Tool (M), create a 90 x 5 px shape, set the fill color to R=245 G=245 B=240 and place it as shown in the following image.

Disable the Snap to Grid (Shift + Control + ‘), make sure that the rectangle made in this step is still selected and simply move it 1 px up using the up arrow button from your keyboard.

Step 8

Make sure that your rectangle is still selected, focus on the Appearance panel and add a second fill using the Add New Fill button. Select this new fill, drag it below the existing one, set the color to R=255 G=255 B=250 and then go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click the OK button.

Step 9

Make sure that your rectangle is still selected, focus on the Appearance panel and add a third fill using that same Add New Fill button. Select this new fill, drag it below the existing ones, set the color to R=235 G=235 B=230 and then go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click the OK button.

Step 10

Make sure that your rectangle is still selected, focus on the Appearance panel and add a fourth fill. Select this new fill, drag it below the existing ones, set the color to R=245 G=245 B=240 and then go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click the OK button.

Step 11

Make sure that your rectangle is still selected, focus on the Appearance panel and add a fifth fill. Select this new fill, drag it below the existing ones, set the color to R=225 G=225 B=220 and then go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image and then click the OK button.

Step 12

Reselect your rectangle, focus on the Appearance panel, make sure that the entire path is selected (simply click on that “Path” piece of text from the top of the panel) and go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the left window (in the following image), click the OK button and then go again to Effect > Stylize > Drop Shadow. Enter the attributes shown in the right window and then click the OK button.

Step 13

Reselect your blue shape and simply replace the blue with the linear gradient shown in the following image. Keep in mind that the white number from the Gradient image stands for Location percentage. Move to the Layers panel, find the shape edited in this step and rename it “backCover“.

Step 14

Enable the Snap to Grid (Shift + Control + ‘).

Using the Rectangle Tool (M), create a 110 x 70 px shape, pick a random blue for the fill color of the folder vector icon and place it as shown in the first image. Focus on the top side of this new rectangle and switch to the Direct Selection Tool (A). Select the left anchor point and drag it 5 px to the left and then select the right anchor point and drag it 5 px to the right.

Step 15

Keep focusing on your blue shape and make sure that the Direct Selection Tool (A) is still active. First, select the top anchor points, move to the top bar and enter 4 px in that Corners box. Return to your blue shape, select the bottom anchor points and this time enter 3 px in that Corners box. In the end your blue shape should look like in the second image.

Step 16

Make sure that your blue shape is still selected and go to Effect > Warp > Bulge. Enter the attributes shown in the following image, click the OK button and then go to Object > Expand Appearance.

Step 17

Disable the Snap to Grid (Shift + Control + ‘).

Make sure that your blue shape is selected and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1 px down. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Make sure that the resulting shape stays selected and focus on the Appearance panel. Lower the Opacity to 80%, change the Blending Mode to Soft Light and replace the existing fill color with white.

Step 18

Make sure that your blue folder vector icon shape is selected and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1 px up. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Make sure that the resulting shape stays selected and focus on the Appearance panel. Lower the Opacity to 30%, change the Blending Mode to Soft Light and replace the existing fill color with black.

Step 19

Enable the Snap to Grid (Shift + Control + ‘). For the following steps you will need a grid every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Rectangle Tool (M), create a 120 x 1 px shape, make it black and place it as shown in the first image. Make sure that this thin rectangle stays selected and go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image, click the OK button and then go to Object > Expand Appearance. Select the resulting group of shapes, Ungroup it using the Shift + Control + G keyboard shortcut and then turn those black rectangles into a simple compound path using the Control + 8 keyboard shortcut.

Step 20

Make sure that your blue folder vector icon shape is selected and make a copy in front (Control + C > Control + F). Select this copy along with your black compound path and click the Intersect button from the Pathfinder panel. Turn the resulting group of shapes into a new compound path (Control + 8), make sure that it stays selected and then focus on the Appearance panel. Lower the Opacity to 20% and change the Blending Mode to Soft Light.

Step 21

Using the Rectangle Tool (M), create a new, 120 x 1 px shape, make it white and place it as shown in the first image. Make sure that this thin rectangle stays selected and go to Effect > Distort & Transform > Transform. Enter the attributes shown in the following image, click the OK button and then go to Object > Expand Appearance. Select the resulting group of shapes, Ungroup it (Shift + Control + G) and then turn those white rectangles into a simple compound path (Control + 8).

Step 22

Make sure that your blue shape is selected and make a copy in front (Control + C > Control + F). Select this copy along with your white compound path and click the Intersect button from the Pathfinder panel. Turn the resulting group of shapes into a new compound path (Control + 8), make sure that it stays selected and then focus on the Appearance panel. Lower the Opacity to 30% and change the Blending Mode to Soft Light.

Step 23

Return to gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Using the Rectangle Tool (M), create a 120 x 70 px shape, place it as shown in the first image and pick a random yellow for the fill color. Focus on the top side of this new rectangle, switch to the Delete Anchor Point Tool (-) and simply click on the right anchor point to remove it.

Step 24

Reselect your blue shape and make a copy in front (Control + C > Control + F). Select this copy along with the yellow triangle made in the previous step and click the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 8% and change the Blending Mode to Soft Light. Remember that the yellow zero from the Gradient image stands for Opacity percentage.

Step 25

Using the Rectangle Tool (M), create a 120 x 45 px shape, place it as shown in the first image and pick a random yellow for the fill color. Focus on the top side of this new rectangle, switch to the Delete Anchor Point Tool (-) and remove the left anchor point.

Step 26

Reselect your blue shape and make a copy in front (Control + C > Control + F). Select this copy along with the yellow triangle made in the previous step and click the Intersect button from the Pathfinder panel. Fill the resulting shape with the linear gradient shown in the following image, lower its Opacity to 10% and change the Blending Mode to Soft Light.

Step 27

Reselect your blue shape and simply replace the blue with the linear gradient shown in the following image. Move to the Layers panel, find the shape edited in this step and rename it “frontCover“.

Step 28

Switch to gridline every 1 px, so go to Edit > Preferences > Guides & Grid and enter 1 in the Gridline every box.

Using the Rectangle Tool (M), create a 100 x 1 px shape, make it black and place it as shown in the first image. Make sure that this new shape stays selected, focus on the Appearance panel, lower the Opacity to 20% and change the Blending Mode to Soft Light.

Step 29

Let’s make a little embellishment for our folder vector icon. Using the Rectangle Tool (M), create a 10 x 40 px shape, make sure that it stays selected and focus on the Appearance panel. Make sure that there’s no color set for the fill and then select the stroke. Make it 2 px wide, pick a random blue for the color and then go to Effect > Stylize > Rounded Corners. Enter a 5 px Radius, click OK and then go to Object > Expand Appearance.

Step 30

Keep focusing on the rounded rectagle made in the previous step, pick the Add Anchor Point Tool (+) and simply click in the spot highlighted by the blue circle to add a new anchor point for your path. Switch to the Direct Selection Tool (A), select the two anchor points highlighted by the red circles and get rid of them using the Delete button from your keyboard. In the end your blue path should look like in the second image.

Step 31

Using the Rectangle Tool (M), create an 8 x 18 px shape, place it as shown in the following image, make sure that it stays selected and focus on the Appearance panel. Remove any fill color, add that same 2 px, blue stroke and then go to Effect > Stylize > Rounded Corners. Enter a 4 px Radius, click OK and then go to Object > Expand Appearance.

Step 32

Keep focusing on the path made in the previous step and pick the Direct Selection Tool (A). Select the four anchor points highlighted in the first image and get rid of them using that same Delete button from your keyboard.

Step 33

Reselect both blue path made so far and go to Object > Path > Outline Stroke. Make sure that the resulting shapes are selected and click the Unite button from the Pathfinder panel.

Step 34

Disable the Snap to Grid (Shift + Control + ‘).

Make sure that your blue shape is selected and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1 px down. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Control + 8) and set its color to R=120 G=120 B=110.

Step 35

Make sure that your blue shape is selected and make two copies in front (Control + C > Control + F > Control + F). Select the top copy and move it 1 px to the left. Reselect both copies made in this step and click the Minus Front button from the Pathfinder panel. Turn the resulting group of shapes into a compound path (Control + 8) and set its color to R=120 G=120 B=110.

Step 36

Make sure that your blue shape is still selected and focus on the Appearance panel. Select the fill, replace the existing color with R=80 G=80 B=70 and then go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the left window (in the following image), click the OK button and then add the other two Drop Shadow effects shown in the following image.

Step 37

Enable the Snap to Grid (Shift + Control + ‘).

Reselect all the shapes that make up your paperclip and Group them using the Control + G keyboard shortcut. Select this new group and place it as shown in the second image.

Step 38

Rotate your group 45 degrees and place it roughly as shown in the first image. Using the Rectangle Tool (M), create a 10 px, black square and place it as shown in the second image.

Step 39

Select your black square along with the group and open the Transparency panel (Window > Transparency). Click the Make Mask button and then uncheck the Clip box.

Step 40

Select all the shapes made so far and Group them using that same Control + G keyboard shortcut.

Step 41

Make sure that your group is selected and add the four Drop Shadow effects shown in the following image.

Step 42

Return to gridline every 5 px, so simply go to Edit > Preferences > Guides & Grid and enter 5 in the Gridline every box.

Using the Rectangle Tool (M), create a 110 x 20 px shape, place it as shown in the following image and then focus on the Appearance panel. First, select the fill, set the color to R=191 G=144 B=54 and lower its Opacity to 7%. Keep focusing on the Appearance panel, make sure that the entire path is selected (simply click that “Path” piece of text from the top of the panel) and go to Effect > Stylize > Rounded Corners. Enter a 10 px Radius, click the OK button and then add the two Drop Shadow effects shown below.

Step 43

Disable the Grid (Control + “) and the Snap to Grid (Shift + Control + ‘).

Open the Character panel (Window > Type > Character), pick the Type Tool (T) and simply click on your artboard. Select the MoolBoran font, set its size at 16 px and then add your piece of text. Set its color to R=191 G=144 B=54, make sure that it stays selected and focus on the Appearance panel. Lower the Opacity to 80% and go to Effect > Stylize > Drop Shadow. Enter the attributes shown in the following image and then click the OK button.

Step 44

If you prefer a blue version of the folder vector icon here are the changes that you should make. First, select the “backCover” and the “frontCover” shapes one by one and simply replace the existing linear gradients with the ones shown in the following image. Next, select the group, focus on the Appearance panel, open those Drop Shadow effects and replace the existing color with the one indicated in the following image. Finally, select the piece of text and replace the existing color with the same one shown below.

Step 45

Finally, if you prefer a red version, replace the existing colors with the ones shown in the following image – you can of course make these folder vector icon images in any color or style you want!

And We’re Done!

I hope you’ve enjoyed this folder vector icon tutorial and can apply these techniques in your future projects.