Tutorial on creating a simple

layered logo in Flash

flashbynight.com
What you will learn:

• how to build the following text logo:

Prerequisites:

• working copy of Flash version CS3 or above

• working basic knowledge of how to use the Flash interface
• no programming required

* You can download the completed source files

from here: http://www.flashbynight.com/tutes/logo

We wish to make a simple layered text logo in Flash. You could do this using Illustrator, Fireworks or
other software, but if you’re using Flash and you want something quick and easy, this is what you do.
The illustrations here are from Flash CS3.

Step 1
Open up Flash. We want to create our logo on a black background, so open up Document
Properties (CTRL + J) and set the background to black.
 Fine. Save the file under the name ‘logo.fla’ and let’s move on.

Step 2
Draw a text box on the screen. We’re going to write our logo in big letters, so choose font size 120. The
slider only goes to 96, but you can enter any size manually. We’re also going to choose Arial Rounded
MT Bold font. This font, by the way, looks good in large font sizes but looks bad in small font sizes.
We want our logo to say, ‘My Logo’. Type it in:

Step 3
Okay. We need to break up the text into shapes that we can work with and recolor. Do this by making
sure the text is selected and pressing CTRL + B twice.

Step 4
Time to play with colors. With the text still selected, open up the color inspector if it is not already open
(SHIFT + F9).

Choose a linear gradient. The default is black and white:

Black and white is no good. It’ll look nice if we have a gradient that runs from dark red to light red. Click
on the markers to change the color. (Shown here is #CC0000 and #FF6600)

Step 5
Your text should now look like this:
That’s cool, but we want the gradient to be up and down, not sideways. We need to use the Gradient
Transform Tool, and you’ll probably need to swap it over from the Free Transform Tool:

Then click on the M. It should look like this:

Click on the circle to drag the gradient round:

You could repeat this for the other letters, or you could use the eyedropper tool and paint bucket tool to
sample and paste the gradient quickly. Either way, you will end up with this:
Hmm… let’s have two colors in this logo. Use the techniques above to turn the second word two tones
of green. I used #66CC00 and #666600 to achieve this effect:

We have basically created the inner layer.

First, select the entire text and copy it to
the clipboard. Then right click on the
selected text and choose Convert To
Symbol. Name it logo1 and click OK:
Step 6

Now, right-click on the canvass and choose paste. You should have a fresh version of the logo to work
with:

What we want to do is to put a gray border on the outside of the text. First, select the line tool and
choose the following settings:

Next, choose the ink bottle tool: . Be careful not to choose the paint bucket tool instead; they look
alike. The cursor should now look like an little ink bottle.
Click on each of the letters to get this effect:
As we did above, right click on this text while it’s selected and convert it to a symbol with the name
logo2.

Step 7
We want one more layer with a white border around the outside. We need to use the line tool to select
a white line, but one that is thicker than the gray line we created earlier:

We’re going to repeat the process from step 6. Click Paste to get a third copy of the logo text on the
screen. Then use the ink tool to click on each letter. You should end up with the following:
It looks a bit odd at the moment, but don’t worry. We’ll fix it in a sec. Convert the final text to a symbol
with the name logo3.

Step 8
We are ready to put the logo together, but it is currently in the wrong order. Right click on logo1 and
select Arrange > Bring to Front.
We need the gray layer in the middle and the white layer at the back. So right click on logo3 and select
Arrange > Send to Back.
Now drop logo2 onto logo3 and drop logo1 onto logo 2. You should get the following result:
Step 9
We are almost finished. Select all three symbols, right click and select Convert to Symbol. Name the new
symbol simply ‘logo’. Now the symbol named ‘logo’ contains the three symbols logo1, logo2 and logo3.
Select the logo.
As a finishing touch, let’s add some filter effects. A bevel will make the logo stand out from the page and
give a slightly metallic look:

…and let’s add a little glow just for kicks:

Here is our finished product:

That’s it! If you have enjoyed this tutorial or found it useful, you can show your support by mentioning it
on Twitter, Facebook, Digg, StumbleUpon or another social network or by posting a link to
flashbynight.com on your blog.
Best of luck with all your Flash designs.