Mini-layout inspired on 9rules designListThumbs
Mini-layout inspired on 9rules design
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.
About the author
I'm from Brazil, co-founder of Zee with Fabio. Nowadays I like to play with Fireworks, Photoshop and improve my skills in CSS. If you wanna request some posts, please feel free to contact me or follow on Twitter.
14 Comments
Pretty sweet! Nice tutorial... I'll have to use it on the next design of 9rules :)
this is a great mini site design... I know there have been some psd to html tutorials... But I always wonder how hard it is to turn these cool designs into fully functional websites.
If i wanted to add php and mysql into a design... would it stretch out the boxes so they looked odd?
my other worry is that any cool fonts i wanted to use would not be available online?
But I will def have a go at this layout! cheers again
____________________
Learn it, pass it on.
Thanks, amazing! I never knew how to design it :p
Ironically my questions were the same as Felix…. having done some research it seems that you can specify the expansion parameters the way you want i.e. it will not disrupt the design, edges etc when it expands due to content.
I’m mos def looking forward to working with fireworks!!!
@felix & Subandrio
If you slice the page right, you should be able to expand the content.
The fonts will have to be an image format. I have read something that allows people use other fonts in their websites without making them images. I cant think of the link right now.
Buenos Días.
Soy Alvaro Bernal pero me conocen como eXamp1e. Tengo un blog recien creado similar a este pero la verdad es que a la altura de este nunca podre estar: www.examp1e.wordpress.com
Tambien tengo un foro por si te interesa: www.sizeartgfx.com
Un saludo y perfecto tutorial, me ayudara mucho.
Nice tutorial, bro, keep it up!!
Awesome Tutorial!
I'm new to Fireworks and this is much better than the lame Total Training course for FW. I'm definitely going to buy you a couple of cups of coffee.
Could you add the .png file for the tutorial. There are a lot of little things that I'm still having trouble with, especially in Step 4 where you add the content. It'd be great to learn off the file for the smaller tips and details.
Thanks!
hey
v nice tut, however i no longer have fireworks and only have CS3, does anyone no how do it in Photoshop (it doesn't have the DNA texture)
in Photoshop there is no DNA so U can do something like this:
1.rectangular Tool,fill white color,add noise about 300%,motion blur angle:90,distance : 90.
2.add new layer,the same rectangular selected area,fill color.
Layer 2 : color ( U can use Clipping Mask )
Layer 1 : noise,blur
in Photoshop there is no DNA so U can do something like this:
1.rectangular Tool,fill white color,add noise about 300%,motion blur angle:90,distance : 90.
2.add new layer,the same rectangular selected area,fill color.
Layer 2 : color ( U can use Clipping Mask )
Layer 1 : noise,blur
Tracked back to from here: http://www.presidiacreative.com/amazing-web-design-tutorials/
Nice work ,great collection. Thanks for the share.
Cool design but, the text that is inside a rounded rectangle box, when you export it to CSS how you slice it?
Post new comment