Create a Stylish Blueprint App Icon in Illustrator

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!

Resources:

Bluprint Font

Final result:

Blueprint App Icon

 

Step 1

Create a new document in illustrator by pressing Ctrl + “N”, with 600px width and 500px height.

Blueprint App Icon

 

Step 2

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”.

Blueprint App Icon

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.

Blueprint App Icon

 

Step 3

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”.

Blueprint App Icon

 

Step 4

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.

Blueprint App Icon

Change the Blending mode of gradient attribute to Color Burn and decrease its opacity to 15%.

Blueprint App Icon

 

Step 5

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%.

Blueprint App Icon

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%.

Blueprint App Icon

 

Step 6

Select the Base rectangle layer and make another fill attribute for it in the appearance panel. Apply following gradient on it.

Blueprint App Icon

Change its blending mode to Multiply and reduce its opacity to 40%.

Blueprint App Icon

 

Step 7

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%.

Blueprint App Icon

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.

Blueprint App Icon

 

Step 8

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.

Blueprint App Icon

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.

Blueprint App Icon

Step 9

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.

Blueprint App Icon

Pick the Twirl tool now, double-click the tool and apply the given settings. Select the stripes group and make few knots as below.

Blueprint App Icon

 

Step 10

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”.

Blueprint App Icon

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).

Blueprint App Icon

 

Step 11

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%.

Blueprint App Icon

Blueprint App Icon

 

Step 12

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.

Blueprint App Icon

Select the strokes group; change its blending mode to soft light and opacity to 50%.

Blueprint App Icon

 

Step 13

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”.

Blueprint App Icon

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.

Blueprint App Icon

 

Step 14

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”.

Blueprint App Icon

Now select all the rectangles and apply the given settings for “Transform”. After that, go to “Effect”> “Expand Appearance”.

Blueprint App Icon

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).

Blueprint App Icon

 

Step 15

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%.

Blueprint App Icon

Make another fill attribute and apply following gradient on it. Reduce its opacity to 30%.

Blueprint App Icon

Make another fill attribute for the paper and apply given gradient on it. Reduce its opacity to 15%.

Blueprint App Icon

 

Step 16

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.

Blueprint App Icon

 

Step 17

Draw the curved paper shape using pen tool with #4092F4 fill color.

Blueprint App Icon

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.

Blueprint App Icon

Make a new fill attribute above the pattern fill and apply given gradient on it. Reduce its opacity to 40%.

Blueprint App Icon

 

Step 18

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.

Blueprint App Icon

Make thin highlights for the graph paper the same way as explained in step 5.

Blueprint App Icon

 

Step 19

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.

Blueprint App Icon

 

Step 20

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.

Blueprint App Icon

 

Step 21

Make few copies of the bottom graph paper and arrange them as you like.

Blueprint App Icon

 

Step 22

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.

Blueprint App Icon

 

Step 23

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%.

Blueprint App Icon

 

Step 24

Make shadow for the icon in the same way.

Blueprint App Icon

Final Result:

Blueprint App Icon

That’s it; our blueprint app icon is ready. I hope you enjoyed the tutorial and learned something useful. Do share your thoughts!

 

Wordpress Themes - Wordpress Video Themes - Wordpress Travel Themes - WordPress Restaurant Themes