How to Create a LCD Monitor in Photoshop

Posted in Tutorials4 years ago • Written by 9 Comments

In this tutorial I am trying to share some knowledge in Adobe Photoshop CS4. We are going to draw a LCD monitor by using Photoshop. We are not going to sketch it as it is pretty simple. I will explain all techniques along the tutorial so that every one can follow easily. So what are we waiting for? Let’s get started.You can download source files from here.

Step 1

Open your Adobe Photoshop. Create a new document with 1000px x 1000px size.

Step 2

Select Pen tool (P) and draw like this.

Right click on the object which you drawn in previous step and select Make Selection. Then you need to fill this object with Gradient tool (G) colors i used #fbfcfc for light ash and #d9dcde for little bit ash.

Step 3

Next is side of monitor. Create a new layer under layer1. Draw an object with pen tool as below.

Then fill that object with the color of #a7a7a7. So you will end up with a picture similar to this.

Step 4

Next step is create new layer under the layer2. Draw an object like below. This is going to be stand for the monitor

Then fill with #c5c2c2

Step 5

OK, now draw an object for a shining effect to right side of the monitor. So draw an object like this,

Then fill black color with a opacity of 50%.

Apply Gaussian Blur effect with the value of 2.6 hint : Filter > blur > Gaussian Blur…

Step 6

Next We will repeat the same job as we done in previous step. But white color.

Step 7

Now create new layer and draw a white color object to get shining effect to bottom of the monitor.

Step 8

Ok lets give some details. Drawing some lines will make our monitor beauty. So take Pen tool (P) and draw these three lines as bellows. Use #787979 for your line.

And then draw white lines very closed to the lines which you drawn before. Please see this picture.

Step 9

Now friends, we shall give shining effect to monitor’s stand. Create new layer and draw a white color object like this.

Then take Eraser (E) and erase the border of that object.

Ok now create next layer and draw this with Pen tool (P).

Fill white color to that object.

Then apply Gaussian Blur filter to that object. hint : Filter > blur > Gaussian Blur…

Step 10

Create a new layer under the all shining layers and create this object. We are trying to make shadows in the stand. Draw this object with Pen tool (P) fill black color and reduce this opacity to 50%.

Then apply Gaussian Blur to this object as well. hint : Filter > blur > Gaussian Blur…

Create another new layer

Step 11

Draw a bottom border to monitor’s stand. Fill color with #737373.

Step 12

Now create new layer and draw display borders. First draw two white borders. You can use Pen tool (P).

Then draw black lines like this.

Step 13

Ok now get any picture to put on the screen. I used 1stwebdesigner.com screen shot as my screen display. So i got a screen shot and put in top of all other layers.

Then adjust shape of your picture to match with monitor screen. You may use Warp tool. hint Edit > Transform > Warp

Then we will give some shining effect to the monitor’s screen. So draw an object with Pen tool (P), right click, and select Make Selection… then OK. Make sure that feather radius is 0.

Once you get selected area you will be able to fill with Gradient tool (G). Use white color for shining.

So you end up with a picture similar to this.

Step 14

In this step we create shadow to this monitor. Take Pen tool (P) and draw shadow, and fill with black color.

Then apply Gaussian blur effect.

Step 15

Draw two buttons to this monitor. Select Rounded Rectangle tool (U). Draw a rectangle and fill with #9d9d9d. Then apply styles.

Step 16

Ok our monitor almost done. At the end we will give Gradient background to this picture. That’s All !!!

3 Written Articles

I am from Canada, working as a Graphics and Web designer in J11 IT Solutions Inc. (j11.ca) and running http://cutedrops.com blog. I like web designing, graphics designing and developing RIAs. I have knowledge in Adobe Photoshop, Illustrator, Flash and Dreamweaver. If you like to conduct me just send a mail to [email protected] Thanks :)

9 Comments Best Comments First
  • Parth Patel

    Tuesday, August 17th, 2010 12:11

    1

    Nice tutorial! Thanks!

    0
  • Hippy Hop

    Tuesday, August 17th, 2010 22:18

    4

    That was awesome. I know that you can draw and create awesome graphics using Photoshop but this is the first time I come upon a complete step by step tutorial of how to draw an image. I had learned some new ones on your tutorial. Thanks mate.

    0
  • kropped

    Tuesday, August 17th, 2010 16:15

    3

    Hey Kanthavel, Interesting tutorial, I like the way you add a shine to the base of the computer. The image displayed on the screen looks slightly out of perspective but i found your methods very useful.

    Thanks

    0
  • Angel

    Tuesday, August 17th, 2010 22:12

    2

    The browser window is curved

    0
  • Mike Brisk

    Wednesday, August 18th, 2010 20:00

    5

    Seems like the screenshot in monitor is not a correct perspective. I like monitor part though.

    0
  • Kanthavel Jatheepan

    Sunday, August 22nd, 2010 00:05

    6

    Thank you friends for your responses.
    @Mike Brisk; I agree with you. Thanks you for your response as well!

    0
  • marcin

    Thursday, July 7th, 2011 15:29

    9

    I’m a beginner. very nice work. Thanks

    0
  • Jothimani

    Sunday, November 21st, 2010 16:04

    8

    sir your service is more useful to me.and also if u can explain in tamil i feel good.
    continue ur process.thank u.

    0
  • Itshaheed

    Wednesday, November 10th, 2010 09:03

    7

    Great!!!
    Wishing u for more lessons.
    itshaheed.

    0
  • marcin

    Thursday, July 7th, 2011 15:29

    9

    I’m a beginner. very nice work. Thanks

    0
  • Jothimani

    Sunday, November 21st, 2010 16:04

    8

    sir your service is more useful to me.and also if u can explain in tamil i feel good.
    continue ur process.thank u.

    0
  • Itshaheed

    Wednesday, November 10th, 2010 09:03

    7

    Great!!!
    Wishing u for more lessons.
    itshaheed.

    0
  • Kanthavel Jatheepan

    Sunday, August 22nd, 2010 00:05

    6

    Thank you friends for your responses.
    @Mike Brisk; I agree with you. Thanks you for your response as well!

    0
  • Mike Brisk

    Wednesday, August 18th, 2010 20:00

    5

    Seems like the screenshot in monitor is not a correct perspective. I like monitor part though.

    0
  • Hippy Hop

    Tuesday, August 17th, 2010 22:18

    4

    That was awesome. I know that you can draw and create awesome graphics using Photoshop but this is the first time I come upon a complete step by step tutorial of how to draw an image. I had learned some new ones on your tutorial. Thanks mate.

    0
  • kropped

    Tuesday, August 17th, 2010 16:15

    3

    Hey Kanthavel, Interesting tutorial, I like the way you add a shine to the base of the computer. The image displayed on the screen looks slightly out of perspective but i found your methods very useful.

    Thanks

    0
  • Angel

    Tuesday, August 17th, 2010 22:12

    2

    The browser window is curved

    0
  • Parth Patel

    Tuesday, August 17th, 2010 12:11

    1

    Nice tutorial! Thanks!

    0

Comments are closed.

54.234.51.165 - unknown - unknown - US