In this tutorial, I’ll show you how to create a gorgeous blueprint app icon in Illustrator. We’ll use rectangle tool, pen tool, gradient tool, and different options in the effect menu to achieve the final outcome. I hope you will learn some handy tips along the way. So, let’s get started!
Create a new document in illustrator by pressing Ctrl + “N”, with 600px width and 500px height.
We’ll begin with making the basic shape of our icon. Pick # D88A3D Fill color and make Stroke to “None”. Now select the rectangle tool to draw a rectangle on the canvas while pressing “Shift” key to get a perfect square. Label it as “Base Rectangle”.
Click the ring-shaped target present at the right side of respective layer to select it and go to “Effect”> “Stylize”> “Round corners”. Enter 50px value here.
Click on the Base Rectangle layer and select “Duplicate Base Rectangle” from the fly-out menu at the top right corner of layers panel. Now select the selection tool (V) and scale down the duplicated rectangle as shown below. Change its fill color to # FCAA3D and label it as “Top Rectangle”.
Next, we’ll apply subtle gradient on the top rectangle. Select the Top Rectangle and open the appearance panel (Shift + F6). Double-click the contents in the appearance panel to view the contents. Now click on the fill attribute and click the icon of “duplicate selected item” present at the bottom of appearance panel. After that, select the gradient tool (G) and apply following gradient on the new fill attribute.
Change the Blending mode of gradient attribute to Color Burn and decrease its opacity to 15%.
Next, we’ll make few highlights over the top rectangle. Click on the top rectangle layer to select it and press Ctrl+ “C” to Copy it and press Ctrl+ “F” to Paste in Front. Make another copy in the same way. Now click on the top most copy and drag it one-step upwards using the selection tool (V). After that, select both the copies and hit “Minus Front” in the Pathfinder panel (Shift+ Ctrl+ F9). Select the resulting shape and remove the gradient attribute in the appearance panel by dragging it towards the delete icon. Pick white fill color. Change its blending mode to overlay and decrease its opacity to 60%.
Make another highlight by make 2 copies of the top rectangle layer and moving the top most copy three steps upwards. Select both copies and hit “Minus Front” in the Pathfinder panel. Remove gradient and pick white fill color. Change its blending mode to overlay and decrease its opacity to 25%.
Select the Base rectangle layer and make another fill attribute for it in the appearance panel. Apply following gradient on it.
Change its blending mode to Multiply and reduce its opacity to 40%.
Next, we’ll do shading over the base rectangle the way we created highlights over top rectangle in step 5. Make two copies of the base rectangle. Move top copy one-step upwards. Select both copies and hit “Minus Front” in the Pathfinder panel. Remove gradient and pick Black fill color. Change its blending mode to soft light and decrease its opacity to 40%.
Once again make two copies, move top copy three-steps upwards and hit “Minus Front” in the Pathfinder panel. Pick black fill color with soft light blending mode and 25% opacity.
We’ll make wood texture now. Pick #BF6C1A fill color and draw a thin rectangle. Select it and go to “Effect”> “Distort & Transform”> “Transform”. Apply the given settings to make some copies.
Now go to “Object”> “Expand Appearance” so you can edit each rectangle freely. Now select these rectangles one by one and increase or decrease their width using Selection tool (V) to make varied thickness stripes. Once you are done, select the group and decrease its width to make narrowed stripes with the help of Selection tool.
Select the stripes group and pick the warp tool (Shift + R). Double-click the tool to adjust its settings as shown below. Now roughly apply it over the stripes.
Pick the Twirl tool now, double-click the tool and apply the given settings. Select the stripes group and make few knots as below.
Duplicate the stripes group and drag it towards right to cover the entire icon. Select both the stripes groups and choose “Collect in a new layer” from the fly-out menu. Label it as “Wood”.
Duplicate the wood layer and hide this copy. To confine the texture to the icon, duplicate the Base Rectangle layer. Make its fill color and stroke to “none”. Place it above the texture, select both the texture and rectangle layer and go to “Object”> “Clipping mask”> “Make”. Now select the group and change its blending mode to Color Burn with 25% opacity in the Transparency panel (Shift+ Ctrl+ F10).
Unhide the wood copy, select it and go to “Object”> “Transform”>“Reflect”, reflect it horizontally as shown below and move it a bit to get varied texture over the icon. Now apply top rectangle clipping mask to it. Change the blending mode of this group to Screen and reduce its opacity to 50%.
Go to “Window”> “Brush Libraries”> “Artistic”> “Artistic-ChalkCharcoalPencil” and choose “chalk” brush. Now select the Paintbrush tool (B) and apply randomly on a new layer with white stroke color. To confine the strokes to the icon apply clipping mask to them as explained in step 10.
Select the strokes group; change its blending mode to soft light and opacity to 50%.
Wooden board is ready, now we’ll create the blueprint paper effect. Make a rectangle above the rest of the layers using #1E6DF9 fill color and go to “Effect”> “Stylize”> “Round corners”. Enter 50px value. Now go to “Effect”> “Expand Appearance”.
Now draw a triangular shape shown below using pen tool. Duplicate the paper rectangle layer to preserve the original. Now select the duplicated rectangle and triangular shape and hit “Minus Front” in the Pathfinder panel.
Next, we’ll make graph paper pattern. Draw a small rectangle with # 71CCDB stroke (Stroke weight: 0.5pt). Select it and go to “Effect”> “Distort & Transform”> “Transform”. Apply the given settings here to make 4 copies aligned as below and go to “Effect”> “Expand Appearance”.
Now select all the rectangles and apply the given settings for “Transform”. After that, go to “Effect”> “Expand Appearance”.
Draw another rectangle confining all these rectangles with 1pt stroke. Now select all the rectangles and drag them to the symbols panel (Shift + Ctrl+ F11).
Select the blue paper layer and make a new fill attribute in the appearance panel. Choose the graph pattern as the fill and reduce its opacity to 75%.
Make another fill attribute and apply following gradient on it. Reduce its opacity to 30%.
Make another fill attribute for the paper and apply given gradient on it. Reduce its opacity to 15%.
Once again select the paper layer, click on the blue fill attribute in the appearance panel and go to “Effect”> “Stylize”> “Drop Shadow”. Apply the given settings here.
Draw the curved paper shape using pen tool with #4092F4 fill color.
Now select the curved paper layer and make a new fill attribute in the appearance panel. Apply same graph pattern on it and change its blending mode to soft light.
Make a new fill attribute above the pattern fill and apply given gradient on it. Reduce its opacity to 40%.
To make highlight over the curved paper, duplicate this shape and remove the pattern, gradient fills from the appearance panel and turn blue fill to #71CCDB. Duplicate it to get two white copies of the curved paper. Now move the top copy one step downwards and to the right. Select both copies and hit “Minus Front” in the pathfinder panel.
Make thin highlights for the graph paper the same way as explained in step 5.
Next, we’ll make few more graph papers. Unhide the original paper layer we’ve created in step 13 and apply the same drop shadow settings on it as applied in step 16. Apply graph pattern on it with 50% opacity and make highlights over it as shown below.
Duplicate these two graph paper layers, position these copies over each other and hit “Minus Front” in the Pathfinder panel. Remove all the attributes from the resulting shape and apply given gradient on it with 75% opacity.
Make few copies of the bottom graph paper and arrange them as you like.
Now you can add text, shape or other elements related to blue print as you like. I’ve added some text, used a gorgeous Bluprint font here.
Next, we’ll make shadow under the graph papers. Make a rounded rectangle with black fill color below the paper layers. Select it and go to “Effect”> “Blur”> “Gaussian Blur”. Apply 3px Gaussian blur effect on it and reduce its opacity to 75%.
Make shadow for the icon in the same way.
That’s it; our blueprint app icon is ready. I hope you enjoyed the tutorial and learned something useful. Do share your thoughts!