30 May, 2009

Howto Create a Web 2.0 Logo With Adobe Illustrator

by: Robert Kerr


Before I begin I would like to explain to those who don't know what Adobe Illustrator is, since this is the first tutorial. Adobe Illustrator is a powerful designing software tool used by pretty much all professional designers in the field. How is Illustrator different from Photoshop? Well, Photoshop is more of a modification tool while Illustrator is more of a creative tool. The layout and use is very similar but still quite a bit different. Illustrator is better for vectorized work, which is high in demand. This is so that a client can re size the design without loss of quality. Photoshop files save as .psd format while Illustrator save as .ai, but they are both cross compatible.

Okay, so now that you know a little more about the tool you will be using, let's get on with it.

Font Time

Alright, let's open Illustrator and choose the web document option. Type in whatever name you want the document to be and continue.

Now, click on the Text button on the tool's panel (T on your keyboard), then on where you want to start typing. On the top of the screen you will notice that you can change the font beside character. I am just going to use the default Myriad Pro. Remember to make each word word separate (for example [Your] [New] [Logo]), do not type them all in the same text box. This is because it limits your options in modifying the text overall.

*Important note: when resizing anything it's best to hold down shift if you want to keep it in proportion.

Here's my font. Again this is Myriad Web, the first half is semi-bold while the second is italic.

Here's my font. Again this is Myriad Web, the first half is semi-bold while the second is italic.

This is the time to play with the font and make sure it's the font you want! I will explain why a bit later but now is the time folks. Some fonts I personally love using are Rezland Logotype Font, Airstrip four and Secret Code. All of these and many more can be downloaded free at www.dafont.com.

Color it up with Gradients

a. Using the black arrow tool (V) make a box around both words and and select them. Right now the letters are a font, but in order to add gradients or other changes (other than just flat colors) we need to change them into objects. So let's do that.

b. While all the words are selected click Objects (in the top tool bar) => Expand. A box will come up about strokes and fills, just click okay. The words have become editable objects!

The words have become editable objects!

*Important note: many symbols and fonts can not be altered without doing this step. It is very important and will become one of your best friends in Illustrator.

So this logo is boring, we need to add color.

c. Select the black arrow tool again (V) and draw a box so that only the first word is selected. Then click Windows in the top tool band => Gradients (or Ctrl+F9).

Select Gradients

d. In the Gradient window select the drop down to the right the word "Type" (Gradient Fill box on left)i and choose Linear Gradients (White to Black).

Choose Linear Gradients (White to Black)

You'll notice that each LETTER has their own gradient now, instead of the entire word. We don't want this! So, let's fix it.

e. While the word is still selected click on Objects (top tool bar) => Compound Path => Make (Ctrl+8). That's better!

Make Compound Path

f. We want the gradient to go vertical, not horizontal. So while your gradient window is open (Ctrl+F9) click and type the angle to 90 degrees.

Angle Gradient to 90 Degrees

Good stuff so far, now we need to start mixing around the colors. I am going to use different hues of blue and white, use whatever you like!

g. First, let's open our Swatches window. Windows (top tool bar) => Swatches. While your first word is still selected, start grabbing colors and dragging them into different places on your Gradient Slider. Here's mine below. I replace black with dark blue, white with light blue, then dropped two medium blues on the left and right of the mid point and then finally a white in the middle, to give it that nice line.

Replacing Colors

Opaque, Translucent, Transparent

In this part we are going to make that nice, simple gloss/shade effect over the second word and try out that ever popular, reflection effect. Gradients actually play an important role in reflections and other opacity changing effects. Many times, they go hand in hand.

a. Let's start by selecting the second word and from the swatches choosing a black that is a but duller, I used the black on the bottom row third from the left.

b. Now select the shape making tool on the left main tool panel (or just M on the keyboard). Draw a rectangle covering half of the second word starting around the middle (lining up with the white line on the first word) and ending at the lowest point of the logo (in this case all letters end at the same point). The width should be perfectly covering ONLY that word and not touching the first one. Go ahead and paint it black.

The width should be perfectly covering ONLY that word and not touching the first one. Go ahead and paint it black.

c. Okay now to make the gloss effect. Grab the black arrow tool (V) and draw a box to select both the words and the black rectangle you have just made. Click on Windows => Transparency (Shift+Ctrl+F10) or if your gradient window is still open you can just click the tab left of it.

d. While the rectangle and the second word are selected, click the drop down menu on the Transparency window just under the "X" => Make Opacity Mask

Make Opacity Mask

e. You will notice the letters immediately become lighter. Uncheck the "Clip" box. You will see two small thumbnails within the transparency window. Click on the right one and set the opacity (above in the same window) to about 70%. When finished click on the left thumbnail window.

Set Opacity

If done correctly the bottom of the second word should have a nice looking shade or gloss appearance. If it does not look like this you may have forgotten to uncheck the "Clip" box or forgot to click the right window before changing the opacity. Failure to do so will change the opacity of the entire word rather than just the bottom half. Okay, so let's try this reflection thing now.

f. Grab the black arrow tool again (V) and now select the entire logo, then copy (Ctrl+C) and paste it (Ctrl+V).

g. Right click the copy and then choose => Transform => Reflect. Choose horizontal and click Ok (use preview box in the future, it helps ALOT!)

Transform / Reflect

This is going to be your reflection so go ahead and line it up with the bottom of the logo, I usually leave a little space inbetween the reflection and the lowet point of the true logo. But wait, now we need to make a fade effect on the reflection to make it look like a REAL reflection.

h. Find you shape making tool again and draw another rectangle (M) just over the reflected logo, not touching the top logo.

i. Now using the black arrow tool (V) select the rectangle and in your Gradients window, choose Linear Gradient again (White to Black). Again, type in 90 on the Angle but this time you want to click the little box to the left of the angle box called "Reverse Gradient", so that the white is on top going to black.

Important note: when using the opacity mask to create a fade effect, darker colours are blocked while lighter colors allow more of the image below to be seen.

Reverse Gradient

Your Logo should now look something like this, with the reflection being covered up with a gradient box, white being on the top to black.

j. Finally, we need to apply the good ole Opacity Mask by clicking the black arrow and selecting only the box and the words beneath it, not the top logo.

k. Open up your Transparency window again (Shift+Ctrl+F10) => drop down menu on the far right below the "x" => Make Opacity Mask.

l. You don't have to uncheck "Clip" in this case and just make sure the left thumbnail in the window is selected (which it should be already). Now turn down the Opacity to about 40% (possibly less) and you should have a logo worthy of branding your software with!

Important note: reflections should be lower if you are using a darker background as they show up easier, about 15-30%

Final Logo

Spice It Up

You can spice it up using symbols or objects, I will save that for a different tutorial but check out your "Symbols" window for some cool objects. There is a drop down list with MANY different symbols you can use that are already in web 2.0 style. Remember, if you want to change their colors you will first have to expand them or it will simply do nothing when you try.

Use the "Artboard" (or Shift+O) to properly fit your design margins, this is a huge necessity.

I hope this tutorial was useful to you all, as one of the biggest problems people have is how to make font look good. You learned a few popular methods.

See you all next time!

Having an eye catching logo can make a huge difference in branding, and a great way to use your logo to promote your site or company is by using promotional items with your logo.


This tutorial was contributed by: Graphic Designer, Robert Kerr
- A Canadian currently running a small design business near Beijing, China that specializes in brand identity/V.I. A ex-soldier in the Canadian military, he also has a strong technical background. Always ready to participate in and execute exciting, new and dynamic business ventures. Visit his website at www.rlkdesigns.com.


About willCode4Beer