Creating a mobile icon in Illustrator

Illustrator, Photoshop by Farshad

Mobile In this tutorial I am going to tell you how can you make a mobile icon with Adobe Illustrator. At the end I will add some effects in Photoshop to finalize work. You can use these simple methods to create any icon you want. Hope this tutorial be helpful for you.

Beginning Work in Adobe Illustrator

First create a new document in Illustrator, then select Rounded Rectangle Tool from the Toolbar and select a color for Fill Color and select none for Stroke Color, then draw a rectangle with any size you want. Now choose Mesh Tool from Toolbar, select a brighter color than rectangle color and then click once on upper left corner of your rectangle. You should make something similar to this :

Gray Rectangle

Again choose Rounded Rectangle Tool and select blue color for Fill Color and none for Stroke color, draw a smaller rectangle inside the previous rectangle. Choose Mesh Tool and select a brighter blue and click on upper left corner of the blue rectangle. Like this :

Blue Rectangle

Now for creating keyboard I will use Rounded Rectangle Tool again and create some keyboard for my mobile like this picture :

Keyboards

Finalizing Icon in Photoshop

Create a new document with 250px width and 250px height in Photoshop. Please note :

I want to use Drag & Drop feature between Illustrator and Photoshop, if you are using CS2 versions or higher, you can benefit the very nice feature of Smart Objects.

While you have Illustrator and Photoshop open, drag every layer and drop it in your new created document in Photoshop. For example drag and drop gray rectangle, drag and drop blue rectangle, drag and drop keyboards and… After this you will have 3 Smart Object layers.

Now select your gray rectangle layer, right click on it and choose Blending Options, I will add Inner Shadow and Gradient Overlay to this layer, see these images :

Inner Shadow