1. Basic Diskette Shapes
Step 1
Start with the Rectangle Tool (M) and draw an "almost square" (slightly longer than it is wide).In the Transform panel, and with the rectangle Selected, unlink the Live Corners. Set three of the four corners as Rounded with a Radius of 0.05 inches. The upper right corner should be set to Chamfer with a Radius of 0.15 inches.
Step 2
The shutter of the diskette (the sliding door bit) is created with three rectangles. The largest of the three has all four corners rounded at the same radius (this is the outer rectangle). In the final piece, the fill color will be set to black,the stroke to gray, and the Stroke Weight to 1-2pts.The middle one (seen as a line in the first image) has only the right corners rounded to match the largest rectangle.
The smallest rectangle is rounded on all four sides but is narrow and vertical rather than horizontal like the other two. Set the fill color to black and the stroke to null.
2. Diskette Details
Step 1
The left side of this disk design has another rectangle with mismatched corners. the two left corners are Rounded at 0.09 inches whereas the two right corners are at a 90° angle.
Step 2
With the Rectangle Tool, draw a small filled-in square in the lower corners of the disk. For the disk's label, draw a rectangle whose lower corners are 90° angles and upper corners are Rounded at 0.05 inches.
Step 3
Set the fill color of the main rectangle shape to black (or whatever you're using as your disk's overall color) and make sure other shapes that need to stand out have light stroke colors (see below).
3. Build the Walkman Shapes
Step 1
Start with a horizontal rectangle, drawn once again with the Rectangle Tool. Round the corners out in the Transform panel, or by pulling the Live Corners with the Direct Selection Tool (A) inward slightly.
Step 2
For the beveled portions of the plastic device, draw a narrow, horizontal rectangle in the lower half of the main rectangle shape. Round the corners slightly. Draw another thin, horizontal rectangle that has the same width as the main rectangle shape.
Step 3
Round the two lower corners of the narrow rectangle in the Transform panel. Bring them in as far as possible so they align with the other rectangle's corners. In this case, the Radii topped out at 0.23 inches, which aligned perfectly.
4. A Window Inside
Step 1
The beveled area that holds the window that looks into the Walkman starts with another rectangle, this time covering the top half (or so) of the base rectangle (see below for placement). The bottom two corners will remain at a 90° Angle. Use the Direct Selection Tool in order to Select and pull each corner inward as far as it can go, resulting in the window's rounded, yet flat shape.
Step 2
For the window itself, start with a rectangle, Round the corners to 0.1 inches or so, and use the Direct Selection Tool to carefully pull the top corner Anchor Points inward so the top corners are at an angle that mimics the outer bevel from the previous step.I pulled the top Live Corners as far as they could go, which led to moving the anchor points manually. The images below show the difference between manipulating the top two corners' Live Corners versus having moved the anchor points themselves afterwards.
5. Reel to Reel
Step 1
The reels inside are a series of ellipses. Draw them using the Ellipse Tool (L), stacking them on top of each other and Aligning their centers.Alternatively, you can draw one ellipse and Offset (go to Object > Path > Offset Path) the path of that ellipse by -4 pixels one time, and by -2 pixels three times following in order to get the stack of 5 ellipses. Either way you do it, Group (Control-G) together your ellipses and make sure there's two sets on either end of the Walkman's window.
Step 2
Select the window and window bevel shapes and hit Minus Front in the Pathfinder panel. Place the stacked ellipses from the previous step beneath the window in the Layers panel. Draw another rounded rectangle between the two ellipse stacks, beneath the window shape.
6. Final Details
Step 1
Now that we've got most of the shapes for the Walkman completed, I've changed the fill and stroke colors to my final choices. Most of the shapes have been filled in with black, stroke colors set to gray, and the Stroke Widths, set in the Stroke panel, are 1-2pts. All stroke Corners and Caps are Rounded.
Step 2
There are a series of buttons on the top edge of the walkman. Each is the same height (when not pressed), but vary in width. Draw rectangles across the top in varying sizes and one on the right edge.
Step 3
I found it easiest to Copy (Control-C) and Paste (Control-V) the rectangles across and shorten or lengthen their width accordingly, that way their height was uniform. Round the top two corners of each rectangle in the Transform panel.Step 4
Finally, there are two triangles that appear on the front of the Walkman. Use the Polygon Tool to a small, 3-sided figure of 0.12 inches (or more, or less depending on the size of your artwork and document). Use the Selection Tool (V) to pull the shape upward, causing it to become more narrow. Rotate it to the left. Copy and Paste the triangle and Rotate it all the way to the right. Place both on the front of the music player.
Well Done, You're Through!
With Live Shapes, changing the corners and general shape of rectangles and squares is easier than before. No longer does drawing an accurate representation of an early 90's era Gameboy require carefully positioning anchor points and manipulating handles. What else can you quickly create with basic shapes around your desk, bag, or home? Show us in the comments below!
