Monitor Icon Design

Hello, welcome to another tutorial by hv-designs. In this tutorial il be showing you how to make a sleek monitor icon. We’ll be using shape layers for this tutorial so the monitor can be resized as much as you want without loss of quality.

What Were Creating

Right lets get started.

Creating Our Simple Background

Create a new document 650 x 650 pixels with a transparent background, this sized canvas should be sufficient for our icon. If you need to then feel free to make it bigger.

Once you’ve created your new document right click the background layer and click “layer from background”.

Rename your layer back to “background” then add a gradient overlay using the settings below.

Creating The Monitor Surround

Set your foreground color to white (#ffffff) then select the rounded rectangle tool with the following settings.

Now drag out a rectangle within your canvas area, remember not to make it too big as we still need to add the monitor stand etc… later. Upon dragging out the monitor surround a layer should automatically be created. Label the new layer “monitor surround”.

With your monitor surround layer selected go to “edit > transform > perspective” select the left anchor point then drag it towards the left of the canvas. You should have something like this.

Double click your monitor surround layer to open the layer styles window, add the following layer styles to your layer.

You should have something like this.

Creating The Inner Surround

Select the rounded rectangle tool with the same settings as last time, drag out a smaller rectangle inside your monitor surround rectangle. Label your new layer “inner surround”.

Adjust the perspective of the inner surround in the same way we did our monitor surround. (“edit > transform > perspective”)

Now add the following layer styles to your inner surround layer.

You should have something like this.

Creating The Screen

Select the rounded rectangle using the same settings as last time, this time drag out a rectangle inside your inner surround rectangle. Adjust the perspective the same as we did with the last two rectangles. Finally label your new layer “screen”.

Add the following layer styles to your screen layer.

You should have something like this.

Select the pen tool then change the settings to paths.

Create a new layer labeled “shine” then with the pen tool make a path like the image below.

Once you’ve made the path, set your foreground to white (#ffffff) then right-click and go to “fill path”. With the shine layer selected click the screen layer whilst holding down the CTRL key on the keyboard, doing this should load a selection around the screen.

Now go to “select > inverse” then hit the delete key.

Set the shine layers opacity to 10% then add a layer mask, select the gradient tool then with a linear gradient drag from the bottom of the shine towards the corner.

Creating The Monitor Buttons

Select the circle tool then create two circles on the left side of the monitor surround. Create one circle bigger than the other.

Add the following layer styles to each button.

You should have something like this.

Creating The Power Light

With the circle tool once more create a small circle in the center of the monitor surround.

Add the following layer styles to your power light circle.

You should have something like this.

Feel free to add more features to your monitor to make it abit more realistic.

Creating The Stand

Select the rounded rectangle tool, on a layer underneath your monitor surround drag out a rectangle.

Adjust the perspective in the same way we did our monitor layers, then go to “edit > transform > warp”.

Inside the warp menu select “arc lower” then adjust the bend at the bottom of the rectangle.

Finally add a gradient overlay to the stand using the colors #303030 and #535353, you should have something like this.

Duplicate your stand layer then drag the duplicated layer underneath its original. Move the duplicated layer down a couple of times, depending on how far you move it down will determine the thickness of the stand.

Once moved into place add the following gradient overlay.

Select the pen tool and draw a path across the center of the stand. Once you’ve made the path, set your foreground to white (#ffffff) then right-click and go to “fill path”. With the white paths layer selected click the stand layer whilst holding down the CTRL key on the keyboard, doing this should load a selection around the stand.

Go to “select > inverse” then hit the delete key, you should be left with a white area overlapping your stand, set the layer opacity to 4%.

Creating The Shadows

Select the elliptical marquee tool and make a selection on a new layer above your stand layer. The selection should be now wider than the stand and should be too high.

Fill the selection with the color black (#000000). Deselect the selection with CTRL + D then go to “filter > blur > guassian blur” set the blur amount to about 6-8 pixels then press ok. Set the layers opacity to about 40%, if need you can free transform the ellipse and make it smaller if it exceeds the stand width.

You should have something like this.

Repeat the process above but only this time create the shadow underneath the stand itself.

The Finished Icon

Congratulations should now have completed the tutorial and hopefully have something like the image below.

Many thanks for reading this tutorial.

Free PSD

Look out for the FREE PSD file in which il be adding to the freebies section soon!