This set of tutorials deals with one of Photoshop’s counterparts Adobe Fireworks (formerly Macromedia Fireworks). If you use this program, visit the section.  Home Raster Graphics Fireworks Mini-Layout Inspired on 9rules Design

Mini-Layout Inspired on 9rules Design


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.

image 1

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.

image 2

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.

image 3

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.

image 4

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.

Mini-Layout Inspired on 9rules Design



Author's URL: Abduzeedo
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
This set of tutorials deals with one of Photoshop’s counterparts Adobe Fireworks (formerly Macromedia Fireworks). If you use this program, visit the section. More Fireworks Tutorials: Featured Materials | Fresh Materials


Like us to: