Download Source Files
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Vaclav
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Psdtuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
am I first XD
nice tut btw XD
Pretty cool =D
Good tuts as always
Very fantastic!
Václave, skvÄ›….good. Perfect as always.
Very nice tutorial, thanks man!
Great tut..but the icon is more Tangois nor XpStyled i guess :)
very cool one! thanks for sharing.
nice tutorial
Great job, i might try and make my very own icon set ;)
Nice, it doesn’t really resemble the XP icon, but it still looks really nice.
Nice details for the icon. I like it.
Better than the original!
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!
Lovely tutorial… thank you
very nice, clean, has a cartoon feeling yet still maintains elegance. 10/10 :)
good job!
but i like you to do something new, not just translating ur old tuts from other site and bringin it here
thanks
Some really good tricks in there, thanks :)
Nicely written for anyone wanting to design and create icons :D
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.
i’ll miss XP
Good Tut. Would’ve had more fun making it in Illustrator though.
Nice one. I will try this later.
nice tutorial man…thanks for sharing
gr8 tutorial. Thanx a lot!
Nice tutorial. Though the end effect is not so much fascinating like other tuts but has many good techniques to learn. Thanks for sharing..
Kinda a stupid question, but wouldn’t it have been better to do the background of the screen before transforming it?
BTW great tut.
nice work, maybe doing a series of icon styles would be great.
amazing artwork!
Well done!
Some really good tricks in there, thanks
Great tutorial! Thank you!
David Carreira
Good one…
Stop putting ‘first’. Rather than being immature, put some decent comments thanking him for his time and effort. Nice tut btw 7/10 =)
omg, very nice!
looks impressive ;)
Very nice indeed. I will try this out as soon as possible. Thank you for this awesome tutorial.
I really love your icons. You are making them look so easy.
great job, its simple yet useful I will try this one later. Thanks for sharing this stuff.
Wow that’s amazing, wish I could do it that well!
Love the tut. I am huge windows fan. :)
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..
Lamine, why are you always the last to comment when i read every post loooooll
Good tuts, will try this tonight
really nice tutorial
thanks for it !
Nice post. I really dig seeing the illustrative tutorials for photoshop!
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.
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.
Very nice tutorial. The lightning and shadow isn’t complex but gives a nice effect.
Result looks nice! Maybe next time you could explain a different technique or icon-style? :)
the icon extension was ico (if i am not wrong) can photoshop edit it?
awesome tutorial here. i get all i want, thanks.
Now THAT’S what I’m talkin’ about! I can use this.