“Learn the difference between vectors and vexel designs in these amazing examples.”

 

Program used: Adobe Illustrator CS5 or CS4

Level: Beginners to intermediate

Time: One hour

Even if you don’t have much experience with Adobe Illustrator you can create this icon and use it for your mobile, tablet, or web site.

Final image:

 

TUTORIAL:

Creating the file

1- Open Adobe CS5 or CS4 and make a new document in 400 by 400 pixels (or any other size you wish, it is scalable).

 

2- Create a round corner rectangle with rounded rectangle tool or use Effect>Stylize >Rounded Corners.
I chose 40 pixel, but it is optional.

 

3- I used the following colors in linear gradient to give a silver metal effect.

4- with “Scale Tool”  copy and scale the main rectangle 85%:

5- Select both rectangles and choose  ”Pathfinder Divide” tool and separate the small rectangle out of the large rectangle behind it.

6-  Draw a cloud shape (like below) and fill it with above gradient . Color fill is not important at this stage and you can choose any color you want.

7-Place the cloud on top of the first rectangle and with ” Pathfinder Unite” tool, add it to the rectangle.

8- Duplicate the graphic and use following gradient colors, I added a blue swatch to the sliver color.

9- Send it back and nudge it to get following result:

10- Make another copy of the first rectangle and use this gradient and send it to the back of all of them.

11 – You should have the rectangle you created in step 3 through 5 when used the Pathfinder Divide, now select it and use the following gradient:

 

 

12 – Your image should like this at this point:

 

 

Creating the lock:

14 -Make a round rectangle and use following gradient to it.

As you see we added a little of blue color. This make the lock look real and show the reflection of the background.

 

15- Creating the top part of the lock:

Make a circle, doesn’t matter what color you use.  I used the same gradient.

Scale (85%) and duplicate it :

 

 

16- Now add another rectangle and cover half of the circles. I choose a different color to be clear.

With the ‘Pathfinder” select all and use the ” Divide” tool.

Delete all extra parts and just keep the half curve for the top part of lock.

 

17-For color, I used the following gradient values:

 

 Creating the hole:

18-Make a rectangle and a circle like below.

Then move up the rectangle to cover part of the circle:

19- With ‘”Direct Selecting” tool move the lower part of the rectangle out , and with Pathfinder Unite tool make it as one graphic:

 

 

20-Place it on top of the lock and choose “Pathfinder Divide” tool with the main lock rectangle:

 

21-Use following gradient to color the hole shape:

22- Nudge the darker copy to create depth

 23- I also duplicated the top part of lock and nudged, changed the opacity to 55% to give a depth to it.

Final Touch, Creating Stars :

24- To create stars,draw following shape and fill with white:

 

 

 

25- Use “Gaussian Blur” filter with following value and lower the opacity to 65%.

Copy it three times and put it below the lock above the blue background

 

Final Result:

 

Download Source file PNG, JPG, AI)