Create Mac-like wallpapers with Fireworks

Posted in Resources > Wallpaper by Firetuts

Welcome to the very first tutorial of to create Mac-like wallpapers. I will show you how you can easily make one of those sleek abstract wallpapers you’ve probably seen before, with Adobe (or Macromedia) Fireworks. I shall give credit to Collis for the original tutorial for Photoshop. This tutorial, however, will also teach you a trick to color it in a different way.

1. Create a canvas in any screen size you want, (800×600, 1024×768, etc.) and set the canvas color to #CCCCCC. I use 1200×900 because I’m a widescreen fan.

2. Next, draw an oval and shape it like so; I assume you know would know how to do that. Set the fill to linear gradient and adjust the colors to #CCCCCC on one side and #FFFFFF on the other. Adjust the gradient positioning like so.


3. On top of that, create another oval and shape it like so. Set the linear gradient to #CCCCCC and #999999. Set its opacity to 50%.


4. And on top of that, create an oval but this time with an inverse curve like so. Set the fill to radial gradient with #FFFFFF on both ends, and adjust the outer edge to an opacity of 0%. Position the gradient at the top of the canvas like so. This will make the top side of the oval glow white.


5. Draw one more oval with linear gradient of #CCCCCC and #FFFFFF, like so.


Now select all the ovals and set it their Feather value to 2. This will make its edges blend better.

6. Now, draw a rectangle the size of the canvas, set it to ellipse gradient with white on both ends. Change the opacity of the edges to 0%. This will make a nice white glow in the center of the image like so. Set its opacity to 50%


7. Also, set that rectangle to overlay, something that I found to be really sweet feature.


8. Create another canvas-sized rectangle on top of that, and set it to radial gradient with #000000 on both ends and opacity of edges to 0%. Set that to overlay. This will complement the white glow in the center better, by making the edges darker.

9. Now here’s the coloring trick. Draw another rectangle the size of the canvas and fill it with any solid color you want, I shall use green. Set that to overlay. With that you will get a nice array of green shades future-style.



To make the colors even MORE interesting, first draw another canvas-size rectangle on top of everything and set a black-and-white vertical gradient like so.


Set that to overlay and watch the magic happen.


It’s little brighter but you can adjust its opacity in any way you want.

The basic idea of this this type of ‘digital abstract art’ is to play around with vectors, gradients, and opacities. And my coloring techniques are basically gradient overlays. You can adjust anything to your liking and you will most likely make a better wallpaper than this one here.

If you have anything to add, you are most welcome to leave a comment. In fact I even accept criticisms.

See also: Create Vista-like wallpapers with Fireworks



Get Source
Creative Market Ad

There're 38 comments for this post.
  1. Bless you for writing this blog! I’ve used Fireworks for years, and sometimes feel like I’m the only one who does. I’ll be a loyal reader of whatever you write!!

  2. Hey Justin,

    That was really awesome. Frankly speaking, I too had the idea that i am the only person in this world who uses Fireworks. But it was really nice to see more from the same “tribe” :-)

    Just one query. I am using Fireworks CS3. Just as when i follow the second part of the 5th point, “set Feather value to 2″, suddenly all the ovals lose their identity and their gradients are all messed up. Is that a normal behavior? After setting the feather value to 2, i had to again follow the steps from 1 through 5 to reset the gradients.

    Not sure if it was a one time bug.

    Also, Vista wallpapers go a step ahead. The standard wallpaper has some really cool effects with a lot of glow. I tried copying the style, but am not able to do it with success. Do you have any plans of writing some tutorials for that too :-)

  3. Hello Amrit, thanks for joining us.

    That bug is not unfamiliar to me.. what I do is to click on “Preview” then switch back and it should go back to normal. Either that or hide and unhide layers. This happens sometimes and I’m not sure exactly why. However its not a major issue and Fireworks rock nonetheless.

    Vista wallpapers are tricky. I haven’t seen a good Photoshop tutorial for that yet. I’ll consider writing that, as soon as I discover the secret myself.


  4. I agree totally.. Fireworks really rocks. I started off with Photoshop and Fireworks both.. but soon i found myself attracted towards Fireworks because of its simplicity.

    I went through the other tutorials on your website and found them really amazing. I discovered accidently. I had always googled for “adobe fireworks tutorial” (macromedia earlier), but never got firetuts.

    Now that i have found you, i think i can bug you with all my questions and queries. Do you have any seperate forum where you answer questions related to fireworks? Can you point me to it please. If not, then you should surely make one. There are millions of Fireworks user out there who have zillions of queries to be answered.

  5. Hello Amrit, thanks for reading firetuts.

    I appreciate your faith in my Fireworks knowledge, but I believe that this would be the responsibility of the developers at Adobe themselves. They would be the perfect people to address bugs and glitches to. Plus, I don’t like forums.

    There may come a time when I openly collect requests and answer by popular demand in the form of a tutorial.

    Thank you for your comments, keep them coming. And don’t forget to join the Facebook group!

  6. This is a great tut.

    Normally, I’m not a fan of Fireworks – I tend to do everything in Photoshop.

    This has changed my oppinion at least a little.



  7. hi

    you really did a good job

    but theres a problem

    im so good at photoshoping but i get so confused in fireworks

    i need to know how u make those ovals


  8. Thank you Chris.

    Drawing an oval is easy, shaping an oval requires you to click and drag the little squares that mark the pivotal points of a vector. Please refer to the help guide in the program itself.

    Also, I mentioned that this tutorial is based on someone else’s tutorial, which is done by Photoshop. You might want to check that out since you are a Photoshop user.

  9. I’m actually using Fireworks in all my Web Layouts. Why? Because I love the grid and the snap to point precision. And it’s really actually made for the web design. The only negative thing about Fireworks is it tends to get slow when there are a lot of layers used. Do you have any tips on how to save or make the application work faster.

    Anyway, this is a really cool website. I’ll be following and might consider submitting some tutorials in the future.

  10. No problem, Manju. Enjoy.

    Hi Dino, thanks for your input. Whenever I use Fireworks I usually restart my computer, and run Fireworks before opening anything else, if any. I know its troublesome, but thats what works for me at the moment. Thanks dude.

    As for everyone else, don’t forget to join the Adobe Fireworks Facebook group!

  11. This is a great tutorial. I am using MX 6.0 is the overlay feature not available here? What can i do instead of the overlay feature… opacity?


  12. To n r: Are you sure there isn’t an overlay option? I’m afraid opacity cannot duplicate the effects of overlay. Sorry..

  13. If you have some info/tutorial on how to reduce/eliminate gradient banding, that would be awesome. its a pain when you are using gradient over a large span like wallpapers.


  14. ashfaq on said:

    i am new to fireworks and i am still learning. so it is a great fun i have just seen.

  15. Thanks for this great tutorial. I have often wondered how I can make that type of wall papers, and here it is!!! Many thanks. Can anyone please tell me how I can make the torn paper effect with Fireworks CS3?

  16. Lolote on said:

    Thank you for this awesome tuts! Appreciate it :)

    You guys having problems with adjusting the edge opacity, do it layer by layer.

    If you do it with all shapes selected, all of their other attributes will have to become the same, thats the problem i think you might be facing.

  17. Mauricio on said:

    Hey hi!!

    It is a great job man!!!

    I’m trying to download the PNG file but I can’t, can you help me?


    • @Bob

      Use the Ellipse auto shape to create the oval shape then use the subselection tool to move the vector handle and create a inverse curve.


      Firstly use the Ellipse auto shape to create the oval shape, then create a second ellipse of the inverse curve you require. Then overlap inverse curve ellipse over first ellipse in a higher layer, select both elements and select Modify > Combine Paths > punch. This should give you the desired oval with inverse curve.