Abduzeedo Job Board banner in Fireworks

fabiano — Wed, 10 Sep 2008 14:59:52 +0000

A short time ago Fabio wrote a tutorial showing us how to create an image inspired by Andy Gilmore's work. I really liked that technique and decided that it would be cool to do something like that in Fireworks as well.

In this tutorial I will show you how to create a nice effect for banners, and we will use this technique for the Abduzeedo Job Board banner. We released the Abduzeedo Job Board a few days ago, and now we will start promoting it. The idea of this banner is exactly that; to demonstrate why you should post your job in our job board and also the new price. I hope you enjoy this new Fireworks tutorial. Feel free to send suggestions for new FW tutorials.

STEP 1 - OPEN FILE

First open a new file with dimensions of 480 x 180px and fill the background with black #000.

STEP 2 - CREATING THE FIRST ELIPSE

Now we're going to create the main element of the tutorial, an elipse. Draw a simple elipse, then apply a Linear Gradient from the color #003734 to #000. Note that we have a border of 2px with some style. The color is #098191, the type is Graphite, and it has a Grain Texture of 15%. Also, we will use a Noise Filter set at 2.

STEP 3 - THE ELIPSE GROUP

We've just created the first elipse; now let's draw the others. We're going to do that by just duplicating and changing the colors and shadow of each one. See in the list below how each should be styled:

Elipse 1- Gradient: #125A5F to #000 - Border: #33CCCC - Shadow: 28, 100%, 35
Elipse 2- Gradient: #025F4E to #000 - Border: #33CCCC - Shadow: 27, 100%, 32
Elipse 3- Gradient: #2C5777 to #000 - Border: #0099FF - Shadow: 26, 100%, 32
Elipse 4- Solid #000 - Feather: 85 - Shadow: 30, 100%, 30

STEP 4 - STARTING THE EFFECTS

We're almost there. Now you must group all five elispses we've made. Just duplicate this group, and in the top layer group apply a Color Dodge filter. See in the image how the layers are through this step.

STEP 5 - MIRRORING

In this step you will select one of the groups, duplicate it, and go to Modify > Transform > Flip Horizontal. After that apply the Color Dodge filter to this group. Now for the last duplication duplicate the group you just mirrored and change the filter to Screen. Take a look at the image and you will see all the groups and their own filters.

STEP 6 - ADD ELEMENTS

Ok, we're there! The effect has been created. Now just place your unique elements, your logo, some text, etc...

FINAL RESULT

The effect is quite simple, isn't it? Yet with this simple effect we can create great images. Choosing the right fonts and paying close attention to placing text in the best position relating to the other elements is key to allowing you to make great layouts!

Now share your experiments with us!

Editor: David Parrott

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.

job board