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.

image 1

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

image 2

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.

image 3

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.

image 4

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.

image 5

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

image 6

Step 6

This is the final image after some additions.

LCD Box Tutorial: Final Result



Author's URL: Kenetix.net
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "LCD Box"

Only registered users can write comment

No comments yet...