Tutorials Navigation

Tutorials :: New :: Popular :: Top Rated

Tutorials: 18,326 Categories: 12

Total Tutorial Views: 41,428,453

Adobe Fireworks - Gaming Logo Tutorial

Tutorial Name: Adobe Fireworks - Gaming Logo Tutorial  

Category: PC Tutorials

Submitted By: MG4

Date Added:

Comments: 0

Views: 1,555

Related Forum: PC Building Forum

Share:

Step 1

Open a new canvas, 540x400. Cover the whole canvas with a vertical gradient, #000388 (top) to #3A7ABE (bottom). Change the name of this layer to "back".

Step 2

Add a new layer named "post". In this layer create a rectangle, 25px wide, going from near the top to off the bottom of the canvas. Set the sfill to #babab0. Add a noise filter; amount 5, no color.



Step 3

Duplicate the post rectangle from step 2 (Ctrl-shift-D). Give it a horizontal gradient; #333333 on the sides, #ffffff in the middle. Set the transparency levels from 100% on the sides, 50% in the middle, and 0% in between, as follows. Make sure the gradient is shifted slightly to the left.



Step 4

To add a slight grunge effect, add a vector path going down the middle of the rectangle.



Color = #666666. Gaussian Blur = 5. In the Layers panel, move the path below the gradient from step 3 (Ctrl-dn).

Step 5

Add a new layer named "sign". In this layer, add a vector shape like this one:



Color = #dddddd. Set the edge to Feather=1.

Add a very slight bevel, to give it some depth.



Duplicate the sign shape and give it an inset path; inside, width 10, square corners. Set the smaller path fill to a dark blue (#071C4C).

Step 6

Next, we'll divide the smaller shape into two sections. Draw a rectangle across the blue shape, height=10px, as such:



Select the new rectangle and the blue shape, punch them (alt-m, o, p), then split the two pieces apart (Ctrl-Alt-J). Change the fill of the top shape to #990000, and here's the result.



Step 7

Now to add some highlight, duplicate the original sign shape and raise it above the two smaller shapes in the Layers panel (Ctrl-up, twice). Give it a horizontal gradient from white/100% (left) to white/0% (right), and set the Blend Mode to Fuzzy Light, 80%. That's starting to look better.



Step 8

Create a new layer named "text", and add the text to it. I used Ariel Bold. The sign looks too clean: it needs some grime. Duplicate the original sign shape again and drag it up to the text layer, on top. Set the fill to #333300, add texture Swish/100%/transparent, add Gaussian Blur/.5, and add Blend Mode Average/40%.



Step 9

Now we'll work on the sky. Lock the layers except Back. Give the background rectangle a texture of Parchment/5%.

To create some clouds, select the vector brush tool, set it as follows, and do some minor scribbling.



The Gaussian Blur is 8; the Motion Blur is angle=0/distance=40. Here's what mine looks like:



You can move the individual vector points around, or delete some, to adjust the look of the clouds.

Now, duplicate the clouds and rotate the new ones 180 degrees, change the Blend mode to Soft Light/100%.

Step 10

Finally, we need to add some details.

The sign should cast a shadow on the post. Duplicate the original post, raise it to the top of the Post Layer, Transform it to a height of about 50px, and let it just poke out from the bottom of the sign. Set the fill to black, with other settings as follows:



I added a point in the middle of the bottom, as you can see, then I moved it up a pixel or two, to adjust the shape of the shadow.

To create the cap on top, group the three objects in the post, then duplicate this group. Transform the new group slightly wider and very much shorter, then slide it up to the top end of the post. Add points to each object in the middle of the top and bottom, and give the shape a slight upward curve.

Now, duplicate the shadow from just above, shorten it and slide it up on the canvas as needed. Keep it below the cap in the layer. It should have a different shape from the first shadow.



Step 11

More details: bolts and rust. Draw a circle of about an 8px diameter, and add a linear gradient from white to black, and having a 45 degree angle. Using the Pen tool, draw out a rust stain, fill=#cc6600, and give it a Blend Mode of Color Burn/80%. You can see them both, enlarged, here:



Make sure the stain is under the bolt. Duplicate the bolt and stain, then slide them up near the top of the sign. Alter the shape of the rust stain. Move the new bolt and stain to the top of the Text layer, so it covers the lettering.

Step 12

Really last I thought the whole thing was too vivid, so I added a new top layer named "top" and drew out a white rectangle over the whole canvas. I gave it a Blend Mode of Soft Burn/20%.

Done.

Ratings

Current rating: 10.00 by 3 users
Please take one second and rate this tutorial...

Not a Chance
1
2
3
4
5
6
7
8
9
10
Absolutely

Comments

"Adobe Fireworks - Gaming Logo Tutorial" :: Login/Create an Account :: 0 comments

If you would like to post a comment please signin to your account or register for an account.