Using Fireworks To Create A Cool Winterland

Adobe Fireworks (free trial of it is available here) is my tool of choice for creating my web design drafts, graphics for sites, and anything else that requires me to manipulate or create graphics.

Last week I wanted to create a new theme for my Twitter feed, that would be really cool. Since it’s getting close to Christmas, and there is snow and cold, I thought a nice winterland theme would be nice, and appropriate.

So how I started was to begin with a new file, and I chose 1500px wide to make sure I would go across most major monitors. Only the hugest screens will have my image starting over to the right. Next, I laid out the spacing for the two bars at the right and left of the twitter stream. This is a judgement call. I chose to space them as if it was going to be on a 1280×1024 screen size. This is the majority of windows, so it will still miss in 800×600 and 1440×900 and other resolutions. Oh well, since Twitter does not allow anything dynamic or flexible, it will have to do.

Next step, deciding on color scheme and starting to create the elements. Since it’s a wonderland scheme, blues and greens work well. So I picked a few nice colors. For the trees, I went with a few different colors of green with a little brownish tint to make it look more real.

To create the trees, I made 3 triangles on top of each other for each pine tree. For the trees that were closer to the front, I also did a ‘combine paths’ and chose ‘union’ with an oval at the bottom of the triangles, to make it look rounded. I used the ‘chiffon’ texture at 50% which looked a lot like pine branches, and I did a gradient with a darker band in the middle, to give the tree some perspective.

The closer trees, I did a ‘Commands’, ‘creative’ and ‘add shadow’ with a blue color, and then I overlaid a gradient that faded from bluish to transparent over the trees in the back, to make them look more distant.

I also made an oval with a feathered edge, to look like a hill in front, on which the closer trees are standing.

Once I saved the completed image, I used PNG Gauntlet to compress it so that Twitter would allow me to use it for my background, and I loaded it.

It took me a few hours to complete it, and I think it turned out pretty well, do you agree?