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

Monitor Icon

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”.

Monitor Icon

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

Monitor Icon

Creating The Monitor Surround

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

Monitor Icon

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”.

Monitor Icon

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.

Monitor Icon

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

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

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”.

Monitor Icon

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

Monitor Icon

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

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

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”.

Monitor Icon

Add the following layer styles to your screen layer.

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

Select the pen tool then change the settings to paths.

Monitor Icon

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

Monitor Icon

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.

Monitor Icon

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.

Monitor Icon

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.

Monitor Icon

Add the following layer styles to each button.

Monitor Icon

Monitor Icon

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

Creating The Power Light

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

Monitor Icon

Add the following layer styles to your power light circle.

Monitor Icon

Monitor Icon

You should have something like this.

Monitor Icon

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.

Monitor Icon

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.

Monitor Icon

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

Monitor Icon

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.

Monitor Icon

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%.

Monitor Icon

Monitor Icon

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.

Monitor Icon

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.

Monitor Icon

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

Monitor Icon

The Finished Icon

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

Monitor Icon

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!

 

Enjoy