Programming, website development forum Get latest updates by RSS Follow TechnicalTalk on Twitter Follow TechnicalTalk on Facebook 
HomeSearchRecent PostsLoginRegisterContact Us

Username  
Password    
  Forgot your password?  

Pages: [1]   Go Down
 
  Email this topic  |  Print
0 Members and 1 Guest are viewing this topic.

How to create an LCD screen.

 
webmaster forum
Neoadam  Offline
Activity
0%
 
Regular Coder
Location: UK
Gender: Male
Posts: 83
Topics: 14
February 29, 2008, 03:12:54 PM

I did not create this tutorial - I take no credit.



Step 1
Create a new layer and select the polygonal marquee tool. Make a shape similar to the one shown here (around 180 pixels high). Go to select > modify > smooth, enter '25' and press ok.


   
Step 2
Set your foreground color to #D0D2C7 and fill the selection.


   
Step 3
Open the layer styles dialog for your layer and go to 'inner glow'. Use the following settings...

Blend mode: normal
opacity: 22%
Size: 18px


You can leave the rest of the settings as default. Go to 'inner shadow' and set the inner opacity to 44%, size: 7, and distance: 8. Then Click 'ok'.


   
Step 4
Create a new layer. Select the Elliptical Marquee tool and and set the mode to 'intersect'. Draw a circle over your already selected shape, so you get something similar to what is shown on the left.

Fill the selection with #FFFFFF and set the blend mode to overlay and the opacity to 40%. Press ctrl+D.


   
Step 5
Hold down ctrl and click the layer 1 in the layers palette (the one which includes the green shape) to select the outer perimeter. Make sure your foreground color is set to #ffffff.

Create a new layer above the green shape. Go to select > modify > contract and enter a value of '5'. Then smooth the selection with a value of '5'. Fill the slection with #FFFFFF. Contract the selection by '5' again, and delete the selected area.


   
Step 6
Set the layer's blend mode to overlay and opacity to 35%.


   
Step 7
Create a new layer above the background, and fill it with a gradient as shown on the left.


   
Step 8
Select the top half of that layer, then create a new layer. Select the gradient tool and set it to "foreground to transperant". Click and drag from the center up to create a white gradient as shown here.


   
Step 9
Hold down Ctrl and click the layer in the palette, which has the green shape on it. Create a new layer under it, and expand the selection by 5.

Set your foreground color to a dark grey, then make a gradient directing downwards. Your gradient should look similar to mine on the left.


   
Step 10
Set the foreground color to white, and make a gradient directing upwards from the bottom.

Open the layer styles dialog box for layer 1, check 'outer glow', and use the following setings...

Blend mode: normal
Opacity: 57%
size: 7 pix


Leave the rest of the options as default.

Congratulations! Your done!

How to create an LCD screen in photoshop!
How to create a wet road in photoshop!
How to create a glass icon in photoshop!
How to create a modern website design!
 
webmaster forum
Trulyana  Offline
Activity
0%
 
New Coder
Posts: 45
Topics: 5
March 17, 2008, 05:04:49 PM

I really like this, as its the mechanics behind making shapes and am sure helps to make great banners, or objects.

Thanks!  Grin
 
webmaster forum
only1idea  Offline
Activity
0%
 
New Poster
Posts: 10
Topics: 1
WWW
April 13, 2008, 12:40:46 PM

sweet  Cheesy
 
webmaster forum
Jyles  Offline
Activity
0%
 
New Poster
Posts: 13
Topics: 3
WWW
April 21, 2008, 11:22:48 PM

ok im lost.. just a general question, how is that a lcd screen (maybe i dont know what lcd generally means) but.. isnt a lcd screen squar or rectangular, or is it just generally something that has a glow.
 
webmaster forum
Neoadam  Offline
Activity
0%
 
Regular Coder
Location: UK
Gender: Male
Posts: 83
Topics: 14
April 22, 2008, 10:57:55 AM

An LCD screen in real life is usually square, but this is just to show how you can create a glowy logo, as Trulyana said it gives you the basics for most of the cool web 2.0 icons you see today.

Also, you can use any shape, so if you want to you can use a square, I think the creator of the tutorial used an unusual shape like that to show how any shape works.

How to create an LCD screen in photoshop!
How to create a wet road in photoshop!
How to create a glass icon in photoshop!
How to create a modern website design!
 
webmaster forum
Jyles  Offline
Activity
0%
 
New Poster
Posts: 13
Topics: 3
WWW
April 22, 2008, 10:32:20 PM

so really is that the true definition of a lcd screen, or a reflection what a lcd screen can be contrasted to?
 
webmaster forum
Neoadam  Offline
Activity
0%
 
Regular Coder
Location: UK
Gender: Male
Posts: 83
Topics: 14
April 24, 2008, 09:36:29 AM

Just something it can relate to in this sense.

Here's the real meaning of LCD.
A thin display of a couple of layers.

How to create an LCD screen in photoshop!
How to create a wet road in photoshop!
How to create a glass icon in photoshop!
How to create a modern website design!
 
webmaster forum
Inquest  Offline
Activity
0%
 
New Poster
Posts: 10
Topics: 2
May 11, 2008, 09:25:06 AM

Wow. That's a good tutorial. It actually worked..

Pretty darn cool!
 
  Email this topic  |  Print
Pages: [1]   Go Up
 
Jump to:  



Powered by SMF 1.1.15 | SMF © 2011, Simple Machines


Google visited last this page January 24, 2012, 08:11:45 PM