This tutorial will show you how to draw LCD screen, and with given technique you could easily incorporate your screen into other designs. Suitable for making design of skins for applications, games and such stuff.

Step 1

Start off with making a new document sized 200 x 85 pixels.

Now put some light gray gradient across your document, like this:

Step 2

After that, you choose Rounded rectangle tool:

…and draw a rounded rectangle on your document like this:

Step 3

Create a new layer.

After you finish that, change your foreground color to #60a987
and fill that rounded rectangle with that color. To do that, you will click on Paths (where the layers and channels palette is) and make sure Work Path is selected, then click on that round filled icon:

…to fill the rounded rectangle.

Now, make sure Layer 2 is selected under Layers palette and hold CTRL and click on that Layer 2 to select it with marquee selection.
Then, click on Filter -> Noise -> Add Noise
Enter 2 for amount, and for distribution chose gaussian, make sure monochromatic is selected, and click OK.

Press CTRL+D to deselect layer.

Step 4

Double click on Layer 2 to open Layer Style menu.
Click on Stroke and enter this options:

Now, click on Drop Shadow, and enter this:

Next, move on Outer Glow, and make sure you put this options as on image:

Move on to the Inner Shadow and enter this:

Finally click on Bevel and Emboss. Enter this options below:

Finally click on OK to close and apply Layer Style menu. You got this result:

Step 5

Now its time to download some LCD type font. If you already have some typeface that looks like this:

than you can use it, otherwise, click over here to download this LCD font. (password for zip archive is: lcdtypeface)
When you download the archive, extract the font from it, use the password, and copy that LCD.TTF file in folder:
C:\WINDOWS\Fonts

NOTE: It’s possible that your WINDOWS folder is different than this, so you must type in yours if it is different.

Step 6

Head back to Photoshop, and choose Horizontal Type Tool, to add some LCD text. To do that, you will click on Window -> Character to open character popup window. In there, choose “LcdD” for font, and type it’s size to 48 pt and color to black (#000000). Leave other settings unchanged.

Now type in some numbers, too see how it looks like, and move them around until you align it to center, or whatever you desire.
We did it like this:

Also make sure you change antialiasing of text to Crisp:

(to do that you must use text tool and select the text, the a topmenu bar in photoshop is revealed…)

Step 7

Then add some more smaller text, just right click that text layer with numbers and choose Duplicate, change font’s size to 18 pt and move it around to get something like this:

Looks good? But it’s not done, just a few more tricks.

Step 8

Right click on that text layer containing nubmers “24:94” and choose Duplicate Layer (do not move it around) just click duplicate and click OK when asked. Now your duplicated layer is created, and selected. Change it’s blending mode (it’s set to Normal by default) to: Soft Light and Opacity to: 55%. And, move that layer under the original “24:94” layer, like this:

And finally, choose Type Tool, and click on that same layer (in my example it’s a layer called “24:94 copy”), and change it’s numbers from 24:94 to 88:88. This is important to get it to look like a real LCD screen.
(NOTE: you will have to move this layer in FRONT of that 24:94 layer te be able to edit it, then move it back under.)

Step 9

And, repeat all the stuff from step 8 but with this other text layer (“Track 1 – No name”), but just make sure to type this into that copy layer: “88888 1 – 88 8888”, and that’s it. You will end up with something like this:

Now just to make a quick check, your Layers palete must look like this:

If it’s not like this, then you did something wrong, head back, and check what did you make wrong, step-by-step…

Step 10

If you did everything just ok, then it’s time for final step. Create a new layer on top of all layers (you can do that by pressing Ctrl+Shift+N on keyboard).
Then choose Ellipse tool, this one:

…and click-n-drag across the document to make it look like this:

Now, choose your foreground color to WHITE (#FFFFFF) and click on Paths (under Layers palette), make sure Work Path is selected, and click on that “Round filled Icon” to fill the path with foreground color, then click on that Round dotted icon (third from the left in same row) to convert path to selection… see, on this picture how to do it:

Then right-click on that Work Path and choose Delete Path, because you don’t need it anymore.

Click on Filter -> Blur -> Gaussian Blur. Type into Radius: 10 px and click OK.

Then click CTRL+D to deselect the layer, and again click on Filter -> Blur -> Gaussian Blur. Type into Radius: 10 px and click OK.

Finally, change Opacity of that layer to 50% and you are done.

Result