Abduzeedo Job Board banner in FireworksListThumbs

Abduzeedo Job Board banner in Fireworks

September 10, 2008

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.

Abduzeedo Job Board banner in Fireworks

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.

Abduzeedo Job Board banner in Fireworks

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

Abduzeedo Job Board banner in Fireworks

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.

Abduzeedo Job Board banner in Fireworks

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.

Abduzeedo Job Board banner in Fireworks

STEP 6 - ADD ELEMENTS

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

Abduzeedo Job Board banner in Fireworks

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!

Abduzeedo Job Board banner in Fireworks

Editor: David Parrott

About the author

User picture

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.

Sponsored Links:

More content from:

Help us to share this!

18 Comments

loswl09/11/2008

WOW!!...Very creative!!..there is so much tricks to be learnt in Photoshop!! :o0

starlight8609/11/2008

nice..simple and aesy to follow..

NaldzGraphics09/11/2008

nice tutorial.keep it up

yara09/11/2008

J'aime beaucoup, ya plus qu'a refaire sous photoshop ;-)

Bryan09/11/2008

Thanks so much for the tutorial!

husac09/11/2008

nice play! :)

check out my work http://freeartisticphotos.com

Lucas09/11/2008

Abduzeedo sempre fantástico!

Ótimo tutorial novamente.
Indiquei o site em meu blog sobre design.

Visitem!

http://2xad.blogspot.com

passem também por http://www.tmdigital.com.br

tanaka13 - Créations du Net09/15/2008

Very nice effects!

John09/25/2008

This is a Great Tutorial! Thanks!

Renan Queiroz01/10/2009

Very good! Learn more and more!!
Thanks for knowledge!

Alexis02/03/2009

This is hard, were doing it in Web Design. But it is an awesome tutorial.

Dupetrearry05/07/2009

sterling silver world of warcraft charm
http://efreg.freehost10.com/yo.html
2 tone luxury wedding rings

LowNoUshlow05/07/2009

Hello, world!
Recently I have found interesting flash - game. It has reminded me game in which I played the childhood with friends. Its name an «Head or Tails». The principle of game is based on equal odds, probability of a win - 50 %. It means, if I stake one dollar- or I lose it or win one more dollar. The maximal stake for one round – 50 dollars. Also it is possible to throw simultaneously two coins. In that case there will be three variants of the rate - "head - head", "tail - head", "tail - tail". For half an hour of game my account has replenished for forty dollars.
Still I was very pleasantly surprised with that on this site the interesting and serious affiliate program is developed. Here its conditions:
+40% from a profit of the system from the games played by users who passed on our site with your referral link.
+10% from a gain of users passed on our site with referral link.
+2.5% from cashouts of gains made by referral users
Payments - WebMoney, Liberty Reserve, Perfect Money.
I was registered, because a few pocket money never happen superfluous.
I hope this information will be useful to somebody.
In Web we trust)))

etherflame06/13/2009

Looks great! Awesome tutorial. :)

Leadayedife07/23/2009

hello : ) How u are?
q buy viagra online tramadol for dogs what is tramadol alternative to viagra order levitra ultram ultram euphoria viagra canada buy cheap viagra online uk free viagra sample query lowest tramadol price onlin how does viagra work viagra side effects viagra online cialis dosage viagra for sale ultram overdose soma drug history buy tramadol propecia side effects tramadol hydrochloride viagra oral jelly soma 350mg xenical viagra on line tramadol hcl cialis dosage cialis vs viagra buy ultram tramadol prescription tramadol dosage very cheap tramadol buy cialis ultram abuse cheap xenical viagra online stores viagra alternatives tramadol dosage muscle relaxants soma tramadol for dogs cialis online natural viagra viagra for sale without a prescription buy cheap viagra online uk tramadol hcl discount cialis cheap tramadol without prescription cialis sample tramadol addiction viagra alternatives cialis review cheap soma drug soma viagra for women order tramadol tramadol side effects free viagra in the uk problems with viagra buy viagra cialis prescription soma effects is soma a controlled substance q cheapest tramadol drugstore a ultram side effects buy cheap cialis buying viagra cialis no prescription soma soma drug toxicity cialis sample q buy soma online soma side effects viagra sale herbal viagra order cialis buy generic viagra buy ultram online generic cialis buy viagra alternative to viagra cheap generic viagra viagra dosage soma muscle relaxer uk viagra sales viagra online uk buy cialis doctor online order cialis buy cheap tramadol levitra online generic propecia order viagra buy viagra online 35008 tramadol c o d viagra sample soma addiction viagra prescription snorting ultram discount soma mix vicodin and soma where to buy viagra

OyunCambazi11/12/2009

I'm really very useful to follow a long-time see this as a blog here Thank you for your valuable information

--

peynir
- peynir yap?m? ve hakk?nda di?er her?ey.
kulevinç Kulevinç hakk?nda arad???n?z her?ey.

Post new comment

The content of this field is kept private and will not be shown publicly.

Icon Ads Wall

  • Openjobs - Oportunidades de Emprego para Profissionais de Talento
  • Zee - Irrezeestível Design Digital
  • Tradd.us - Contextual Translator
  • DesignFlavr, Inspirational Art and Design served daily
  • Signalnoise.com | The art of James White
  • Alberto Seveso - Illustrator
  • Description: Award Winning Portfolio and blog of Web Developer Anthony Woods

Do you want to advertise here?