Flash Explained

In this detailed lesson, you will see how easy and quick you can make a great-looking glossy logo in Flash, using its design tools. This logo can in turn be used in a header or as a part of your overall Flash website design. You will learn the following techniques and tricks:

• How to create vector letter shapes from a textfield,
• How to give a neat stroke to the letters,
• How to apply a linear gradient color fill only to a part of your logo (and make it look very cool),
• How to create a small glowing effect,
• How to create a soft background light effect and more.

Creating the main logo graphics

1 Open a new Flash document. You can leave the default dimensions of the stage (550x400 pixels), since you are going to make a really big logo.

2 Call the first layer logo main. Don't worry about the frames and keyframes in your timeline, because there won't be any other than the first ones. No animation in this tutorial! 🙂

3 Select the Text tool (T). Go to the Property inspector below the scene. Choose the following options:

1. Select Static Text — you will turn this text into shapes later, so there is no better option than the Static one.
2. Select a nice, big, fat font :-).
3. Set the size of the font to a value above 90. Flash will let you select a size up to 96 if you use the slider next to this option, but you can type in bigger values manually (like 120 etc).
4. Choose a color: I selected #0066CC, a nice, standard shade of blue.
5. If you are working in Flash 8, select Anti-alias for readability. If not (or if you are making your SWF for previous versions of Flash player), select the rendering option made for animation.

4 Click on the stage and type anything you like — your logo word, slogan or anything you will put on your Flash website. Press Esc on your keyboard to exit the text typing mode of your newly made static text field. A thin azure frame will appear around your text field.

5 Select Modify > Break Apart. Your text field will now be separated into individual letters, each of which is a text field in itself.

6 Repeat the previous step — break apart the individual letter text fields. Shortcut key for breaking apart a symbol or a group: Ctrl+B. The characters have now become pure vector shapes.

7 Select the Ink Bottle tool (S). In the Property inspector, select hairline as type. Choose some darker hue of the color that you used for the text. I chose #004284.

8 Click on each vector-letter shape to give it a nice, thin stroke.

Ok, the basic shape and graphics for the logo are finished. Let me show you now how to create a glow for it.

Top of page

Creating the glowing effect for the logo

9 Select the whole logo drawn so far, both the fill and the outlines. Do this either by using the Selection tool (V), by clicking and dragging your mouse until you encompass the whole logo, or by simply pressing Ctrl+A. This selects everything that is currently present inside your document.

10 Copy the selected shapes by pressing Ctrl+C.

11 Lock this layer. Make a new one and call it glow.

12 Press Ctrl+Shift+V (or select Edit > Paste in Place) to paste the copied shapes in the glow layer, exactly over the original ones.

13 Now, select the newly pasted shapes again. You must do that if you wish for the stroke options to appear in the Property inspector.

14 Once that they have appeared, select #CEE7FF (a very light blue) for the stroke color (see 1 in the image below). Also, type in 7 as line thickness (see 2). The line will switch to Solid automatically.

And the change is immediately visible:

15 Lock the current layer (glow) and drag it below the logo main layer.

This must be done because the glow will appear underneath the main logo shape, not above it. You will see now how to add some cool gloss on your logo.

Top of page

Creating the glossy/shiny effect for the logo

16 Hide the glow layer, so that you can work more easily. Unlock the logo main layer.

17 Select the Line tool (N). Be sure to change the color for this tool. You need to do this because you are going to draw a line which will be erased later. If the color stays the same as the one you used for the Ink Bottle tool, it will be more difficult to distinguish and find what needs to be erased later. I chose red. It is in good contrast with the other graphical elements. The type of the line should remain to be hairline.

18 Hold down Shift, click and draw a horizontal line somewhere below the logo, where there is enough space to manipulate it. The line should be longer than the total width of the logo, like shown in the image below.

19 Select the Selection tool (V). Bring your cursor below the line you just made, somewhere in the middle of it. Click and start dragging down, until you get a curve.

20 Select the curve by clicking on it with the Selection tool.

21 While holding down Shift press the up arrow key repeatedly to start moving the curve upwards. For more precise adjustements, release Shift and use the arrow keys only.

Place the curve over the logo. It doesn't have to be positioned symmetrically in relation to the logo. In fact, moving the curve to the left or to the right may look more interesting. The point is to roughly cut the logo in half with the curve.

22 Click anywhere on the stage with the Selection tool to unselect the curve.

23 Select the Paint Bucket tool (K). Go over to the Color Mixer panel (Window > Color Mixer). Select the following values (see corresponding numbers in the screenshot below):

1. In the Type menu, select Linear. This will enable you to make a linear gradient fill.
2. Click on the small colored square on the right once to select it. In the hexadecimal color code field, enter #82C0FF.
3. Click the colored square on the left and enter #EFF8FE in the color hex code field. Your gradient should look like the one in the image below.

24 Hold down Shift (to make a perfectly vertical fill), click near the first letter's top and drag your mouse down until the paint bucket cursor reaches the red curve. Release the mouse. Compare your result to the image on the right below.

25 While still having the Paint Bucket tool active, go to the Tools panel — down to its bottom, where the Options for the current tool are shown. Click the Lock Fill icon to turn it on — it is the one displaying the little padlock picture.

26 Now just click on the upper parts of all the remaining letters. The shapes above the red curve will be uniformly filled with your colored gradient. This looks great and yet was so easy to make, thanks to the simple lock fill option. I love Flash!

All that you have to do now to finalize the logo design is remove the red curve.

27 Choose the Selection tool (V). Double-click on any segment of the red curved line to select all of it. Press either Backspace or Delete to erase it.

Here is what your final result should look like:

28 Lock the current layer and make the glow layer visible again.

Now that the logo is completed, you will learn to create a background that will add a soft radial light effect to your logo/header. This is realy eeeeeasy to do :-).

Top of page

Creating a soft radial light effect

29 Make a new layer, call it backlight and drag it under the two existing layers.

30 Select the Rectangle tool (R). Go over to the Colors part of the Tools panel. Click on the pencil icon (see 1 below) and then click on the No color icon (see 2). You can now draw a nice rectangle without it having a border.

Next, select black as the fill color.

31 Click and start dragging until you draw a rectangle that is wider and taller than the logo. I have made a rectangle that is 550 by 150 pixels big.

32 Select the Paint Bucket tool (K). Go to the Color Mixer panel and select Radial as type of fill.

33 Go to the color stripe in the lower part of the panel. Bring your cursor between the two little colored squares. A plus sign will appear next to your cursor. This means that a new color can be added to the gradient. Click and the third colored square will appear.

34 Arrange the three little squares as they appear in the image below, by clicking and dragging them. After that, change their color values so that they are equal to those on the image below: just click on each square and enter the hex code in the appropriate field, just like you did for the linear gradient before.

35 Click with the Paint bucket tool (K) on the black rectangle — somewhere near its center. I have hidden the logo in the image below so that you can better see the result.

36 Select the Gradient Transform tool (F). Click on the rectangle: the handles for adjusting and modifying the gradient will appear.

The first handle (see 1 in the screenshot below) serves to change the width of the radial blur: try clicking and dragging it — the gradient fill will contract or expand, depending on the direction you're moving your mouse.

The second handle (see 2) is used to scale the fill: you can make it bigger or smaller, but proportionately, unlike the previous handle.

The third handle (see 3) is used to rotate the gradient.

Using these three handles, try to achieve the result that is shown below:

And once you've done that, unhide the two other layers and revel in your newly made great looking logo. Done entirely in Flash, using no Photoshop at all! Check out my other basic Flash tutorials or Flash design tutorials! See you next time!

Download the .fla source file

Comments

Submit a comment