Why do so many people use Photoshop for web design? I've never got the big deal. I can see it's great software, but for web design, really? Is it any better than Fireworks?

In the past I've been sent PSD files by design agencies, from which I've had to then create a website. Slicing and exporting images is easy enough, but as soon as I need to make a tweak I'm completely lost and find it completely counter-intuitive - almost impossible - to use.

On the other hand when I'm sent a Fireworks file it's a doddle. Fireworks is completely intuitive. That's one of the reasons I've stuck with using the same graphic designer for so long - not only is he good at what he does, but he does it in Fireworks, which makes my life simpler, as I don't need to go back to him for any minor changes.

Me, The Graphic Designer

With Fireworks I can play at being the graphic designer.

Case in point - I just worked on a website for a self-catering holiday let. The availability calendar needed to highlight cases where it was not available for booking, but the owner's other property was. And vice versa on the calendar for the other site. They both needed to cross-sell each other.

The idea I came up with was to have the corner of a cell in the calendar's table appear folded back to reveal the alternate availability. Here's an example:

From the above you should be able to work out that all the green days are available to book. Those in solid red aren't and those that are red with a folded corner aren't available but are at the other property.

The folded corner acts as a link and takes the user to the other property's website. It has a Title attribute on the link to display a tooltip to explain this.

The concept works for me, as I thought of it and so I don't question it. Does it work though - what do you think?

Producing The Graphic

Here's how I created the folded corner image. Hopefully it will prove just how simple Fireworks makes something like this. The fact I can do it is proof enough, as I'm not graphic designer, yet I can easily turn an idea I had in to an actual image.

First thing I did was launch Fireworks and draw a square in the "booked red" colour. To draw a square use the Rectangle tool and hold down shift as you draw it to make the sides equally-shaped (a square, derr).

Then I drew another square in the top right corner and made it the "available green" colour.

Next I chopped the smaller square in to two pieces using the Knife tool and slicing it in the direction shown.

This left me with two triangles and I changed the fill colour of one to white, which produced a very primitive folded corner.

To make it look a little bit more professional I then used the Pen tool to change the shape of the folder corner to look more natural, as below.

To use the Pen tool I selected the white corner, chose the Pen tool from the pallette (highlighted above) and then click-dragged the lower left corner of the triangle. This changed the two straight sides in to "freeform" shapes, which I could make any shape I liked by dragging the lines you see around. To finish using the Pen tool I double-clicked the top corner of the triangle to close it off.

As one final step I then added a drop shadow to the folder corner using the Filters area of the Properties pane, as highlighted below.

And there you have it. All I had to do then was export the image using a Web Slice and job done!

Fireworks is one of my essential tools and has been for years. Once you get to know each of the tools available you can quickly apply them all to come up with things like the above.

I wouldn't even know where to start if I needed to do this in Photoshop....