Download source files here.

Requirements: Fireworks & Dreamweaver 4. The tutorial is meant for those that are familiar with both Fireworks and Dreamweaver. The tutorial has two parts, the first is building an interface the second is editing it in Dreamweaver.

Click here to view the interface that will be created in this tutorial.

1. Create a canvas of 640 x 160 with the color of white.

2. Draw a rectangle at 610 x 140. With the rectangle still selected go to the Stroke Panel and set it to 1-pixel soft and the color of #444444. Go to the Fill Panel and select linear fill. We need to add several colors to this. You need to create a fill that includes two-color sliders of #FFFFFF, and three of #BBBBBB The Linear Fill Palette should look similar to the image below.

Once you have the fill set you want to go to the Tool Panel and Select the Paint Bucket tool. This will allow changing the linear fill from horizontal to vertical. You should have an image like the one below.

Click to enlarge.

3. Finally, select the rectangle and go to the Object Panel and set the Roundness to 6.

4. Lets draw another rectangle at 598 x 26 with a Solid Fill of #BEC4B0. Now center this horizontally and place it towards the top so that it looks like the image below. This will be our LCD look for the navigation.

Click to enlarge.

5. Lets add a little detail to our LCD/navigation bar. Select it and do a copy and paste. You wont see it but we just made a copy of it that is sitting on top of the original. What we want to do now is remove the fill color but leave the stroke. With the copy of the LCD bar still selected go to the Effects Panel and select Gaussian Blur. Set the blur to 0.8. Now go to the Info Panel and change the height to 24 and width to 596. Once you change the dimensions move this so that it is centered within the LCD navigation bar. This will give the illusion that the LCD is recessed.

6. Now lets create an LCD for our content. Simply copy and past the first LCD we made. Include the blurred stroke we made with the first one. Now all we need to do is move it below our navigation LCD and change the height of both the Rectangle with the linear fill and the one with just the blurred stroke. Change the height of the rectangle with the Fill to 95. The Stroked rectangle should be at a height of 93. It should look like the image below when steps 5 and 6 are complete.

Click to enlarge.

7. Now lets go back to the LCD navigation bar. We want to decrease the width and on the left end create a slant to it so that it looks like the image below.

Click to enlarge.

8. To do this all you have to do is select the Subselection tool (white arrow on the tool panel). Then select the rectangle and you will notice the anchor points at all four corners. By clicking on these you will be able to move them. This part does not need to be precise just as long as it looks similar to the image above.

9. We now have a basic interface. What is left are the details. Lets start with making the content LCD less boxy. We can add a similar slant as we did with the navbar. In this case we will need to add some anchor points. First take a look at the image below to see what I am going to do.

Click to enlarge.

10. Lets start at the top left corner. We need to select the rectangle with the fill. Once you select the rectangle go to the Modify menu and select "Ungroup". This will allow you to add anchor points with the Pen Tool. Now go to the Tool Panel and select the Pen Tool. We will use the pen tool to create new anchor points. As long as our rectangle is selected we can add anchors points any where along the edges. We just need to create two new points Click on the edge of the rectangle and create the two points. Refer to image below for placement.

11. Now all you need to do is move the anchor points to look like the image below. Remember when you want to edit anchor points you need to use the Subselection Tool (white arrow on the Tool Panel).

12. Now do the same with the blurred stroke so that it matches the step above.

13. To add this same effect to the bottom right just follow steps 11 and 12 but only perform this on the bottom right. When its complete it should look like the image in step 9.

14. Lets give some more depth to our interface. Select the chrome rectangle. Go to the effects panel and add a bevel with the Eye Candy 400 LE Bevel Boss. Use the settings I have below.

Basic Tab: Bevel Width = 3.00 Bevel Height Scale = 100 Smoothness = 26 Bevel Placement = Inside marquee Darken Deep Areas = 55 Shade Interior = Unchecked

Lighting Tab: Direction = 59 Inclination = 83 Highlight Brightness = 26 Highlight Size = 25

15. I added some links and a logo to the interface. I also added some more detail. I think that at this point its really up to you and what you want to do with it. In brief I added the following.

I added a solid colored bar that spans the top of our LCD content area. The height is 15. I then added a stroke (color #777777) to border the solid bar. I also added a drop shadow to the chrome rectangle. Lastly I add a vertical stroke (color #777777) to the right hand side. The end result should look like the image below.

Click to enlarge.

16. Lets add a second frame to our interface. We want to add a mouse over state when we slice the image up. To do this go to the main menu select Edit> Select all. Now select Edit> Copy. Then go to the main menu and select Insert> Frame. You should now have a new blank frame. While in this frame simply go to the main menu and select Edit>Paste. Just select the nav names and change the color to #FFFFFF.

17. Last part of this tutorial is adding slices so that we can export if Dreamweaver. It matters a great deal how you slice it. At this point save your work and open the interface I created "interface.png" (its in the "sourcefile" folder). I have added the slices for you. It is much easier for you to look at what I did then to walk you through placing each slice. Look at how everything is separated with slices. Its sliced this way for a reason. To learn why go to part two of this tutorial.