Reaching the end of the electoral race to know who's running for the democrates, Barack Obama shows that one of this main concerns was the design of campaign pieces. All material released, even his website shows us that.

And now, we won't teach Obama a way to beat Hillary, but we'll be giving you some tips to rebuilt on Fireworks the background image of his site.

The orginal image is this one. So, let's begin building this image and check how some of this effects are done on Fireworks. (Remember, this is only part 1... soon, we'll teach you how to do the full CSS of it.)

STEP 1

Let's begin opening a new 1280 x 1024px document. Set #01245C as the background color. Let's use guide lines to delimit the content central area. Make all of them 160px away from the borders (left, right and top), making a 960px central area.

STEP 2

Create a 960 x 850px rectangle (it must go to the page bottom). Apply a Linear Gradient from #FFFFFF to #01245C.

STEP 3

Now let's begin building the glowing background. Select the Pen tool (P) and start drawing a shape as shown. Use a Radial Gradiente from #FFFFFF to #85CFF2 and 65% of opacity for this last color. After that, apply a 100% Feather and the texture Swish (20% of it). After that, we apply a Color Dodge and make all this shape with a 60% alpha.

STEP 4

To apply to this glowing background the color we want, we need to create 2 extra shapes. For the first one, simply copy the one we made now and modify a little bit its points making a smaller shape to create different effects everywhere. For this one, let's make Swish texture only 2% and switch from Color Dodge to Overlay.

STEP 5

For the third glowing shape, we're going to create it one more time, a little bit smaller than the last one. Apply the color #FFFFFF, Feather 100%, Texture 0%, Color Dodge and the opacity 40%.

STEP 6

Now, let's create the shadow. It will also goint to be an irregular shape. Make the shape as shown, use the color #01245C and a 22% Feather.

STEP 7

Take a look on how to order the layers and the effect done until now.

STEP 8

Now, let's create the top right area. To make that blend effect let's use another command on Fireworks. Before doing that, create a line as shown and go to Commands > Creative > Twist and Fade. Play a little bit the values and find the best result. Here, we're using the values shown.

STEP 9

Now copy this result a few times, make a very low opacity, about 8% and position it as shown. Apply some texts and other elements, here we're using a few stars. Throw all that bneath all layers, that way the lines will get a brighter glow due the Color Dodge from the other shapes.

STEP 10

For the logo area we're going to create another shape to make it look that there's a different light glowing beneath that. Use the color #FFFFFF and apply a 40% Feather. Besides that, we're also using a few extra elements, like some circles with alpha next to 5%.

STEP 11

Now only the central area is empty. We've created a shape like is shown. Apply a Linear Gradient from #FFFFFF to #336994. Then, use the rectangle beneath as a mask. Cut the created shape and paste it inside the rectangle (CTRL+SHIFT+V selecting the rectangle).

FINAL RESULT

Now place a few elements above it all to make a customized background.

Final result in full size.

The PNG file is avaiable HERE to download.

Author: Fabiano Meneghetti | If you want to write an article and have it published here send it via email to abduzeedo[at]abduzeedo.com

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.

Sponsored Links: