Mini-layout inspired on 9rules design

Ad

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.

Written by

Fabio Sasso

I'm a Brazilian product designer based in Oakland, California currently working for Google as a Staff Designer. I am also the founder of Abduzeedo, an award-winning digital publication about design and a personal project that has become the source of inspiration for millions of designers and enthusiasts.

Ad

Ad