In this Illustrator icon design tutorial we look at creating a small set of ‘almost flat‘ icons from scratch.

step-by-step

First, open the Adobe Illustrator and create a new document.

Then create a rounded rectangle using Rounded Rectangle Tool with:

  • Width:200px;
  • Height:155px;
  • Corner Radius:10px.

After that create another Rectangle with:

  • Width:36px;
  • Height:36px;
  • Rotate it 45°.

Unite the two shapes. Use Linear Gradient with:

  • Angle:-90°;
  • Gradient Slider:#3f7ebf, Location:0%; #3a54a2, Location:100%.

Copy new shape with Fill:#3954a1 and move it down at 20px.

Now add lights and shadows for back shape:

Copy front shape twice. Select one of them and move it up to 1px. Then select select both shapes and apply Minus Front from Pathfinder Panel. Use Linear Gradient with:

  • Angle:-90°;
  • Gradient Slider:#ffffff, Location:0%, Opacity:10%#ffffff, Location:39,9%, Opacity:100%.

add-3d-effect-1

 Create Rectangle with:

  • Width:10px;
  • Height:35px;
  • Blending Mode:Overlay.

Use Linear Gradient:

  • Angle:-180°;
  • Gradient Slider:#ffffff, Location:0%, Opacity:10%#ffffff, Location:30%, Opacity:100%; #ffffff, Location:100%, Opacity:0%.

Copy this Rectangle and apply Transform -> Reflect -> Vertical.

Need an expert icon designer?

Finding the right icon designer doesn't have to be difficult

Find your icon designer

Use Clipping Path to hide unnecessary corners.

add-3d-effect-2

 

Create Rectangle with:

  • Width:25px;
  • Height:20px;
  • Blending Mode:Overlay;

Select two anchors on the right side of this Rectangle and move them up to 25px using Direct Selection Tool.

Use Linear Gradient:

  • Angle:-180°;
  • Gradient Slider:#ffffff, Location:0%, Opacity:10%#ffffff, Location:100%, Opacity:60%.

Copy this Rectangle and apply Transform -> Reflect -> Vertical. Opacity:50%.

add-3d-effect-3

 

Create Rectangle with:

  • Width:105px;
  • Height:19px;
  • Blending Mode:Overlay;

Use Linear Gradient:

  • Angle:;
  • Gradient Slider:#ffffff, Location:0%, Opacity:0%#ffffff, Location:100%, Opacity:60%.

Copy this Rectangle and apply Transform -> Reflect -> Vertical. Set Width:6px.

add-3d-effect-4

comment-gif

 So our Comment Icon is ready. Place a logo on it.

We can do a set of icons for this style; just use other colours and change the shape:

 set-of-icons

Leave a Reply

Your email address will not be published. Required fields are marked *