Tutorial on creating a simple layered logo in Flash
What you will learn:
Prerequisites:
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.
Have a look at flashbynight.com for some interesting little flash games, all made by yours truly.