Designing a media player skin in Fireworks

With multimedia becoming such a vital part of online communication these days, everyone is now using media players. Whether you are listening to MP3 files or watching digital videos, you are interacting with a system of controls to playback the media. When a media player interface is well designed, we rarely notice it at all—it is just the software being used.

Working as a designer is a wonderful opportunity to express yourself. Media players are often the main focus of a website. If you add creative flourishes to make your media player unique, you'll increase the aesthetic of the site and encourage more visitors to use it.

In this article, I'll take you through the step-by-step process I used to create a custom skin for a media player I recently designed. This particular interface is inspired by the first "Batman" movie, specifically based on the performance of Jack Nicholson in the role of The Joker.

This design features swooping wings and curved shapes that resemble the character's sinister smile. When I create flowing lines, I use the Pen tool. The drawing tools and Combine Paths feature provide a great deal of freedom when working with vector objects. And I use the Subselection tool all the time because it offers precise manipulation of Bezier curves. I also incorporate a wide range of layer effects, including Live Filters that are essential when designing user interfaces. For these reasons, Adobe Fireworks is my tool of choice because it combines all of these capabilities in one easy to use, efficient environment workflow.

This sample project to develop the media player skin is built entirely with vector objects. Since it involves creating many different types of shapes, and using a variety of design techniques, we'll get to take a look at many of the features in Fireworks CS3, such as the pen tool, live filters, layer effects, masks and styles. I've included step-by-step instructions and lots of screenshots, so you'll be able to follow along even if you are relatively new to working with Fireworks.

If you haven't already, download the sample files provided on the first page of this article. Uncompress the ZIP file and open media_player_skin.png in Fireworks CS3. This is the example of the media player that we'll be recreating. Open the Layers panel by selecting Window > Layers (or by pressing the F2 key). It consists six layers. So the first thing we need to do to recreate this file is to make all these layers in a new project.

Setting up the structure

Create a new Fireworks document by selecting File > New. Set the size of the canvas to 800 × 600 pixels and set the canvas color to white (#FFFFFF). Make a new layer by pressing the New Layer icon at the bottom of the Layers panel (see Figure 1).

Each time you press the button you create one new layer. Press the button five more times, to make a total of six layers (see Figure 2).

You can double-click on each layer to rename it. Rename each of the layers in your document with the names listed in Figure 3.

Click the lock icon to the left of each layer to lock all of the layers except one; leave the layer named Wings unlocked (see Figure 4).

The first step to begin drawing your media player skin is to create the outside contours of the wings. Select the Pen tool from the Tools panel, or press the P key on your keyboard to access it (see Figure 5).

In Property inspector set the stroke options to Pencil > 1-Pixel Soft. Click the color chip to select black (#000000) from the swatches (see Figure 6).

Draw a path as shown in Figure 7. As you refer to the screenshot, notice that only the anchor points marked with red circles have handles to create curved lines between them. Press and hold the mouse down to create the handles. In the Layers panel, double-click on the existing name and rename it Path 1.

Select the Subselection tool from the Tools panel, or press the A key on your keyboard to access it (see Figure 8).

Adjust the handles of the points to edit Path 1 until it resembles the example in Figure 9. Use the Subselection tool and Alt-drag (Windows) or Option-drag (Macintosh) to adjust the highlighted anchor points.

Don't worry if your path looks different than mine. You can modify the wings however you prefer. However, to keep your design in line with these instructions, the path must have six points (and five of the points should have handles).

Copy the path and then paste it to create a duplicate wing. In the Layers panel, rename the new path Path 2. Select Path 2 with the Pointer tool and press Shift while pressing the Up Arrow on your keyboard. When you hold down Shift and press an Arrow key at the same time, it is called "nudging." Each time you press Shift-Up Arrow the selected object moves 10 pixels upward. If you need to move the path one pixel at a time, simply press the Up Arrow without holding down the Shift key at the same time (see Figure 10).

Select Path 2 with Subselection tool, and then choose the Pen tool from Tools panel. Click at the bottom of the path to create one new point (see Figure 11). As you create the new point, press and hold the left mouse button to create handles for the point.

Adjust the handles of Path 2 using the Subselection tool, as shown in Figure 12.

Select the Pointer tool from the Tools panel. Select both paths and copy them. Then paste a new set of the two paths. While both of the new paths are selected, choose Modify > Combine Paths > Join (see Figure 13).

Select the new Composite Path you just created. In the Property inspector, set the fill color to Gradient > Ellipse. If you wish to follow along exactly, I used #FF8263 and #FF3300 (although you can choose any other color combination as desired). Set the edge to Anti-Alias. Set the texture to Line-Diag 2 at 9%. Set the stroke color to #B5BEC1 (or whatever you prefer), with a 1 pixel Basic > Soft Line. Set the Edge to 50, with no texture (see Figure 14).

Adjust the gradient handles to make your composite path look similar to Figure 15.

Select Path 2 in the Layers panel. Copy it, then paste it to make a duplicate. Rename the new copy Path 3. Move Path 3 in front of the Wings layer by selecting Modify > Arrange > Bring to Front (see Figure 16).

In the Layers panel, press the Shift key and select Path 3 and the composite path at the same time. Select Modify > Combine Paths > Crop (see Figure 17).

The goal of this skin is to end up with one red curve to the top and one at the bottom. As you create this composite path, you may find that you don't need some of the points. I discovered this as I designed my version, and so I simply removed the unnecessary point by selecting it with Subselection Tool and pressing the Delete Key (see Figure 18).

Press Shift and select Path 1 and Path 2 from the Layers panel. Use the Property inspector to change the color of their strokes to #B5BEC1 (see Figure 19).

At this point, the left side of the wings is complete. To quickly create the right side, select all by pressing Control-A (Windows) or Command-A (Mac). Copy the left wing, and then paste it to create a duplicate. While the new copy is still selected, select Modify > Transform > Flip Horizontal (see Figure 20).

After transforming the new set of wings, your design should look similar to the example in Figure 21.

While the new, right wing side is still selected, hold down the Shift Key and press the Right Arrow until the left and the right parts of the wings are just touching each other at the bottom (see Figure 22).

We've finished creating the wings. In the Layers panel, lock the Wings layer.

In the Layers panel, unlock the layer named Forehead & Chin. From the Tools panel, select the Ellipse tool (see Figure 23).

For now, the color is not important, so choose black #000000 as the fill color. Press Shift as you draw a circle that is 250 × 250 pixels, over the center of the wings (see Figure 24).

Copy the circle, and then paste it to create a duplicate copy. Select the new copy of the circle and choose Modify > Transform > Numeric Transform (see Figure 25).

The Numeric Transform dialog box appears. Set the percentage to 90% of its original size (see Figure 26).

Press Shift to select both circles. Choose Modify > Combine Paths > Punch. At this point, your design should look something like the example in Figure 27.

In Property inspector, set the fill to Gradient > Linear (using #FFFFFF and #5D5D5D). Set the stroke to 8 pixels, Basic > Soft Rounded line with #FFFFFF (see Figure 28).

Now we are ready to begin applying Live Filters. The Live Filters are available on the right side of the Property inspector and the option to add them appears every time you select an object. If your Property inspector is only showing the top portion, click the arrow icon on the bottom right side to expand it. The first Live Filter we'll add is the Inner Shadow (see Figure 29).

Click the plus sign (+) icon and select Adjust Color > Curves to add a chrome effect to the ring. Click the plus sign (+) icon again to select Shadow and Glow > Inner Shadow again, using the values shown in Figure 30.

In Property inspector, set the opacity of the ring to 42% (see Figure 31).

After making these adjustments, your ring should look like the one in Figure 32.

Move the ring until its top point is horizontally aligned with the top points of the wings. While the ring is still selected, choose the Scale tool from the Tools panel (see Figure 33).

Scale the ring as shown in Figure 34.

Press Shift and use the Ellipse tool to draw a new circle that is 225 × 225 pixels. In the Property inspector, set the fill color to a solid color (#BFBFBF). Set the Edge to Feather 3 (see Figure 35).

Move the new circle until its top anchor point touches the inner top anchor point of the chrome ring (see Figure 36).

Select the Scale tool again and scale the circle to fit inside the ring (see Figure 37).

Copy the circle inside the ring, and then paste it to create a duplicate. While the new circle is still selected, choose the Knife tool in the Tools panel (see Figure 38).

Cut the new circle horizontally in the middle by dragging the Knife tool between the two left and right anchor points (see Figure 39).

Select the lower part of the circle and delete it. Select the remaining upper part of the circle. In the Property inspector, set the fill to Gradient > Ellipse with the Edge set to Feather (10 pixels). Do not select a stroke. Edit the colors of the gradient fill to white (#FFFFFF) for both sides. Reduce the opacity to zero for the right side of the gradient (see Figure 40).

Adjust the linear gradient handles until they look like Figure 41.

We are ready to move on to creating the side panels, so lock the Forehead & Chin layer in the Layers panel. In the next section, we'll move on to create the side panels.

In order to create the side panels, we'll need to use the paths from the Wings layer. In the Layers panel, unlock the Wings and Side Panels layers. In the Wings layer, press the Control key (Windows) or the Command key (Mac) to select Path 1 and Path 2 for both the left and right sides (see Figure 42).

Copy the paths. Select the Side Panels layer and paste the paths. In the Wings layer, hide Path 2 for both sides of the wings by clicking the Eye icon (see Figure 43).

Lock the Wings layer. Now the Side Panels layer contains duplicate copies of the wing contours. Select Path 1 and Path 2 (only on the left side) and choose Modify > Combine Paths > Punch. The result should look similar to the example shown in Figure 44.

For this design we'll only need to use the outer path on the left. Select the other paths with the Subselection Tool and delete them (see Figure 45).

In Property inspector, set the fill to Gradient > Linear (colors: #000000 and #FFFFFF). Set the edge to Anti-Alias. Set the stroke to 1 pixel Basic > Soft Rounded using #B5BEC1 (see Figure 46).

Next, select Filters > Adjust Color > Curves. After updating the curves, use the gradient handles to reset the gradient's direction (see Figure 47).

Copy the path, and then paste it to create a duplicate. Select Modify > Transform > Flip Horizontal to flip it over, and then press Shift-Right Arrow to nudge it to the right side of the skin (see Figure 48).

Select the Pen Tool from the Tools panel. Draw a path as shown on Figure 49. Notice that only the points highlighted in red have handles. The color of the fill and stroke don't matter now, so set the fill color to None. Set the stroke color to black (#000000) with a 1 pixel Basic > Soft Line (see Figure 49).

Draw another path the same way, using the same properties. When you adjust the handles, keep in mind that this new path should cover the first one slightly at the bottom (see Figure 50).

Shift-click to select both paths and choose Modify > Combine Paths > Join. In the Layers panel, double-click the layer name of the composite path you just created. Rename it Path 1. In Property inspector, set the fill color to Gradient > Linear (colors: #000000 and #FFFFFF). Set the Edge to Feather with a value of 9. The stroke should be set to none (see Figure 51).

Add Live Filters to Path 1 to create a chrome effect. In the Property inspector, choose Filters > Adjust Color > Curves (see Figure 52).

Next, adjust the brightness and contrast of Path 1 by selecting Filters > Adjust Color > Brightness/Contrast (see Figure 53).

Back in the Property inspector, reduce the opacity to 79% and keep the default setting of Normal. Then, adjust the gradient handles to point in the direction as shown in Figure 54.

Select the Pen tool from the Tools panel. Set the stroke color to None and select a 1-pixel Soft Line. Draw a path as shown in Figure 55, so that it is only touching Path 1 at the top left point. Use the Subselection tool to adjust the handles of the marked points below. In the Layers panel, rename the new path you just created as Path 2 (see Figure 55).

Select Path 2. In Property inspector, set the fill color to Gradient > Linear (using colors #000000 and #FFFFFF), set the Edge option to Feather with a value of 9. Path 2 does not have a stroke (see Figure 56).

Drag the gradient handles to adjust the gradient direction as shown in Figure 57.

For the next part, we'll take advantage of the masking feature in Fireworks. Select Path 1 and copy it (choose Edit > Copy). Then select Path 2 and select Edit > Paste Inside (see Figure 58).

At this point, your design should look similar to the one shown in Figure 59.

By default, Fireworks pastes the masked object with 100% opacity. In this example, Path 2 is the mask and Path 1 is the masked object. If you wish to change the properties of the mask itself, you can click the mask's thumbnail in the Layers panel. When it is selected, it simultaneously displays a green highlight around the mask's thumbnail and a green highlight around Path 2. Use the Subselection tool to make adjustments to the points as desired (see Figure 60).

To change the properties of the masked object, click on its thumbnail in the Layers panel. When it is selected it will display a blue highlight around the mask thumbnail and around the masked object (Path 1 in this case). If you'd like to adjust the position of the masked object, click the center of the selector with the Pointer tool (see Figure 61).

Draw a path with the Pen tool like the one shown in Figure 62. In the Property inspector, set the fill color to None and set the stroke color to black (#000000) with a 1 pixel Basic > Soft Line. Use the Subselection tool to adjust the handles of the highlighted points. In the Layers panel, rename the new path you just created as Path 3.

In the Property inspector, add a gradient fill to Path 3, using the settings shown in Figure 63.

Next, add Curves and adjust the Brightness/Contrast settings. Then reduce Path 3's opacity and change the direction of the gradient fill, using the options shown in the screenshots in Figure 64.

Use the Pen Tool to draw a path similar to the one shown in Figure 65. If you need to adjust the handles of the highlighted point, use the Subselection tool. In the Layers panel, rename the path you just created Path 4. While Path 4 is selected, use the Property inspector to set the stroke color to gray (#7E7E7E) with a 3-pixel width, using the Soft Rounded setting.

Now we need to add a blur effect to Path 4. In the Property inspector, click the plus sign (+) icon to add a new Filter, and choose Blur > Gaussian Blur (see Figure 66).

In the dialog box that appears, set the Blur radius value to 6.8 (see Figure 67).

Use the Pen tool to draw a path as shown in Figure 68. In the Property inspector, set the fill color to None and set the stroke color to black (#000000) with a 1 pixel Basic > Soft Line. Use the Subselection tool to adjust the handles of the highlighted points. In the Layers panel, rename the path you just created as Path 5.

In the Property inspector, set the fill color of Path 5 to a Linear gradient (colors: #000000 and #FFFFFF). Set the fill's Edge to Feather with a value of 2. Do not set a stroke color (see Figure 69).

Add Curves, adjust the Brightness/Contrast and reduce the opacity of Path 4 (see Figure 70).

Now we need to change the direction of the gradient. Drag the handles of the gradient to make them display in a vertical direction (see Figure 71).

At this stage, the left part of the Side panels layer is complete. To make the right side, select Path 1, Path 3, Path 4 and Path 5 (be sure not to select the mask) with the Pointer tool. Select Edit > Copy to copy these elements to the clipboard, and then paste them on the canvas to create a duplicate copy.

If you are having difficulty selecting the paths on the canvas, you can also select them in the Layers panel. While the new pasted version is still selected, choose Modify > Transform > Flip Horizontal to change the horizontal orientation. Then, hold Shift while pressing the Arrow keys to nudge all of the pasted elements as a single group, and place them to the right of the center circle (see Figure 72).

It's looking better, but we still need to make some adjustments. We'll use a flipped copy of Path 2 to fill the empty space. We previously created Path 2 as part of the mask on the left side of the skin (see Figure 60). Select Path 2 with the Pointer tool (it should highlight in green) and copy it, then paste a copy of it on the canvas. As you can see, the new copy of Path 2 doesn't have a mask. While the new copy of Path 2 is selected, choose Modify > Transform > Flip Horizontal to flip its orientation. Use the Shift and Arrow keys to nudge Path 2 until it fits in place.

Now repeat the steps above to create the mask on Path 2 for the right side of the skin. Use the Subselection tool to adjust the anchor point handles. At this point, the skin should look something like the one shown in Figure 73.

We've finished creating the side panels, so we can lock the Side Panels layer in the Layers panel. Click the lock icon to the left of the layer to lock it. In the next section, we'll create the user interface buttons to complete the skin.

In this part we'll focus on creating the buttons that the user will interact with to control the media. Click the lock icon to unlock the Buttons & Bars layer from the Layers panel. In order to see the details, you may find it easiest to use the Zoom tool to magnify the area for the next step. Press the Z key to access the Zoom tool, then click-drag around the region of the canvas that you wish to view. Use the Pen tool to draw a path as shown in Figure 74. In the Property inspector, set the fill color to gray (#5D5D5D) Solid. Set the stroke to None. Use the Subselection tool to adjust the anchor point handles to create a contoured triangle.

In the Layers panel, rename the new path Previous button. Click the plus sign (+) icon to add an Inner Shadow, a Glow and a Drop Shadow using the settings shown in the screenshots (see Figure 75).

After applying these Live Filters, your design should look something like this (see Figure 76).

Copy the Previous button. Then paste it to create a duplicate copy. In the Layers panel, rename the new copy of the path Previous overlay.

In the Property inspector, set the blend mode of Previous overlay to 71% Overlay. Press the Left Arrow key twice to nudge it 2 pixels to left. Then choose Modify > Arrange > Send Backward. The Previous overlay adds more depth to the Previous button, and it also makes it stand out from the background of the media player skin (see Figure 77).

Select both the Previous button and the Previous overlay with the Pointer tool. Copy both items, and then paste them to create a duplicate copy. Choose Modify > Transform > Flip Horizontal to change the copy's orientation. Use the Right Arrow key to nudge the copied paths, to move them right. In the Layers panel, rename the copied elements Next button and Next overlay, respectively. After flipping and moving the Next button and its overlay, your skin should look similar to the one shown in Figure 78.

Use the Rectangle tool to draw a rectangle with a width of 5 pixels and a height of 20 pixels. In the Property inspector, set the fill color to gray (#353535) Solid. Set the stroke to None. Place the rectangle in the very center of the skin (see Figure 79).

Copy the rectangle, and then paste it to make a duplicate copy. Press and hold the Shift key while pressing the Right Arrow key once to nudge the copy of the rectangle 10 pixels to the right (see Figure 80).

Use the Pointer tool to select both rectangles, and then choose Modify > Group. In the Layers panel, rename the group Pause button. Click the plus sign (+) icon to add a Glow and a Drop Shadow filter, using the settings shown in Figure 81.

Select Window > Align to open the Align panel. In the Layers panel, select the Previous button, Next button and Pause button. Back in the Align panel, click the icon to Distribute horizontal center to align the three buttons (see Figure 82).

At this point, your media player skin should look something like this (see Figure 83).

Press the Z key to access the Zoom tool. Click the Zoom tool to view the document at 400% magnification, so you can see the details of the Pause button. Use the Rectangle tool to draw a rectangle below the Pause button that has a width of 15 pixels and a height of 3 pixels. In the Property inspector, set the fill color to gray (#353535) Solid. Set the stroke to None. Use the Pointer tool to move the rectangle so that it is located directly below the Pause button and just above the bottom edge of the skin (see Figure 84).

In the Tools panel, select the Polygon tool (see Figure 85).

In the Property inspector, set the Shape to Polygon and set the Sides to 3 (to create a triangle). Do not uncheck the Automatic check box, it should remain checked. After updating the settings, draw a triangle as shown in Figure 86.

Press the Up Arrow to nudge the triangle upwards until there is one pixel space between it and the rectangle. Use the Subselection tool to select the top anchor point of the triangle's point, then press the Down Arrow key twice to move the point 2 pixels down. Select both the triangle and the rectangle and choose Modify > Combine Paths > Join. In the Layers panel, rename the new path Open button (see Figure 87).

Click the plus sign (+) icon to add an Inner Shadow, a Glow and a Drop Shadow, using the settings shown in the screenshots in Figure 88.

After applying the Live Filters, the Open button should look something like this (see Figure 89).

Use the Rectangle tool to draw a rectangle with a width of 250 pixels and a height of 12 pixels. In the Layers panel, rename the path s_bar. In the Property inspector, set the fill to Gradient > Bars (colors: #5D5D5D and #B5BEC1). Set the Edge to Anti-Alias and set the Texture to Grid 4 at 30%. Do not check the Transparency check box. Set the stroke to None. Set the Rectangle roundness to 100 (see Figure 90).

Click the plus sign (+) icon to add the Inner Shadow filter twice, using the settings shown in Figure 91.

After applying the Live Filters, the s_bar should look like the one shown in Figure 92.

Use the Zoom tool to view your document at 400% magnification so that you can see the s_bar in detail. Use the Rectangle tool to draw a rectangle with a width of 1 pixel and a height of 10 pixels. In the Property inspector, set the fill color to gray (#E6E7E7) Solid, and set the stroke to None. In the Layers panel, rename the new rectangle divider. With the Pointer tool, drag the rectangle so that it lines up vertically within the s_bar element (see Figure 93).

Copy the divider (Edit > Copy). Press Control-V (Windows) or Command-V (Mac) six times, so that you end up with a total of seven dividers. In the Layers panel select all seven copies of divider and also select s_bar. Select Window > Align to open the Align panel. Click the icon to Distribute right edge to set the alignment of the seven dividers on the s_bar (see Figure 94).

After setting the alignment, your s_bar should look like Figure 95.

While all of the paths are still selected, choose Modify > Group. In the Layers panel, rename the new group Seek bar.

Use the Rectangle tool to draw a rectangle with a width of 150 pixels and a height of 12 pixels. In the Layers panel, rename the new rectangle v_bar. In the Property inspector, set the fill color to gray (#B5BEC1) Solid and set the Edge to Anti-Alias. Set the Texture to Grid 4 at 20% and make sure that the Transparency check box is not selected. Set the stroke to None and set the Rectangle roundness to 100 (see Figure 96).

Click the plus sign (+) icon to add the Inner Shadow filter twice, using the settings shown in Figure 97.

At this point, your v_bar should look contoured, as shown in Figure 98.

Use the Rectangle tool to draw a rectangle with a width of 30 pixels and a height of 17 pixels. In the Layers panel, rename the new rectangle v_button. Set the fill to Gradient - Linear (colors: #FFFFFF and #5D5D5D), set the Edge to Anti-Alias and be sure not to check the Transparency check box. Set the stroke to None and set the Rectangle roundness to 35. Drag the gradient fill handles to adjust the orientation of the fill (see Figure 99).

Select Window > Align to access the Align panel. Use the Pointer tool to select v_button and v_bar, then click the icon to Align horizontal center in the Align panel. While both elements are still selected, choose Modify > Group. In the Layers panel, rename the new group Volume_bar.

Now we've successfully added the user interface buttons and bars to the media player skin. I the next section, we'll take a look at adding text to the skin. For now, click on the lock icon to the left of the Buttons & Bars layer in the Layers panel to lock it.

In this section we'll add the finishing touches to the media player skin. Click the lock icon next to the Text layer to unlock it. Press the T key to select the Text tool from the Tools panel. In Property inspector, set the font to Arial. Set the size to 13 pixels and set the fill color to #5D5D5D. Click on the centered icon to set the text alignment to center and set the leading (up and down arrow icon) to 180. Uncheck the check box option for Auto kern and set the text smoothing to No Anti-Alias (see Figure 100).

Using the Text tool, type Movie Title, press Enter once and type 00:00:00. Select the text with the Pointer tool and place the text you just typed as shown in Figure 101.

Select the Text tool again. You'll notice that the Property inspector displays the same settings that were set previously, except that now the leading is set to 100%. Before adding the next text, set the font size to 11 pixels. Then, click the Text tool on the canvas and type Playlist. Select the Pointer tool from the Tools panel, and then click the plus sign (+) icon to add a Drop Shadow to the text using the settings shown in Figure 102.

Use the Pointer tool to place the Playlist text as shown in Figure 103.

Now let's use another great feature in Fireworks to create a style. We'll create a new style and then apply that style to other text. Styles in Fireworks are very useful and if you work with them, you can save a lot of time. Use the Pointer tool to select the text Playlist, and then open the Styles panel (Window > Styles). Click the New Style icon located at the bottom of the Styles panel (see Figure 104).

After you click the New Styles icon, the New Style dialog box appears (see Figure 105).

Leave all of the check boxes checked. Enter mediaplayerskin_1 in the Name field. Click OK. The new style you just created appears in the last slot of the Styles panel (see Figure 106).

Use the Text tool to type Repeat all. Use the Pointer tool to select the text, then click the mediaplayerskin_1 style in the Styles panel. Move the text to the location shown in Figure 107.

Select the Text tool. In the Properties inspector, set the font to Arial, set the size to 11 pixels, and set the Fill color to #5D5D5D. Uncheck the Auto kern check box and then select Custom Anti-Alias from the Anti-Aliasing drop-down menu (see Figure 108).

The Custom Anti-Alias setting option provides you with advanced control over the anti-aliasing applied to the text. Set the Oversampling to 16, set the Sharpness to 147 and set the Strength to 91 (see Figure 109).

Use the Text tool to type TIME. Select the Pointer tool from the Tools panel. Click the plus sign (+) icon to add a Glow and a Drop Shadow to the TIME text (see Figure 110).

Choose Window > Styles to open the Styles panel (if it is not already open). Click the New Style icon at the bottom of the Styles panel. In the New Style dialog box that appears, enter mediaplayer_2 in the Name field. Use the Text tool to type VOL. Then, move the cursor to empty space on the canvas, double-click the mouse to begin a new text element and type SUBS. Use the Pointer tool to select the VOL and SUBS text elements. In the Styles panel, click the mediaplayerskin_2 style to apply it to the VOL and SUBS text. Use the Pointer tool to place the TIME, VOL and SUBS text elements on the skin as shown in Figure 111.

Use the Text tool to type MINIMIZE. Use the Pointer tool to select the MINIMIZE text, and then click the mediaplayerskin_2 style to apply the style to the text. In the Property inspector change the font size to 8 pixels. Click the New Style icon in the bottom of the Styles panel. In the New Style dialog box, name the new style you just created as mediaplayerskin_3. Use the Text tool to type MAXIMIZE. Select the Pointer tool, and then click the mediaplayerskin_3 style in the Styles panel to apply the style to the text. Use the Pointer tool to place the MINIMIZE and MAXIMIZE text on the skin as shown in (see Figure 112).

The media player skin is now complete. In the Layers panel, click the lock icon next to the Text layer to lock it.

Where to go from here

As you review the project at this point, you'll notice that there is one remaining layer, called Final. I've intentionally left you a bit of homework to try on your own. Analyze the elements in the Final layer and experiment in Fireworks to see if you can determine the best approach to create the final design elements. There's no right or wrong way, but hopefully the techniques that I've outlined in this article have given you some ideas for future projects and a new appreciation for the tools and vector manipulation features available in Fireworks.

As each new version of Fireworks is released, it becomes more integrated with the entire suite of Adobe products. If you wish to experience how the workflow lends itself to seamless use between the products, you can download the trial version of the Adobe Creative Suite Master Collection. I think it is very helpful to see how Fireworks interacts with all of the other products, and how Adobe Bridge makes it easy to organize project files. If you want to take this design a step further, you can continue developing this skin using the other programs included in the Creative Suite package, too. They really complement each other.

Also, if you want to experience the next version, download the beta version of Fireworks CS4 from Adobe Labs. You'll get a chance to use the newest tools and participate in the online survey to help define the future of Fireworks.