“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.
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.
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.
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.
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.
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:
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