July 02, 2008 from fabiano's blog
In this tutorial we're going to show you how to create a simple header effect in a few steps, and with some vector textures, try to create a little layout in Fireworks with 9rules.com as our reference. In part 2, we're gonna do the HTML/CSS to show you how this layout reacts to the browser!
STEP 1 - HEADER BACKGROUND
To start, open a new 600x600px file, background #DBE8C4. After that, make a 600x105px rectangle at the top. Use a linear gradient, colors #669933 to #0B1005.
STEP 2 - EFFECTS
To make the stripes effects, let's use 2 overlayed textures. To make the first one, make rectangle bigger than the last one at the top of it (we're using 625x162px) and fill it with the DNA texture, color #666666. After that, apply a Motion Blur with values as shown bellow and blend mode Soft Dodge. After taht, duplicate this layer and all you have to do is change the texture to Grid 4 and blend mode to Overlay. Here we won't mask what's left, let's just create a white rectangle above it all.
STEP 3 - BODY GRADIENT
Now, make a rectangle with linear gradient for the main background. Use colors #93B956 to #DBE8C4 and leave at Y position 109. Now let's make the a nice horizontal line in the header, 1px and #C2D79A. Take a look at the picture on how the elements should look now.
STEP 4 - LAYOUT ELEMENTS
Now we don't have any more crazy effects to be done. Let's just use our creativity and add some elements to the layout. Let's use some big phrases, texts, a link list, a footer and of course, a nice icon and a title to make it look good.
FINAL RESULT
You can see the whole process is really simple... is about trying colors out, effects and try to make a good balance between the elements so we can get a fine and harmonious layout.
