Logo Replication

by Ben Taylor   | filed under Flash and ActionScript

Have you ever wanted to use a band or company's logo in a Flash animation? The problem with that is, you'd have to import an image of the logo, which wouldn't move smoothly and would lose quality. This tutorial will show you how to replicate the logo of your choice. We're going to be using Limp Bizkit's logo. Here's how it will look when finished:

1. Open a new file in Flash. The window size doesn't matter.
2. Download this file and import it into the movie.
3. Lock the layer and create a new layer above it.

[ lock the layer ]

4. Now choose the Line Tool.

You'll notice that the top of the left box of the logo and all the letter heights match. So first thing's first, draw three lines: one at the top of the logo, one at the bottom, and one at the top of the smaller letters. All lines should go on Layer 2.

Now, I'm going to take a wild guess and bet that you don't have the font that Limp Bizkit is written in. Ah, well in that case you can't continue with this...just kidding, shall we continue?

5. Draw a vertical line and move it into position to the left of the "L", then draw another and move it into the position to the right of the "L".

6. Left click once on the left line of the "L", then hold down the shift key and left click once on the right line of the "L".
7. Press Ctrl+D and the lines will duplicate. Now hold down the shift key and press the up arrow once. Now shimmy the two selected lines right a bit until they line up with the "i".

[ I made the lines blue just to show you where to put them. ]

8. Add the rest of the lines to finish off the "i".
9. If you left click once on a small section of line that is no longer needed, you can select it and press delete. Be careful though, because if you double click, it'll select all the lines touching it and you will delete them all.
10. So now you pretty much know how to complete the rest of the letters. You duplicate the lines and put them wherever you see similar looking sizes. But I hear you asking, "How do I do the curves?!" This is the fun bit!
11. We'll use the letter "p" as our example. As we said in Step 7, duplicate the two lines and bring them over. Now duplicate just one of them and move it to the right of "p".

[ Again, I made the lines blue just to show you where to put them. ]

12. Now make a line from the start of the "p" curve to the bottom of it, as shown.

13. As said in Step IX, you can now delete some lines. Look at the right of the screenshot to see which lines I deleted.
14. Now if you move your cursor to the middle of that new diagonal line and just above it, you will see a little curve symbol appear under it. Click and hold, then move your mouse up a bit and you'll see the line start to curve. Note: don't click the line.

Congratulations! You now know how to curve! Curving can be a little tricky at first, but that's what the Undo option is there for. If it isn't perfect, just undo it and try again.

Going through the whole logo would mean a lot of writing for me and a lot of reading for you. If you've read through this tutorial, you now have the skills to complete the rest of the logo. After you've finished the lines, you can then fill the logo and it'll look great.

Thanks for reading and good luck!

Just a final word before we wrap up. What you've seen here is freshly baked content without added preservatives, artificial intelligence, ads, and algorithm-driven doodads. A huge thank you to all of you who buy kirupa's books, became a paid subscriber, watch the videos, and/or interact on the forums.

Your support keeps this site going!

Ben Taylor