Flash Explained

Learn Flash easily.

How to make a 3-D logo in Flash

October 30th, 2008 | Author: Luka | Category: Design


In this easy Flash 8 Pro lesson, I will show you how to make a cool 3-D logo in a few easy steps. You will see:

  • How to make primary vector shapes from static text field,
  • How to apply a gradient fill to all the letters evenly,
  • How to make create a 3-D effect with your text by distorting it and putting it into perspective,
  • How to apply a drop shadow effect to the logo to add more depth to it and more.

You can see the final result below — the finished 3-D logo.

Making a vector shape from a static text field

1 Open a new Flash document.

2 Select the Text tool (T). Go over to the Property inspector and select the following options (list entries match the numbers in the image below):

  1. Select Static Text. This option is always used for animation, graphics and other cases where text doesn't change.
  2. Select a font type that you like. A word of advice here: for the 3-D logo you are going to make, you should select a strong, bold, fat font. The thin and elegant ones simply won't do the trick.
  3. Enter a large size for your font: I chose 60.
  4. Select any flat color now, you'll change it later to a gradient anyway.
  5. In the rendering options menu, select Anti-alias for animation.

Setting the properties for the static text.

3 Click anywhere on the stage with the Text tool and type your logo word, website name, etc. Hit Esc on your keyboard once you're done with typing. A blue border will appear, delineating your static text.

The logo text in its simple form.

4 While the text is still selected (the blue border around it tells you that it is), choose Modify > Break Apart. The text field will now be broken into characters, each of which is a static text field in itself.

Each character has become an independent text field.

5 Repeat the previous step: with all the new text fields selected, choose Modify > Break Apart again. You have just broken the text down to simple, base vector shapes.

The letters are simple vector shapes.

6 Click on any empty part of the stage with the Selection tool (V) to unselect the vector shapes.

Top of page

Filling the letters with a uniform gradient fill

7 Select the Paint Bucket Tool (K). Go to the Color Mixer panel. It is probably already open by default. If not, just choose Window > Color Mixer. Make a nice blue gradient fill by executing the following steps:

  1. Click on the paint bucket icon to access the fill color options.
  2. Select the Linear option in the Type drop-down menu.
  3. Click the small color square on the left.
  4. In the color hex code input field, enter #A8CEEE. The small square that you clicked a moment ago will have a light blue color assigned to it.
  5. Click on the right small square and enter #023C93 in the hex code field.

There! The linear gradient fill is ready to be used.

Creating a gradient fill in the Color Mixer panel.

8 Using the Paint Bucket tool (K), click on the uppermost part of the first letter, and while holding the mouse button, press and hold Shift and start moving your mouse downwards. You will make a perfect vertical fill.

The making of a perfectly vertical linear gradient fill.

9 While the Paint Bucket tool is still active, go to the Tools panel — you will find the Options section at its bottom. Click the Lock Fill option to enable it.

Activating the Lock Fill option.

10 Now just click on each of the vector letter shapes — you don't have to hold Shift or any other key, the letters will automatically fill up with the same gradient that you have applied to the first one.

Applying the same gradient linear fill to all the letter shapes.

The logo looks really sleek with the gradient applied uniformly.

The logo filled with the linear gradient all the way from the first to the last letter.

Let me show you how to put it into perspective :).

Top of page

Adding a 3-D effect to the logo

11 Using the Selection tool (V), select all the letter shapes. Just click anywhere outside it and start dragging your mouse until you have encompassed all shapes.

12 Select the Free Transform tool (Q). In the Options section of the Tools panel, activate the Distort option.

Enabling the Distort option for the Free Tranform Tool.

13 Bring your mouse over the lower left handle of the selected vector shapes. It will change to a white arrow.

The distort option cursor showed up.

14 Hold down Shift on your keyboard, click and start dragging your mouse to the left. The shape will begin to distort (its lower part only). Release your mouse when you feel a sufficient level of distortion has been achieved.

Distorting the letter shapes.

15 You may repeat the above step, but for an upper corner of the shape, to add a better perspective effect to the logo.

The 3-D effect applied on the logo, creating a sense of perspective.

The logo looks really cool now! But a nice shadow will cement the 3-D effect. However, filter effects cannot be applied to shapes, you must have a symbol to be able to do that. The next step explains how.

Top of page

Adding a drop shadow effect to the 3-D logo

16 With the shape selected, choose Modify > Convert to Symbol. Select Movie clip as type, call it 3-D logo or anyway you like and click OK.

Making a new movie clip in Flash.

17 You can apply a drop shadow effect to your logo now: go to the Property inspector and click on the Filters tab. Then click on the blue plus icon to access the available filters. Select the Drop Shadow filter from the menu that will show up.

Selecting a filter effect.

18 Set the options for the Drop Shadow filter as shown:

  1. Blur X and Y: 3.
  2. Strength: 150%.
  3. Quality: High.
  4. Color: black.
  5. Angle: 90°.
  6. Distance: 7.

Leave the Knockout, Inner shadow and Hide object options unchecked.

Drop Shadow filter settings.

And here's the 3-D logo in all its magnificence:

A cool 3-D logo made entirely in Flash.

You can also invert the color in the gradient, so that the lighter hue of blue appears at the logo's bottom:

The 3-D logo with a metallic look, thanks to the inversion of the gradient.

Now it looks even more three-dimensional! That's because of the small white areas appearing at the top of the letters. They were there before, but they are more apparent now because of the high contrast with the dark blue color.

How to invert the colors of the gradient? Nothing could be more easier! Just double-click on the movie clip to enter inside it, select all the letter shapes and go to the Color Mixer panel. Once there, just drag the two little blue color squares in the panel to the opposite sides of their current respective positions.

To have your 3-D logotype rendered as sharply as possible, make sure that it is positioned on round coordinates (see the X and Y fields in the image below, on the left). Also, if you have a lot of animations going on in your movie, especially if the logo is involved, you may want to turn on the Use runtime bitmap caching option. This will enable for faster animation playing.

Some additional options will allow for better rendering of the 3-D logotype.

This logo weighs just 1 KB! While as an image, it would weigh between 13 and 18 KB (depending on the type and quality of the image). Another advantage your logo has in Flash is its vector shape, which allows for scalability, without any loss to the quality. Just keep in mind that you have to change the options for the Drop Shadow filter if you are going to scale down your logo, because it would look bad if it had the same intensity applied to a smaller shape.

The small 3-D logo with different drop shadow effects applied.

Have fun creating more cool 3-D shapes, and don't forget to check out my other cool Flash design tutorials!

If you are curious about animation and 3-D in Flash, see the articles on 3-D and animation from Adobe.

Download the source .fla file with the 3-D logo

Be Sociable, Share!

Comments

Submit a comment

  • D Jan 21, 2009 at 12:36 am

    I am learning flash for my web graphics design degree. In our class we are asked to make a flash logo. I came here and did your project to make the 3d design and had a lot of fun learning what flash has to offer. I am still a newb but this was great. Thanks

  • Latvian Apr 5, 2009 at 6:20 pm

    thnx , great!

  • Essam Jun 11, 2009 at 5:47 am

    Awesome man, just what I wanted.
    thanks 🙂

  • D-Viz Jun 21, 2009 at 11:32 am

    Great post broe!!!!

  • webplore Oct 23, 2009 at 9:54 am

    I was looking for some 3d and flash design, thanks a lot nice one….

  • Owen Hines Nov 15, 2009 at 2:24 am

    Wow,
    I didn’t realize that flash could do all this.
    Your site is very helpful indeed, and your approach to explaining
    with the steps and all … very good.

    thanks.

  • oz school rocka Jan 16, 2010 at 8:19 am

    nice,,,5 star,

  • baljit singh Jan 22, 2010 at 4:22 pm

    its really cool bro i will use this logo on my new web site i launch as soon as posible

  • Jakatunggara Apr 12, 2010 at 9:48 am

    Thanks 4 all

  • seyi Akinleye Jun 10, 2010 at 11:53 am

    I am extremely thrilled with the 3-D logo in flash. Your presentation is simple and easy to understand. I am having a lot of fun learning by going through some of your tutorials since I am new to flash. Thanks for helping us!

  • Selina Aug 4, 2010 at 7:52 am

    My god you make it look so easy lol. I’m going to play around with it later in the evening to see if i can make it look as nice.

  • cool.. but the light is not real.when the light come from one side, the shadow should at the opposite side and mark with a dark area

  • Web Design Glasgow Jun 17, 2013 at 8:04 am

    Amazing! Great work, really it helpful for those who know or don’t know about 3D logo design, your explanation is awesome, step by step look like tutorial, it’s very nice. Thanks Luka, Keep your works going on.

You must log in to post a comment.