Welcome back to another retro icon tutorial! Last week we learned how to create a floppy disk icon, and today we’re going to learn how to create a compact disc icon, using some of the basic shapes and tools you work with on a daily basis.
So, boot up Illustrator and let’s get started!
Tutorial Details: How to Create a Compact Disc Icon
- Program: Adobe Illustrator CS6 – CC
- Difficulty: Beginner
- Topics Covered: Design Theory, Compositional Construction, Shape Alignment, Grid Positioning
- Estimated Completion Time: 25 Minutes
Final Image: Compact Disc Icon
Step 1
This is the second tutorial of our retro hardware series, where we’re learning to create a CD vector. The first step when learning how to create a compact disc icon is to set up a New Document. Head over to File > New (or by using the Control-N keyboard shortcut), which we will adjust like so:
- Number of Artboards: 1
- Width: 128 px
- Height: 128 px
- Units: Pixels
And from the Advanced tab:
- Color Mode: RGB
- Raster Effects: Screen (72ppi)
- Preview Mode: Default
Quick tip: most of the indicated settings can be automatically triggered if you set the document’s Profile to Web. The only setting you’ll have to manually adjust is the Artboard’s Size (Width x Height).
Step 2
Once we’ve set up our project file, we can start working on the actual icon, and we will do so by creating the background. Create the background by using a 120 x 120 px circle, which we will color using #F15A24, and then position to the center of the underlying Artboard.
Step 3
Add the main shape for the compact disc using a 60 x 60 px rectangle, which we will color using white (#FFFFFF), and then center align to the larger underlying circle.
Step 4
Create a smaller 12 x 12 px circle (highlighted with orange), and position it to the center of the circle from the previous step. Then, use it to create the inner cutout with the help of Pathfinder’s Minus Front Shape Mode.
Step 5
Give your new shape an outline using the Stroke method. Create a copy of itself (Control-C) which we will paste in front (Control-F) and then adjust by first changing its color to #2A323D. Then, flip its Fill with its Stroke (Shift-X) setting its Weight to 4 px, making sure to select and group the two shapes together using the Control-G keyboard shortcut.
Step 6
Add the inner ring detail using a 24 x 24 px circle with a 4 px thick Stroke, which we will color using #2A323D, and then center align to the disc’s larger body.
Step 7
Start working on the reflections by creating two 24 x 24 px squares which we will color using #2A323D and then position onto the opposite corners of the disc (as seen in the reference image below).
Step 8
Adjust the shapes that we’ve just created by individually selecting their inner facing anchor points. Do this by using the Direct Selection Tool (A) and then re positioning them to the center of the disc.
Step 9
Since we want the resulting shapes to remain confined to the fill section of the storage unit, we’ll want to put together a Clipping Mask capable of doing just that. Start by creating a 52 x 52 px circle (highlighted with orange), which we will position to the center of the disc (as seen in the reference image below).
Step 10
Cut out a smaller 32 x 32 px circle from the one that we’ve just created using Pathfinder’s Minus Front Shape Mode, which should give us the desired shape. Then, simply select both the reflections and the resulting mask and right click > Make Clipping Mask. Once you’re done, select and group (Control-G) all of the CD’s composing shapes before moving on to the next step.
Step 11
Finish off the project, by adding the circular shadow using a 36 x 4 px ellipse which we will color using #2A323D, and then center align to the disc, positioning it at a distance of 8 px from its bottom edge. Once you’re done, select and group all of the icon’s composing shapes together using the Control-G keyboard shortcut.
Awesome Work!
Congratulations! You now know how to create a compact disc icon quickly and easily. As always, I hope you had fun working on the project, and if you have any questions feel free to post them within the comments section and I’ll get back to you as soon as I can.
Nice One