Let's go back in time and look at Windows XP system icons. We'll get inspired by an old computer icon. Then we'll create a simple monitor icon in that style. Icon Factory is the company that created the icons for both Vista and XP Windows operating systems. Their works serves as inspiration for not only this tutorial, but many icons created today.
Editor's Note: This tutorial was originally published in the Czech language at Grafika Online. Grafika have kindly given permission for Vaclav to republish here on PSDTUTS for those of us who haven't quite mastered Czech...
Final Image Preview
Before we get started, let's take a look at the image we'll be creating. As always, the layered Photoshop file is available via our PSDTUTS Plus membership.
Step 1
First, we copy the XP system icon into a new document to use it as inspiration for this design. Then choose a purple color (#9693B0) and draw a rectangle, which makes the basic shape of a screen. Use the Rounded Rectangle Tool and set a proper radius.
Step 2
Change the color to blue (#1E7EDB) for the desktop background. Then draw the inner part of our monitor. Make this radius a little smaller. Also, leave some space below for the control panel.
Step 3
It's good to draw buttons on the right side into one layer. Hold the Shift key while drawing. Then move to the other side and create a bigger switch shape. Then set the Clipping Mask of the previous layer (Ctrl+Alt+G). The switch layer is called "Shape 11."
Step 4
That's enough for now, so let's transform it by going to Edit > Transform > Distort.
Step 5
The 100% size result so far is shown below.
Step 6
Now we will add a third dimension to our monitor. Copy the first layer (Ctrl + J). Then use the same transformation, but make it bigger on the top left and top right. Change this layer's color to dark purple (#A19ECA). Then set our first layer to a light purple color (#D6D3F6).
Step 7
Make selections from both layers (Ctrl+Shift+Click on the layer). Then from the Edit menu call the Stroke function. Set the size to 1 pixel, and the color to dark purple (#6A6887). Then press OK. Of course, we could use the layer effects, but we chose this way because we'll want to hide a small piece of this contour.
Step 8
Create more layers above the monitor back. Then set the Clipping Mask of the previous layer (Ctrl+Alt+G). Pick up the Brush Tool. Then with a soft brush selected, draw the highlights (1) and shadows (2).
Step 9
We can play with the control panel as well. Copy the switch layer, give it a lighter color (#9693B0). Then make it a little smaller. These tiny details will always make your work more interesting.
Step 10
Now we work on the monitor screen. Add a new layer, and draw a light blue (#70B5F4) gradient. Then add more shapes to create the illusion of having a taskbar.
Step 11
To give the screen a more plastic look, draw an appropriately dark and light outline around it. We could use the Stroke function, but we'll try something different this time. Draw the outline as a layer shape, so it disappears towards the edges.
First, copy the layer of the screen (Ctrl + J). Then select the shape with Select Path Tool (A). Copy the shape and insert it. Then move it slightly on the sides, and subtract it from the original shape (second icon on the tray). Use Distort Transformation to make the shape disappear towards the edge and stretch the shape well.
Step 12
Copy the layer again (Ctrl + J). Then fill it with a white color. Move it 1 pixel up and toward the left. This makes the outline more visible. The 100% view so far is below.
Step 13
We'll work with the bottom part of the screen in the same way. You'll need only one shape filled with a white color. The screen looks quite plastic now.
Step 14
Now let's add some reflections. The Pen Tool comes in handy. It's up to you to choose where the reflection will be.
Step 15
An important thing to do here is set the Layer Mask of our reflection (1). Load it (Ctrl+Shift+click on all layers) to make the reflection visible only there. This is where we want it to be - above the monitor layer (2), and the back side of the monitor (3).
Step 16
Make the desktop background more attractive with an old trick. Draw an Ellipse (any size) with the Ellipse Tool. Then make a selection from the layer (Ctrl+Shift+click). Then set the Stroke as a 1 pixel outline into a new layer.
Step 17
Turn the ellipse around, transform it, and give it a 1 pixel Stroke in a new layer again. Do this several times. Then add a layer mask to every ellipse layer. Fill it with a black color so that nothing is visible. Then use a soft white Brush to draw where you want the outlines to be visible. Add more white on places where the outlines cross each other.
Step 18
The final part of the monitor to create is the monitor stand. Draw an ellipse (#DCDBEE color). Then transform it with the Distort function.
Step 19
Copy this (Ctrl+J), make it smaller (Ctrl+T), and fill it with darker shade (#B6B4D4).
Step 20
To draw the main part of the stand you will have to use the Pen Tool. Then create a shape, as shown below.
Step 21
Then we will create outlines of every shapes. First, make the selection from monitor stand layers (Ctrl + Shift + click the layers) and choose Stroke function - #5D5B7B color.
Step 22
All you need to add now are some shadows and highlights. You can use the Pen Tool again. Just don't forget that the stand isn't the main area that users should focus on. Be careful with shadows and highlights, don't make them too expressive.
Final step
The final step is to erase the outline of the monitor screen where it touches the stand. Add a Layer Mask and draw into it with hard black brush. If you don't use 100% opacity, you could leave the outline visible a little. This is the reason we didn't create the whole outline of this spectacular icon. Instead, we have two basic outlines - one for the monitor screen, and a second one for the stand itself.
Conclusion
And that's all! I hope you learned something new about icon design in Photoshop.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )Tom July 1st
am I first XD
nice tut btw XD
Nate July 1st
Pretty cool =D
Good tuts as always
Maxime July 1st
Very fantastic!
b00m July 1st
Václave, skvÄ›….good. Perfect as always.
Brandon Roach July 1st
Very nice tutorial, thanks man!
Maradonna July 1st
Great tut..but the icon is more Tangois nor XpStyled i guess
Daniel July 1st
very cool one! thanks for sharing.
photoshop July 1st
nice tutorial
Andrei Constantin July 1st
Great job, i might try and make my very own icon set
Emit July 1st
Nice, it doesn’t really resemble the XP icon, but it still looks really nice.
Clemson Donnatucci July 1st
Nice details for the icon. I like it.
Stefan July 1st
Better than the original!
drew July 1st
Vaclav, thank you for creating a very helpful tutorial. The final image wasn’t as aesthetically pleasing as some other tutorial results, but I definitely learned more than from those other tutorials.
This tutorial provided basic, but very helpful, information on shadows and highlights and perspectives. These three things are very important and sometimes difficult to learn.
Thank you very much for sharing this with us all!
Gareth Jones July 1st
Lovely tutorial… thank you
Brandon h July 1st
very nice, clean, has a cartoon feeling yet still maintains elegance. 10/10
kamel July 1st
good job!
but i like you to do something new, not just translating ur old tuts from other site and bringin it here
thanks
Ben Griffiths July 1st
Some really good tricks in there, thanks
The Floating Frog July 1st
Nicely written for anyone wanting to design and create icons
Braden Keith July 1st
Sorry, but not digging this one to much. Nothing new really introduced, just basically drawing. Don’t get me wrong I appreciate the time you put into this. The only thing that interested me was the background and you didn’t even cover it.
Colin July 1st
i’ll miss XP
Tim July 1st
Good Tut. Would’ve had more fun making it in Illustrator though.
Joefrey Mahusay July 1st
Nice one. I will try this later.
Ovais July 1st
nice tutorial man…thanks for sharing
Raj July 1st
gr8 tutorial. Thanx a lot!
Ariful Alam Khan July 1st
Nice tutorial. Though the end effect is not so much fascinating like other tuts but has many good techniques to learn. Thanks for sharing..
Andrew J July 1st
Kinda a stupid question, but wouldn’t it have been better to do the background of the screen before transforming it?
BTW great tut.
Qbrushes July 1st
nice work, maybe doing a series of icon styles would be great.
Dooda July 1st
amazing artwork!
Jonas July 1st
Well done!
ZaFaR July 1st
Some really good tricks in there, thanks
D. Carreira July 1st
Great tutorial! Thank you!
David Carreira
Al July 1st
Good one…
Shaw July 1st
Stop putting ‘first’. Rather than being immature, put some decent comments thanking him for his time and effort. Nice tut btw 7/10 =)
David July 1st
omg, very nice!
Giuseppe M. July 1st
looks impressive
miri July 1st
Very nice indeed. I will try this out as soon as possible. Thank you for this awesome tutorial.
Constantin Potorac July 1st
I really love your icons. You are making them look so easy.
Count July 1st
great job, its simple yet useful I will try this one later. Thanks for sharing this stuff.
Danny July 1st
Wow that’s amazing, wish I could do it that well!
Lamin Barrow July 1st
Love the tut. I am huge windows fan.
insic July 1st
Very nice.. as expected from psdtuts. Ive learn a lot from here. psdtuts is my inspiration in building my site. Keep up a good work..
William Ahouma July 1st
Lamine, why are you always the last to comment when i read every post loooooll
Good tuts, will try this tonight
ebola5114 July 2nd
really nice tutorial
thanks for it !
Matt Radel July 2nd
Nice post. I really dig seeing the illustrative tutorials for photoshop!
Jeff July 2nd
Where does it show you how to make the small folder on the screen?
It just appears in Step 20 as if by magic.
Also why bother showing that background in the final image when we are not showing how to create it. I hate it went tutorials do this.
Its a hit and miss tut.
Jeremy July 2nd
So are only the psdtuts members who pay going to receive access to the files? I remember when you used to share with the loyal readers. Perhaps you could consider sharing the files that aren’t originals for psdtuts. This one was converted from another language, likely from another job or assignment? It seems that you really don’t want to share with those who don’t pay you. Even if we don’t pay for the membership we are driving traffic to your site and everybody who is anybody understands traffic is a hot commodity. Please consider sharing some files with those that still exist. Thanks.
r0bin July 2nd
Very nice tutorial. The lightning and shadow isn’t complex but gives a nice effect.
K3v July 2nd
Result looks nice! Maybe next time you could explain a different technique or icon-style?
locjan July 2nd
the icon extension was ico (if i am not wrong) can photoshop edit it?
awesome tutorial here. i get all i want, thanks.
w00p July 2nd
Now THAT’S what I’m talkin’ about! I can use this.
wildwise July 2nd
nice and simple
Spelldesign July 3rd
Hi !
Very nice, good job !!
Thanks u for this tuto.
Sincerly.
pHéR-d July 4th
Shape is everytime great more than raster. Cool tutorial, thanks!
Kenny July 15th
im abit confused with step 4
when i distort it
am i suppose to distort every one by one
or all the layers linked together and being distorted at the same time when i do it?
zEs78 July 16th
awesome!!! =P
very nice work…
thanks for this tut..
Abhisek July 18th
Great tutorial, as always
Muhammad Umer July 21st
Wonderfull website whenever i comes here always find something a way cool
Good Job Guys I am Impressed Its like mission to make awesome tutorials every time .
Jv August 9th
Very nice once again !
Add Your Comment
( GET A GRAVATAR )Your Name December 1st
Trackbacks