Graphics & Design · August 29, 2007 2

How to create a Web 2.0 style Compact Disc (CD) image using Fireworks

IntroductionThis tutorial was created for an opensource site named AntiLost that a couple of my friends and myself had tried to launch a while back. While the site never really took off (and has been torn down long since), some of the material that were hosted there still remains with me. I was going through them yesterday and discovered this one. It’ll come real handy to a lot of the aspiring digital artists out there. So here it is in honour of my good buddy Twitch aka Michael Land, who happens to be the original author. Twitch is an excellent graphics / web-designer and has one of the most brilliant colour matching brain I’ve ever seen.

We’ll be using the vector graphics tool named Fireworks from Macromedia (now a part of Adobe).

Step 1

Launch Fireworks and create a new document in it. Set the width and height of the Canvas at 75px each and set the resolution at 72px/inch. As for the Canvas colour, set it to Transparent as it’ll enable you to place the final image over any other artwork you like. It’ll also make it easier for you to work with the Doughnut Tool later on.

Fireworks CD Image - Create Canvas

Step 2

Now, instead of using the standard Ellipse Tool Fireworks Ellipse Tool Icon to make the outline of a CD, we’ll use the Doughnut Tool Fireworks Doughnut Tool Icon, as the generated image contains an “empty” circle in the middle which allows for seeing objects placed behind it. With the Doughnut Tool selected, draw a simple doughnut shape on the canvas in the default Layer.

Fireworks CD Image - Doughnut Shape

Once done, adjust the X, Y Coordinates of the shape to 5px each. Then set the dimensions (width & height) to 65px – so that you doughnut shape nicely fits inside the canvas leaving some marginal area around.

Fireworks CD Image - Adjust Coordinates and Dimensions

Name this layer, CD Base.

Step 3

We have our basic CD. You may want to adjust the inner radius (of the little circle) so that it ressembles a CD all the more since the spindle hole of the CD isn’t as big as that of the doughnut shape. To do so, click and drag the Diamond Dot on the inner ring till you get a shape that satisfies you.

Fireworks CD Image - Adjust Inner Radius

Following the adjustment, the image should look like this…

Fireworks CD Image - After Adjusting Inner Radius

Step 4

Now that it looks a bit more like a CD, we’re going to add some colours to it. Feel free to use whatever colours you like – but keep in mind that you’ve to pick two tones (light & dark) of the same colour. To keep to the Web 2.0 style, you should pick pastel shades. For your doughnut, change the colour to Solid > Gradient > Linear.

Fireworks CD Image - Change Colour to Gradient

Make sure your gradient band is horizontal and not at an angle – or else, you won’t get the desired effect.

Fireworks CD Image - After Applying Gradient

When you’re ready, we’ll go ahead and change the gradient start and end colours. Make the first or beginning tag the lighter one while choose the darker colour for the ending tag. For our purpose, I’m going to pick #94CAE4 and #2F8EBD respectively.

Fireworks CD Image - Choosing the Gradient Colours

The recoloured CD image should now look like the following …

Fireworks CD Image - After Choosing the Gradient Colours

Step 5

Our CD is finally coming together. Although it may not seem like it, there are only a few steps remaining now. Next apply a Stroke. This doesn’t mean “stroke your screen”. By stroking, you add a solid line in the external regions of the figure so as to define the edges. So select your CD, choose a colour that is a triffle bit lighter than the darker shade of your gradient and apply a stroke of 1px thickness. If you’ve used the colour tones that I used, #388BB4 would be a good tone to use for the stroke.

Fireworks CD Image - Adding a Stroke

You should end up with an image like this…

Fireworks CD Image - After Adding a Stroke

Step 6

This is the easiest step. Go to the Filters Panel and drop a Shadow (follow Shadow & Glow > Drop Shadow). Leave the settings as they are.

Fireworks CD Image - Dropping a Shadow

The end effect should be like this…

Fireworks CD Image - After Dropping a Shadow

Step 7

This is the second hardest part of this tutorial, but if you’ve followed the guidelines so far you shouldn’t face any problems. Create a new Layer and name it CD Ring. Make sure it is placed above the last layer (CD Base). Selecting this layer, draw another doughnut shape smaller than the CD image but overlapping it. Be careful as to not cover the spindle hole. Give it a Solid Fill (I’ve used White#FFFFFF here). If the shape inherits a Shadow by default, simply remove the effect from it.

Fireworks CD Image - Adding a CD Ring

Next, adjust the dimensions, coordinates and inner radius of the doughnut so that it fits around the spindle hole of the CD like a narrow ring. This may take some effort but eventually you’ll get it right. For me, setting the dimensions to 30px each and the coordinates to 23 x 23 and then trivially adjusting the inner radius worked like a charm. Finally, apply the same Stroke colour as before. Here’s the result…

Fireworks CD Image - After Adjusting CD Ring

Step 8

The hardest of all ! Making the reflection segments. When I say hardest, I don’t mean you require an expert to do so. However, you’ve got to be extra careful with this one as it can make or break the whole effect.

Start by creating a new Layer named Reflection. Place this in between CD Base and CD Ring i.e. above CD Base and below CD Ring. Copy your larger CD from the CD Base layer and paste the copy in the newly created layer. Remove the Drop Shadow effect from it and give it a Solid Fill with White. Remove the Stroke too.

Fireworks CD Image - Setting Relfection Layer Parameters

Next set the transparency (opacity) of this shape to about 25%.

Fireworks CD Image - Set Reflection Layer Opacity to 25%

Here comes the fiddly part. On the doughnut shape, there’s a little Diamond Dot on the Outer Ring. Press and hold down the ALT key and drag the diamond a bit along the circumference to create a segment. If you’ve difficulty working with the dot, you can always Zoom In the image. A zoom of 300-400% should suffice. Now, from the end-point of the last segment, create another segment of a different (wider or narrower) circumference and do so till you’ve created 5 segments of varying circumferences.

Fireworks CD Image - Creating the Segments #1
Fireworks CD Image - Creating the Segments #2

The reason that you create 5 segments is that 2 of them in between will act as spaces (well, 6 segments & 3 spaces – if you count in the part between the last segment and the starting point).

Now switch to the Subselection Tool by pressing 1 or A on your keyboard. Select a segment which you consider a space (will show through to the bottom layer) and press Delete on your keyboard. You may get a warning – just go ahead and click OK.

Fireworks CD Image - Deleting the Segment Spaces

Delete two more such spaces till you get your perfect CD Image with alternating reflection segments. If you did everything right, you have your Web 2.0 style CD Image.

Fireworks - Web 2.0 Style CD Image

Note: One final touch-up. I noticed that the shadow was getting cropped a bit at the right and bottom edges. Increasing the Canvas size to 77px by 77px keeping the Anchor on the Top-Left did the trick.

If you require the original Fireworks file containing all the layers, simply right-click and save the final CD image. Opening it in Fireworks will reveal all the layers.

Have fun ๐Ÿ™‚