I’m a complete Fireworks puritan. Photoshop is great and I love using in conjunction with Fireworks when it comes to adding layers of texture or imagery to my designs, but using it for web design is misery distilled for me. Using shape masks and the marquee tool to make layouts!? What is that about??

I’m sure there are a few people out there devoted to Photoshop who are atleast a little curious about dipping their toes in the cool Fireworks waters, so for them and for the sake of friends of mine who are suddenly finding an interest in the web as well as for any others who might find this useful, I give you my super simple tutorials.

For this tutorial you will need 15 minutes and the use of one hand

Step 1: Open up a new document

Set up a new document, with a width and height of 400px

Step 2: Create a rectangle

Make sure you round the width and height up to equal numbers (ie 300 x 160). Set the colour fill to “Linear Gradient” and set the top parameter to #632F5C and the bottom to #2E0127 to create a smooth dark purple gradient.

Step 3: Create a Square

With a height and width of 50 px. Then, using the subselection tool (a) isolate its bottom left corner and delete it to create a triangle. Copy and paste that triangle and flip it on its horizontal and vertical axis. We’re going to use this one as the fold!

Step 4: Editing Paths

Now, select the triangle that is pointing toward the top right of the screen, drag it over the top-right corner of the rectangle and line it up nicely. Now, with the triangle selected, shift select the rectangle beneath it and from the edit paths tab or (modify > combine paths) choose the “Punch” option to use the triangle (which you selected first) to punch its path through the rectangle (which you selected second).

Step 5: Gradient and Feather

Remember the other triangle? The one pointing toward the bottom-left? Thats our fold. We’re first going to copy and past it and turn it black. Then using the properties along the bottom, we are going to change its Edge to Feather with a value of 10. If you’re doing this on a lighter background, slide its opacity down to get a smooth shadow.

The other triangle, add a gradient too it, and on the gradient slider, and little after the first colour-point add another. Make the first colour point Dark and then create a smooth medium-purple to lilac gradient. Once you have done this, position the gradient direction diagonally.

Once you have done this, stack it on top of the feathered triangle and group the two of them. Then position them over the rectangle.

Step 6: Drop Shadow

Finally, select the large rectangle and add a soft drop shadow to it, with a distance value of 0

Thats pretty much it. Fiddle with different colour schemes, drop shadow arrangements and fold-shapes to get more variety.