LCD Screens, Tutorial 1 by Demorph

[Demorph]

Programs: Photoshop 7.0/CS
Date written: Unknown, Published 06/01/05
Author: Demorph
Created for use by the following: Primarily Digital Smog, Secondarily Infidel Designs, Dysign Core, and Visual Core.
Additional Information: Knowledge of the different tools of Photoshop plus their uses, and how to implement scanlines are prerequisites of this tutorial.

Step 1
Make a new document, any size is great, as is the background color. Create a new layer while you're at it. Name the new layer "Screen". Naturally the size of the new document must be large enough to accommodate the initial screen size you had in mind.

Step 2
Using the shape tool, select "Rounded Rectangle" with a 10 px Rounded Edge and make sure the Antialiasing box is checked. Make a shape using this method. Make sure your shape is as big as you want it when it is finally complete. My settings.



Step 3
Make a new layer again, and name it "Backlight". This will, surprisingly enough, be for the backlight effect. CTRL+Click the "Screen" layer to select the shape. Make sure you're still working on the "Backlight" layer, and switch to the paintbrush tool. Select a soft 200px brush, with a large spread. This brush size gives the optimal result for my shape, as it can comfortably highlight the bottom. Highlight the bottom edge of the selection with the brush using pure white, and set the Blending mode of "Backlight" to Overlay. You may now deselect (CTRL+D).



Step 4
(OPTIONAL) Time for a new layer. Make a new layer, call it "Scanlines", and CTRL+Click the "Screen" layer. Now, with the Marquee Tool selected, right click your selection and select "Fill". My settings. Use any form of scanlines you may have. After applying the Fill, change the layer's Master Opacity setting to a percentage between 5-15. You may now deselect.



Step 5
Make another layer, name it "Border". CTRL+Click the "Screen" layer, and, with the Marquee tool selected, right click the selection and from the dropdown menu select the "Stroke" option. Set it to have a width of 1-3 pixels, and the color should be something slightly darker than what you filled the original shape with. My settings. Personally, I like having a border 1 or 2 pixels in thickness, but it's really up to you to decide.



Step 6
Well, now you're basically done with the screen itself, there's only the reflection in the glass left now. Make a new layer, name it "Highlight". Using the pen tool, make a crescent-like shape that covers the top half of the screen like so. Right click the path, select "Make Selection..." and leave at the default settings. Now, with the selection intact, hold in CTRL+Alt+Shift and click on the "Screen" Layer. Now go to Select > Modify > Contract and contract the selection by 1.

Step 7
Now, press D on your keyboard, followed by X, to reset the foreground/background to black and white and switch them over, to make white the foreground, and black the background. Select the Gradient tool, and make a gradient from the top of the selection to the bottom. My settings. Change the blending mode to "Screen", and you're done.



Step 8
Of course, this is just the actual Screen/Orb. Where to put the content, you might ask. I always put it right above the "Screen" layer, which enables it to be affected by the Backlight layer, creating a very cool integrated effect of the content actually being inside the screen or orb. I usually set the opacity of my content to about 50%.

Final Image


Notes
Don't always follow this step-by-step, treading where I treaded. Try changing some things to suit your needs better, etc, etc. The scanlines are not necessary, and remember, mess around with the shapes! Variety is good for the mind!

[Halifax]

Great tutorial Demmy. Hopefully it makes it on P2L + GT

[Demorph]

Yes, I submitted it to both.

[Hexus]

I'v always have liked that glassy look when it's done right, good work ^^

[Halifax]

The only thing I've never liked about them is that the "highlite" looks too sharp. I mean if you have a sun hitting a rounded/flat object then the glare doesn't have a sharp edge. I usually end up grabbing the blur tool and blurring the end so it looks like it's fading slightly.

[cap]

pimp man why can't we have buttons using that technique?

[Halifax]

If I can find a skin that would match it.

[cap]

first off his tutorial is in pixel2life, second i voted 8 times, third if u can find a glossy ass blue skin i would be in love.

[Demorph]

Perhaps I could make one... And yeah, I noticed it was on P2L. Now just to wait for it to appear on G-T.

[Halifax]

Well done for the P2L upload Demmy. Good-tutorials is slow.

[cap]

if you made one i would.... eh this would describe it better

[Demorph]

That is discouraging, not encouraging, Cap. Anyway.

I guess it'll get some attention thanks to Cap's gratituous spamming of the "10" rating.

[cap]

hey man ill do what i have to do for tutorials from here to get attention even if i have to appoint nflame to vote 50 times like he did for mine.


edit i tried to make buttons

[Demorph]

...Er, ok. The edges are a little rough, but I can probably make them instead, unless you want another go. Try using a pixel font, I'd recommend "ROTORcap", it's a good one. Remember, save it as a PNG.

[cap]

sigh* ok then i guess i wont be making buttons