This tutorial assumes you're familiar with Photoshop's/Fireworks's workspace/tools. This tutorial only teaches the concept of how its done. A Macromedia Fireworks source file can be downloaded in the downloads section of this site under the 'fireworks sources' category.
Step 1
Draw a box. I've set the canvas size to 200X300px, you can set yours as anything you want.
Step 2
Make some modifications to the background, I used #DDDDDD for the background color. Modifications were also made to the rectangle:
- rounded edges
- a gradient has been added (#FFFFFF to #CCCCCC)
- a rectangle outline color of #999999
Step 3
Add another rectangle in the center of the first rectangle. This rectangle can be any size. I've added rounded edges to this rectangle to give it the smooth look.
Step 4
I added a similar gradient to the inner rectangle. The colors of the gradient are #EEEEEE (you can use #FFFFFF too) and #CCCCCC.
Then, add an inner glow (color: #666666) to the inner rectangle with drop shadows of the following:
Black drop shadow - 125degrees, 1px in thickness
White drop shadow - 315 degrees, 1px in thickness
The drop shadows will give the 3D look to the inner rectangle to make it look as if its encaved into the first rectangle.
Step 5
Then, draw another rectangle above the SECOND rectangle and give it a background color of #FFFFFF (white). Then, cut the rectangle into the shape similar to the image below and set its opacity to 30%.
Step 6
This is the final image after some additions.
