Design a LCD Monitor with Geometrical Tricks and the 1stdesigner.com Site Opened in it..

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 !!!