Create your own Monitor- With Photoshop!

2009 July 22 | 2 Comments
by Ernest Ojeh

We’re going to create a monitor in this tutorial. We’ll be working with gradients and blurs. So fire up PS and let’s go!

Note: Dimensions used in this tutorial may differ depending on the size of your canvas.

Step 1:

Create a new document of whatever size (I’m using 1024x1024px). Create a rectangle of the monitor using the rounded rectangle tool. Fill it with #000000 and apply the bevel and emboss settings below.

Step 2:

Now to create the stand. On a new layer below the Use the pen tool to draw out the monitor stand. Then apply the layer styles below.

Tip: If you’re having problems drawing the shape, you can draw half, duplicate the layer, flip it horizontal and join it.

Step 3:

We’re going to use the pen tool with the help of the brush tool to add some detail.

First, select the the brush tool (Airbrush) with diameter of about 7px & foreground color: #000000.

Then ctrl+click on the monitor stand layer and use the pen tool to make the selection below. Then right-click & select ‘Stroke path’ and apply a slight Gaussian blur.

Step 4:

We’re going to apply the same treatment to some other areas but with different brush diameters.

Step 5:

Create a new layer called “screen”. With the rounded rectangle tool, draw out the screen and fill with #74B2C6. Then apply the layer style below.

image

Step 6:

Make the selection below, then apply a linear gradient from transparent(up) to #ffffff(down) and set the opacity to 15%.

My Final Image:

Below is my final image. Hope you enjoyed this tutorial?

Share this post:


2 Comments (add yours)
  1. Nice tutorial. Picked some few tricks here and there.

  2. Very nice and easy to follow. I appreciate the time you spent to make this for us. Great Job!

Leave a Reply




↑ back to top

Switch to our mobile site