chaos
LABORATORY

This 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.

Step 2

Now, instead of using the standard Ellipse Tool to make the outline of a CD, we’ll use the Doughnut Tool , 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.

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.

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.

Following the adjustment, the image should look like this…

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.

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

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.

The recoloured CD image should now look like the following …

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.

You should end up with an image like this…

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.

The end effect should be like this…

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.

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…

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.

Next set the transparency (opacity) of this shape to about 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.

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.

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.

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