Web Layout
LCD Box
By Kenetix.net
Apr 16, 2007, 16:23

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.

© Copyright by The Template Shop