Digital Street - Photoshop tutorials

Photoshop tutorials


Windows Vista Icon: Error

Category: Web graphics

1) Create a new image 256×256 pixels with transparent background. Rename the first layer as “background”

2) Fill the background with white color #ffffff.

3) Create a new layer, rename this layer as “circle”.

4) Select the Eliptical Marquee Tool and draw a circle 222×222 pixels while holding SHIFT to get a perfect circle.
Save this selection as “circle selection”.

5) Fill the selection with any color. I used #880303

01.png

6) Select a dark red color as foreground color and a lighter red color as background. I used #880303 and #b51919.

Select the gradient tool with radial gradient style and drag from top left of the selection to the the bottom right.

02.png

7) Create a new layer and rename this layer as “reflection”.

8) Load the “circle selection” and choose the Eliptical Marquee Tool and draw a curve from bottom right to the middle while pressing “ALT”. Release mouse button and you will get a selection like this:

03.png

9) Select “reflection” layer and fill the selection with white color #ffffff. Set the layer opacity to 15%

04.png

10) Create a new layer and rename this layer as “border”.

11) Select the Eliptical Marquee Tool and draw a circle 242×242 pixels while holding SHIFT to get a perfect circle. Position this circle around the first circle.

05.png

12) Fill the selection with grey color #b6b6bc

13) Load the “circle selection”.

06.png

14) Press DEL and you will get a border around the circle:

07.png

15) Right click the “border” layer and choose Blending Options, use these settings:

Drop Shadow:
08.png

Inner Glow:
09.png

Bevel and Emboss:
10.png

Gradient Overlay:
11.png

Gradient Overlay uses 3 colors: #b3b3b9 #ffffff #b3b3b9
12.png

Stroke:
13.png

16) When finished you will get this:

14.png

17) To make the “x” sign I have typed a plus sign “+” with a font called “Army” to 300 size. Then I have rotated 45°. Be sure to move the “+” layer below “reflection” layer.
15.png

18) Right click the “+” layer and choose Blending Options, use these settings:

Drop Shadow:
16.png

Bevel and Emboss:
17.png

Gradient Overlay:
18.png

Gradiente Overlay uses 3 colors: #ffffff #bbbbbb #ffffff
19.png

Stroke:
20.png

19) The final result is:
21.png

Now you have a nice looking Microsoft Windows Vista Icon !

Want more tutorials?
See more recent tutorials HERE !

21 Comments so far

  1. bob May 24th, 2006 2:14 pm

    yeah u guys are good

  2. dexter May 27th, 2006 5:35 am

    Nice work! :)

  3. longman May 28th, 2006 6:37 am

    i know it has no connection with this tut but how can i move lens flare if i placed them. thats the order in many tuts but im a beginner so help me plz :)
    thx

  4. admin May 28th, 2006 6:48 am

    I know that question is not about this tutorial, but I will try to help you.
    When you apply Lens Flare you can move the lights in the little window of the filter.
    What I mean is: create a layer, fill it with black color #000000, then go to Filter > Render > Lens Flare.
    When you do that a window popup appears to change the Lens Flare settings. In that window you have a preview square called Flare Center which have a little cross. You can move that cross with the mouse doing drag and drop to set and move the flare center.
    Hope that help you.

  5. Oliver May 28th, 2006 11:21 am

    Very nice, I bet we will all see this icon very often as soon as we get vista

  6. longman May 28th, 2006 12:00 pm

    Yes thats it, thank you very much :)

  7. Shane May 28th, 2006 1:43 pm

    yo this is a cool tutorial i learned alot keep up the good work and keep the good stuff coming.

  8. Ian Mullen May 31st, 2006 6:10 am

    Superb tutorial. Really easy to follow. Probably the easiest tutorial I have ever done because of the detailed screenshots and instructions! Thank-you!

  9. Rene June 2nd, 2006 7:00 am

    very nice …

  10. Ponzi June 17th, 2006 8:30 am

    Nice tutorial :) I just learned a new ‘trick’ with the ALT-thing :D !

  11. party » Blog Archive » links for 2006-07-17 July 17th, 2006 11:21 am

    […] Digital Street - Photoshop tutorials » Windows Vista Icon: Error […]

  12. Tozisi August 24th, 2006 3:27 am

    Excellent!

  13. Millar September 4th, 2006 3:52 am

    Very nice tutorial, simple yet very effective.

    Nice Job!

  14. Faaj February 22nd, 2007 5:53 pm

    Nice :)

  15. Wesley April 26th, 2007 11:38 am

    just a small thing,
    If you use shape layers (for the circle, reflection, cross and border) instead of normal layers then this icon can be resized to any size with no loss in quality

  16. Sub__Zero May 29th, 2007 6:35 pm

    Niiiiice! :D

  17. (noname) August 14th, 2007 8:01 am

    where we can download the font named army

  18. Yasir Shaikh 92+333-2637495 August 23rd, 2007 4:18 am

    Your are the best teacher…
    thanxxx

  19. Me September 3rd, 2007 7:32 am

    Doesn’t work for me at step 9, with opacity at 15% I get this dirty orange instead of the clean white haze on the selection.

  20. Design Bump September 9th, 2008 3:22 am

    Story on DesignBump.com…

    Your story was featured in Design Bump! Here is the link to vote it up and promote it: http://designbump.com/TutorialsandLearning/How_to_design_an_Error_Window_Vista_Icon_with_Photoshop…

  21. 10 Icon Design tutorials | IconsPedia November 15th, 2008 4:36 pm

    […] […]