Hello. In this tutorial we will use Adobe Illustrator CS4 to create the music icon of the Windows 7 style.
Step 1. -A base for the loudspeaker
First, select the Rounded Rectangle Tool and create a long rectangle with two semicircular sides. Then press Shift+F8 to open the Transform panel and shear it 15°. Suggestion: Press Ctrl+Y to view outlines in order not to get confused with fills. To return to normal view, press Ctrl+Y again.
Step 2.
Now rotate it as shown in the picture and use the Line Segment Tool to create a couple of guide lines simulating perspective as shown in the picture. Copy the rounded rectangle and paste reducing the size of that copy. Select lines and rectangles, open the Pathfinder panel (Shift+Ctrl+F9) and divide all with the Divide button. Press Shift+Ctrl+G to ungroup, delete unnecesary parts and unite (Unite button) the furthest part to get a rounded box shape.
Step 3.
Press G to slect the gradient tool and fill the main part with a linear gradient like in the picture. The brighest part should fit the orientation of the box. Then fill the front part with a black to gray linear gradient.
Step 4. The body of the speaker
To create the body simply press L to select the Ellypse Tool and draw a couple of circles as shown in the picture. Then select both circles and distort them a little reducing the width. Rotate them a bit and press the Unite button in the Pathfinder panel.
Step 5.
Now take a look at the picture and create a couple of guide lines, duplicate the resulting shape of step 4 and a rectangle intersecting the upper and lower points of the two shapes. Divide them, ungroup (Shift+Ctrl+G) and delete unnecessary parts to get the main body of the speaker.
Step 5.
Fill the resulting part as shown in the picture. Use black, gray and some patience to adjust scale and orientation of the fill.
Step 7.
Step 8.
Create two sections for the shines of the speaker's body and apply a mesh fill with the Mesh Tool (U) using gray and white. Then set the transparency (Shift+Ctrl+F10) to Screen at 55% opacity.
Step 8.
Use the shape generated in step 5 (with a fill value of rgb 31, 43, 81) to make the front part. Then hide the layer by clicking on the respective eye icon of the Layers palette while we prepare the glass part between the body and the front.
Step 9. Adding some glass
The base shape is a rounded rectangle deformed and rotated just a bit. Apply a linear gradient with the colors shown in the picture.
Step 10.
Give some depth to the panel duplicating, tracing guides and dividing like in step 7. For each side, apply a similar gradient but using darker blues.
Step 11.
Note that the right side of the panel has an extra shape to make it brighter. Simple duplicate that part and cut with the Knife Tool. Set the transparency of that part to Screen – 40% opacity.
Step 12.
To finish this part add a darker zone as in A and a brighter one as in B. The shape in B can be made intersecting two copies of the main shape (following the same procedure of step 10). Also for part B, fill with a white to blue gradient and set the transparency to Screen.
Step 13.
The big shine uses another copy of the main shape intersected with a curve line (created with the Pen Tool) and a white to blue fill. The Transparency has been set to Screen.
Step 14. Front and final part
Make visible the part created in step 8 and bring it to the front (menu Edit – Arrange – Bring to front). Create a smaller copy, fill it like in the first picture with white and light grays as shown in the first picture. Then use the technique of step 10 to create a tiny white boder, as in the second picture.
Step 15.
The cones are created simply with circles, properly deformed as in step 4, in three series. First, dark bases with black to gray radial gradient. Second, a light base for the bigger cone (use a gray to white radial fill). Third a black to dark gray radial gradient central oval at the big cone. Additionally put oval shines for both cones with dark gray to white linear gradients. Set the trasparency of these shines to Screen.
And this has been the process to create the music icon of the Windows 7 style.
November 10th
Great tutorial, I really like it
Thanks a lot!
November 11th
holy Crap, Windows 7 tuts already….Go G!
November 11th
love these tutorials… if only i had illustrator… lol!
November 11th
Our designer Alex does excellent tutorials. Stay tuned for next week. He has a killer!
November 12th
Alex rocks!
November 19th
Thanks Alex for showing us how to make such great looking icons.
November 22nd
ok im totally saving the link n going to try n see how far in this i can go in ptsp 7. i predict a headache but imma try it out…n yes i know 7 doesnt touch cs4 but i work with what i got and it obviously aint dough!
December 3rd
Hello from Miami! I just wanted to say this is a great blog. I’m a designer and I check it daily. Great job Iconshock!
March 22nd
Thanks for the article,Of course this is nice tutorials on web design
March 22nd
awesome tutorials
May 15th
Love the looks of the icon.. very futuristic haha. Lots of steps in this one though..
December 9th
I’m sorry but i can’t make this work-right from step 2.I don’t know how to get that shape after using \divide\.The guidelines will just disappear or leave lil traces inside the rectangles if they’re intersecting…Anyone tried it?It’s a shame I lost so much time trying to figure it out.It looked interesting in the beginning but it’s just a disappointment.The instructions aren’t sufficient.I don’t think it’s my inexperience in illustrator.
Next time try to make people’s lives a bit easier…
March 5th
nice tutorial
November 11th
April 23rd
July 2nd
October 3rd
September 24th
March 5th
November 12th