Firetuts

Create Vista Wallpaper with Fireworks

Posted in Resources > Wallpaper by Firetuts

I have noticed a considerable demand for a tutorial to create vista wallpaper, so I’ve decided to give it a try. It’s not easy, and the result is not perfect, but its a good attempt nonetheless.

Note: The final image is the outcome of much trial and error. But you can pick up the techniques I describe, and analyze the source file for yourself when my explanations get too complicated, which they will.

Lets start to create vista wallpaper

1. First, create five layers (Using the folder button in the Layers window) like so:

  • Text (topmost), Canvas 2, Effects 2, Canvas 1, Effects1 (bottommost)

2. Lets color the canvas first. On Canvas 1, draw the following, from top to bottom:

  • Rectangle: Opacity 60%, Radial Gradient FFCC33, bottom left 70%, and the rest 0%
  • Rectangle: Vertical Gradient 3399CC, top 0%, bottom 100%
  • Rectangle: Overlay, Vertical Gradient, top 33CC33, bottom 3399CC
  • Large circle above: 77% Overlay, Radial Gradient FFFFFF, center 100%, edges 0%

Create Vista Wallpaper

3. As for Canvas 2, draw the following:

  • Rectangle: 40% Overlay, Radial Gradient (positioned above center) FFFFFF, center 100%, edges 0%
  • Rectangle: 20% Overlay, Radial Gradient 003300, center 0%, edges 100%
  • Rectangle: 100% Overlay, Radial Gradient 003300, center 0%, edges 100%

create vista wallpaper

Now your canvas is nicely colored. Basically, its dark on the edges and its a mesh of blue and green.

4. The image has four different kinds of objects. Lets start with Element 1. Draw a light yellow trapezoid with a Vertical Gradient with 16% opacity and 1 Feather, left 100% and right 0%. This will make a fading line, put this in Effects 2.

create vista wallpaper

5. Draw two more similar trapezoids, with variable sides and opacity and color. These two here are placed in Effects 1.

create vista wallpaper

6. Now for Element 2. Draw a long circle segment with 40% Overlay and color it green. Make more of this with varied color, thickness, angle, and opacity. You have to be creative in this one. Place some in Effects 1 and the rest in Effects 2.

create vista wallpaper

Basically you’re making the colors fluctuate from left to right.

7. Now for Element 3. Draw thin tilted light blue triangles with 86% Opacity. Make the Vertical Gradient fade (100% to 0%) angled in such a way that one edge is more faded than the other.

create vista wallpaper

The tricky part is trying to angle the gradient just right.

8. Now for Element 4. Draw a long arc with 50% opacity and 2 Tip Size of 50% Edge, and use Radial Blur on it. I find this to be a lame replacement for those lines you see in the real wallpaper, but its better than nothing.

create vista wallpaper

Make two more of these. Now you have appropriately placed set of four different types of shapes with the right effects. Its all up to your creativity.

9. Now type your text in white, with Inner Glow (Thickness 2, Opacity 12, Softness 1), and Glow (Thickness 0, Opacity 39, Softness 9).

Create Vista Wallpaper

There, this is the best I can do. At least it looks okay when you see it from far.

Author: Firetuts.com

Website: firetuts.com

Get Source
There're 76 comments for this post.
  6. Kjell on said:

    May I say this is another excellent tutorial, and I’am very glad I stumbled upon your site. Keep up the good work FireTuts! <3

  10. Amrit on said:

    All i can say is, “Justin has heard our prayers”. This is super coooooooooooooooooooooool. :)

    Thanks a lot, man. I remember it very well when i had requested you for this tutorial a few months, you had said that you were working on it. Its simply awesome that you’ve mastered the thing in such a short span of time.

    Hats of to you.

    Thanks again.

  11. Justin on said:

    To Adam: Thank you, resemblance is my forte. Hahaha… Enjoy.

    To Amrit: Thank you, I wouldn’t call it “mastering” but I manage. Put your hat back :P . Enjoy.

  12. Pingback: Adobe Fireworks Tutorials and Downloads - Best of | Freelancer Fire

  13. Pingback: Adobe Fireworks Tutorials and Downloads

  14. Pingback: Avante!

  18. Pingback: wsgraphics : Adobe Fireworks Tutorials and Downloads - Best of

  19. Pingback: Fireworksのチュートリアルいろいろ - DesignWalker

  20. Pingback: Los mejores tutoriales de Adobe Fireworks

  22. THE SHOOTER on said:

    Muito bom seu tutorial, obrigado e continue criando efeitos excelentes nesta otima ferramenta!

    Very good your tutorial, you and continue creating excellent effects in this great tool!

  23. bittencourty on said:

    Nossaaaaa, estou impressionado com o resultado!!!

    Nunca imaginei que seria possível ter um resultado deste com Fireworks, simplesmente perfeito.

  24. Pingback: Tutoriales de Fireworks II

  25. Gozie on said:

    Talk about potential! Justin, I’m impressed. Where have I been all these years? I’ll make you use of this one on my next project. Thx a lot.

  26. Pingback: Descargas, Recursos y Tutoriales de Fireworks | frogx.three

  27. Pingback: Real Tutorials Collected! » Blog Archive » Create Vista-like Wallpapers with Fireworks

  28. vst on said:

    Hi there,

    Great stuff … however – have anyone noticed that using a loads of objects with edge as feather make fireworks working … slowly. Like PC need a lot of resources to compute this …

  30. kehinde isimi on said:

    incredible tutorial.Its painless and timeless.

    I was wondering if you have ever done vectorization,like in the movie a scanner darkly,before?.

    i would love if you give us tutorial on that.thanks.

  31. elvis on said:

    dammmmmnnnn! that was on cool one. ive always wondered how those things were created, now me answers are here.

    COOL ONE!

  33. Cory on said:

    i’m confused because some of the directions are a tad complex since i just started using fireworks like “Rectangle: Opacity 60%, Radial Gradient FFCC33, bottom left 70%, and the rest 0%” i’m not sure what bottom left and rest means and how to set it somebody email me coryweberbutcher@yahoo.com

  34. Kris on said:

    Thanks so much! i learn a lot about paths gradients etc. Thank you!

    Although the step about creating rectangles with gradients could be more clear.

  35. Jeremy on said:

    I am also confused about the directions..

    “Rectangle: 40% Overlay, Radial Gradient (positioned above center) FFFFFF, center 100%, edges 0%

    Rectangle: 20% Overlay, Radial Gradient 003300, center 0%, edges 100%”

    I don’t understand..

  36. wintervssummer on said:

    I very much love summer :)

    Someone very much loves winter :(

    I Wish to know whom more :)

    For what you love winter?

    For what you love summer? Let’s argue :)

  37. joshkrz on said:

    wow, your too modest lol.

    Thanks alot,i did one of these once and it looks alright, just i used slanted rectangles with about 60% transparencey instead of the circles. youve made me see my mistakes :) thanks

  38. Pingback: 110+ Awesome Resources for Popular Adobe Products | Spoonfed Design

  39. Pingback: Mar-19-2009 web design photoshop links | w3feeds

  40. Vlood on said:

    If someone would only tell me how to do those “long circle segments” in FW… but in general – very interesting tutorial!

  41. Pingback: Designfeed.me » 40+ High Quality Adobe Fireworks Tutorials, Resources & PNG files

  42. Michel on said:

    Impressive work, thank you! :-)

    This is real close to the original Vista wallpaper. And it looks good! Keep up the good work! :-)

  43. Keith D on said:

    Stunning effect.

    Certainly looks like the real thing… but I’m not sure that I could manage it.

    Thanks for sharing

    Keith D

  44. Pingback: 65 Photoshop Fireworks Tutorials » TemplateLite.com

  48. Pingback: TP: tutorial gesucht - desktopbilder wie beim mac erstellen - TP Hilfe Forum -- Anleitung - Tutorial - Workshop...

  49. Pingback: top five tutorial Fireworks « Garimpo Web

  51. Usman on said:

    Cool Work Man, you are a PRO!

    i m totally amazed. looking for that kind of work for a long time, thnx

    Keep doing more like this

  52. Pingback: Adobe Fireworks Tutorials and Downloads – Best of « Smashing Magazine

  55. Pingback: 【003】Fireworksのチュートリアルをしてみる ｜ 新米WEB家ブログ｜Muracchi.com

  57. Pingback: Create Vista Inspired Wallpapers in Fireworks- Rated Tutorials

  58. gold on said:

    Gut zu Wissen. Kommt hier noch ein weiterer Beitrag? Würde gern einiges mehr darüber hören. Könntest du mir per Mail antworten?

  59. Pingback: Criando Wallpaper do Vista |

  61. Pingback: 70+ Adobe Fireworks Resources – Is there a future for Fireworks? - Speckyboy Design Magazine

  62. Pingback: Geek is a Lift-Style. »Archive » Adobe Fireworks Tutorials and Downloads – Best of

  63. Pingback: 35 Excellent Adobe Fireworks Tutorials » abdie.web.id

  65. Pingback: 20+ High Quality Adobe Fireworks Tutorials

  67. Pingback: 几个简单漂亮的FireWorks教程 _ 设计之道_设计之道修远兮，吾将上下而求索。

  68. Pingback: Criando Wallpaper do Vista | Vitor Carvalho

  69. Pingback: Criando Wallpaper do Vista | Vitor Carvalho | Blog

  70. Pingback: 铭家 » 35个优秀的Adobe Fireworks制作案

  71. rkant91 on said:

    I learnt that Peel Sticker effect from your tuts… It was very nice learning here for beginners. Even your Vista-like effect is to good…. I am regular to firetuts….

  73. Pingback: Firetuts.com » Blog Archive » Create Mac-like wallpapers with Fireworks

  75. Pingback: 40 Basic and Important Tutorials for Every Designer (using Fireworks) | AEXT.NET MAGAZINE

  76. Pingback: 20 Tutorials For Learning Adobe Fireworks Basics | Creative Nerds