Creating A Graphical Signature In Fireworks...

[pilgrim_of_mini-monkeys 0]

Fireworks Tutorial 2

Creating a graphical signature.

 

 

The Way Things Work:

1. All steps are highlighted in blue.

2. When point of reference for an object location within a document it is shown as (x,y). The (x) stands for the distance from the left edge and the (y) represents the distance from the top edge. For example, if (0,10) is displayed, then the object will be on the left edge of the document, 10 pixels down from the top edge.

3. Screenshots of the current progress will be given when needed. Note that not all of the steps will include a screenshot and some may have more.

 

What you need:

1. Tutorial_Files.zip

2. Macromedia Extension Manager

 

 

Step 1:

We need to start off with a document. I would say that for making a standard sized signature, that we need it to be noticeable but not in your face. A 400x150 pixel document is probably the best size and well within most forum sites restrictions. As with most of my work, I will be using 99px/cm resolution and a white background.

 

Step 2:

Next, using the Rectangle tool, create a rectangle that is 400x150 pixels at (0,0). Set the colour as #666666 and the stroke to none. This will serve as our background to the signature.

 

 

Step 3:

It?s time to add a little annoying dude. Let?s put a render of Spongebob on it. To do this, you must first download Tutorial_Files.zip (bottom of this tutorial) and extract to a directory in which you can locate it easily. Once you have the files, in Fireworks, go to File > Open and locate spbob.jpg and open it. At the moment he is a little big and has the problem of having a white background. Before we do any editing of our little friend, we need to put him in the right place. So copy (or cut) and paste him into the original document (the one you are creating the signature in). A prompt will come up asking you if you would like to resample him. Click on Default Resolution. I am unsure why it comes up, and all I have figured out is that it messes the size of it up when clicking on the other choice.

 

 

Step 4:

At the moment our little dude is a bit too big. Go to Modify > Transform > Scale, this will allow us to change his size. Using the Bottom Right corner, resize the image so that he covers from top to bottom.

 

Step 5:

Now for a little bit of magic, literally. We have to get rid of the white behind him. Select the Magic Wand Tool, and click on the white background. You will see marching ants (as they are so elegantly called). Then, simply press Delete to remove it. Do it with all the white background, and remember to get the bit between the flap and bulge on his hat. Hopefully your image should look like the one below.

Don?t worry about the faint jaggered white line that surrounds him. Once we have finished, it will not be noticeable.

 

 

Step 6:

Our signature is coming along well. Next it is time for a jazzy-smoked background. Create a new document, with the same dimensions as this one (400x150 @ 99px/cm: #666666 background). I know that the background is different from usual, but we are only designing the smoke in this one. Select the Brush tool, colour: #DF9C2B; brush size: 8; stroke: Oil > Broad Splatter; edge: 35; texture: Grain @ 30%. Quickly move your brush over the document, creating a star-field like bitmap. Also, emphasise random places.

Then use Effects > Blur > Zoom Blur. Set the amount to 50 and the quality to 100. This should give you an explosion type effect. If you are wondering why we are using the Effects (usually for vector) rather than the Filter, is that we will be placing the bitmap in a different location to where it is now in the main document. With the Filter, it only modifies the image to encompass the document, where as the Effects makes it so that it continues out of the workspace. Copy and Paste that image into the main document and it should automatically go behind Spongebob. If it doesn?t, then change its order in the layers panel. Now, we are going to change where about it is in the document and its size. Make it 619x232 at (69,-94). This will make it more inline with the explosion in his eyes. So far we should have (similar):

 

Step 7:

That?s the first part of the signature done, now for the harder part. Now we need a stronger grunge feel. Select the Pen tool. It is a vector path-drawing tool. The skill behind the pen involves time. You need to go slowly and use little spaces between each point to make it look right. Set it at colour: #FFFFFF; thickness: 28; stroke: Basic > Soft-rounded; edge: 100; texture: Smoky. If you do not have any of the textures that I feature in this Tutorial, you can find them in the Tutorial_Files.zip. The readme explains how to install the textures. Produce a path like the one below.

The smoky texture will help with our compilation.

 

Copy and paste the path into the main document. Then, press Ctrl + Down Arrow twice to get the image behind Spongebob. We haven?t finished with it yet though. It doesn?t look ?grungey? enough. Let?s spice it up a little. Use the Effects (in Properties Panel) Adjust Colour > Colour Fill, use Saturation for Blend mode, the colour as #CC9900 and at 100%. This has given the edge of it a ?grungey? feel.

Below is what you should have (or like):

 

Step 8:

Before we add any more effects, we?re going jazz Spongebob up a little. Change his transparency to 80%. Now, let?s add a glow. Use the Effects > Shadow and Glow > Glow. Set the height: 5; colour: #FFFFFF; transparency: 75%; edge: 5; offset: 0. He should now look a bit like a ghost. Time to make him blend in a little more, go to Effects > Adjust Colour > Colour Fill, set the blend mode at normal, colour to #CC9900 and the transparency to 35%. The compilation should look something like this:

As you can see the jaggered white border around him has gone (unless you squint scrupulously at the screen). And he looks more like a signature character.

 

 

Step 9:

Time to return to the grunge background. The white path still remains, but we are going to leave it for a while whilst we get the master background done. Create the following (or try to) path. It will take some time (it took me 10 minutes to think and draw) and do it in a new document (400x150 @ 99px/cm; colour: #666666).

Once drawn, change the pen size: 12; stroke: Oil > Textured Bristle; edge: 100; texture: Smokey @ 100%. Now use the Effects > Adjust Colour > Colour Fill, have the blend mode set to Saturation, the colour as #C6781F and the transparency at 35%. Now comes the second part of the master-background. A new texture is going to be used called DM-dots2 which can be found in the Tutorial_Files.zip. If you are struggling with the path above, you can find it in the Tutorial_Files.zip, along with all the files I use, along with a copy of the actual Tutorial (tut2.doc).

 

Select the Brush tool, colour: #FFFFFF; brush size: 12; stroke: Unnatural > Paint Splatter; edge: 100; texture: DM-Dots2 @ 100%. Quickly move the brush horizontally across the document. Then change the bitmap transparency to 50% and send it to the back (Ctrl + Down Arrow) to create an affect like the one below:

The grunge is steadily coming along.

 

 

Step 10:

I think it is about time we finished that master-background. Create a new document with the same properties as the present one. Select the Brush tool, colour: #FFFFFF; brush size: 25; stroke: Random > Squares; edge: 100; texture: Onyx @ 100%. Again, quickly rush the brush across in a horizontal direction.

Now with this one, we are going to change the colour. So like always, use Effects > Adjust Colour > Colour Fill. Select the Blend mode as Screen, colour to #CC9900 @ 100%. Eventually it should look like:

The above image is the best grunge look you can get with Fireworks without importing Photoshop plug-ins (which I will cover in future tutorials). Copy and paste it into the document with the complicated path and bubble-like pattern. Send this image to the back. Then set the image as 75%. Finally, the master-background should look like:

 

Step 11:

Let?s rap it up. Select all of the master background and copy & paste it into the main document. Send it right to the back, but remember to keep in front of the rectangle. Now, you might need to play around with the latest bitmap (bring it to front, whatever) and you might need to change the transparency, but I will leave that up to you. I also moved Spongebob back a bit and added some text. This is my signature for Xisto:

 

 

CLICK HERE TO GET TUTORIAL_FILES.ZIP

To get the Macromedia Extension Manager, you will need to download it (free) from Macromedia website.

[Sprite 0]

For someone that would write this much for a bunch of people using photoshop... I must say... Nice work. lol.

[Johnny 1]

For someone that would write this much for a bunch of people using photoshop... I must say... Nice work. lol.

179165[/snapback]

[i'm agreeing. This is my agreeing face. ]

[mayank 2]

well i must say a very nice tutorial!i use THE GIMP and i will try to apply this tutotial in THE GIMP.....well i am not sure how many people use THE GIMP here...if they want a tutorial on how to make this sig in THE GIMP then i can try and make one.....but now , how can i find how many people use THE GIMP here?

[Saint_Michael 3]

not bad for a firework tutorial since it lacks the right tools to use, but im going to stay with adobe though.

[wassie 0]

nice tutorial... but the pictures aren't working at my place

[thablkpanda 0]

Ownage of a Tut you got there bro, and I speak for Fireworks users all over the place, when I say that this is off the chain. Seriously.Pics don't work here either, but the flow of things sounds right. Excellent job. I'ma give this a shot as soon as I DL all the necessaries.Mr. Panda

[AlanDS 0]

Nice tutorial. Thanks a lot for this !

[Tom 0]

That's a really long tut! It wouldhelp alot more if you could add a few more images or screen shots of the result after each step!

[Slay 0]

The images aren't loading, atleast not for me. Just thought I'd let you know.