Lifted Corners - Fireworks 8 tutorial

April 11, 2008

Posted in: Computers, Fireworks, Tutorial

Tags: Adobe, Design, Fireworks, How To, Lifted Corners, Tutorial, Web, Web Design

If you run around the web, you may have noticed a trend out there with the themes people run. I’m not sure what anyone else calls it, but I call them Lifted Corners and I figured out a simple way to achieve it in Fireworks 8 (should be the same in most later versions.

There’s really not a lot of steps here and it’s pretty simple.

1.

You can do this a couple of ways, for the sake of this tutorial I’m going to use the Canvas as my background. So saying that, choose a color for your background. I would suggest white for now, it shows the shadows the best.

Another thing to think about is the width of your theme, say the content would be 780px, if that is the case I would suggest anywhere from 800 to 820 for the width of your canvas. The reason why is to allow for the shadow width.

2.

Draw a rectangle the width of your content. So in this case it would be 780px wide. The height is up to you, in this case I was thinking header so it’s only 160px high. Make a copy of it. So now you have 2 rectangles.

3.

Slide the bottom rectangle down about 10 to 15 pixels down, you can play with it later. This will help with the illusion.

4.

With the bottom rectangle selected, right click and select Transform . Then choose Skew . We need to slide the bottom edge in to make a trapazoid. You’ll end up playing with how much you slide in, but for me it was like a centimeter in.

5.

Now it’s time for the shadows. Does anyone remember how to find the opposite angle from one? Yeah I couldn’t either, but it’s not hard. We’re going to add 2 drop shadows. One on the left side and one on the right. So the first one should be like 54° which means (keep this in mind) the second angle will be 126°. So set the angle on the first one, you can leave the other settings defaulted, or change them to match mind. Now let’s create the second one, the only difference being the angle.

Now you should have a pretty neat little lifted corner image to use.

Posted in Computers, Fireworks, Tutorial