Creating aWildlife logo jma501rev 03/24/2014

If you observe logos you will often see that they are round with text around their borders and symbols and shapes in the center. We saw examples in a previous lecture

We will have four ellipses: One for the overalloutside logo (light green above), a second for text on a path at the top (The American…), a third for text on the bottom,(Pittsburgh …) and a fourth to hold clip art (symbols) and a fill color.

Getting Started

  • Start a new document.

The default values are fine.

  • Name the document Wildlife.
  • Open the Layers panel and re-name the single layer Background
  • Deselect the Background layer

If you don’t do this, when you do the next step, you’ll end up with a sub-layer of Backgroundrather than a new layer

  • Use the Create New Layer tool to createanempty layer named Logo Elements: Drag on top of Background

  • Lock Logo Elements: and select theBackgroundlayer
  • And

Creating the Main Ellipse Shape

We’re going to create a mainellipseand then copy and paste it on top of the original ellipse:That will give us two identical ellipses. We will reduce the size of the copied ellipse. We will use the resulting smaller ellipse for “Text on a Path”

  • Select the EllipseTool(be sure youselected the Background Layer)
  • Width: 6.19”
  • Height: 6.26”
  • Fill: black
  • Stroke: none

  • Click OK
  • Move it so it’s completely on the artboard
  • Select yourellipsethen Edit>Copyand Edit>Paste in front
  • Slide the new ellipse off center:

Note we now have two ellipses (<Path>s)inside the Background layer: These ellipses are called sub-layers

  • Name the new ellipse (the top one) Text Path
  • Name the other sub-Layer (the original ellipse) Outer Ellipse

If you can’t tell which ellipse is which, click the blue dot in the Layers panel: The selected object will be obvious:

  • Move the Text Path layer above the Outer Ellipse: (mine was already)

Adding Type on a path

The Text Path ellipse will be used as a path for some text to follow. Specifically, this text: The American Society for Wildlife Advancement

  • We will use Transformpanel to make the Text Pathellipse a bit smaller than the original one,because it has to fit inside the outerellipse

Using the Transform panel to resize objects

  • Select the Textpath sub-layer
  • Click the blue dot to select the actual artwork in the TextPathsub-layer.
  • Open the Transform panel
  • Use 5.3” x 5.3” as the new width and height:
  • Press Tab key
  • With that re-sized ellipse selected, choose Type on a Path tool.
  • Click near the middle anchor point on the left of the ellipse and it will look like the ellipse disappeared. Type on a Path removes fills and strokes. Your document should look like this
  • Hide the Outer Ellipse sub layer to make it easier to work on the Text Path ellipse
  • Type “The American Society for Wildlife Advancement”

Changing the Font

Now we need to change the font. To do so:

  • Select the text :Use the Selection tool (black arrow) and triple click the text to select it
  • Open the Character panel:
  • Click Character in Control Area or Window>Type>Character
  • Because we will use the logo on a Web site, choose a sans serif font: Trebuchet, 24 points:
  • Select the path (ellipse)
  • Use the handle (bracket) to center the text:

If you don’t see the handle, re-select the ellipse with the Selection tool

And

  • With the text selected, double-click the Fill tool (to colortext) and enter #CC2957 as the color value, a light red
  • Here is the Color Pickerwhere you enter the hex value:
  • Click OK

Result:

  • Show (unhide) the Outer Ellipse
  • Drag the smaller text-ellipse on top of the main ellipse:

It is good practice to periodically save your work. As we have done in other modules, we can save the document with a different name so we can revert back to a previous state.

So far: Two ellipses

  • Save as WildlifeV1.aiinside InClass/Illustrator

We want to center-align the two ellipses

  • Select both ellipses
  • Use the Align tools and center vertically and horizontally

Adding another Text ona path Ellipse

This third ellipse will say Pittsburgh Pennsylvania

Thenew text is to be at the bottom of the main ellipse (Pittsburgh Pennsylvania)

  • Add another ellipse: 5.3” x 5.3” as shown below
  • Fill color doesn’t matter.
  • No stroke
  • I named it Text Bottom:

It’s the same size as the other smaller ellipse and will be used to add thetext on the bottom of the ellipse

  • Hide The American…” and Outer Ellipse sub-layers, leaving the Text Bottom layer visible:
  • Select Text Bottom sub-layer
  • Choose Type on a path and type Pittsburgh Pennsylvania

Fill: Yellow, 24 points, Trebuchet

But, we want the text to be at the bottom of the main ellipse, not the top

Try pulling down on the center handle(bracket) on the right…the text is then at the bottom; however, may be upside down. If so, we need to flip (reflect) it

If the text is upsidedown, click the handle and push it in towards the inside of the ellipse,called reflecting), Zoom in to get close up view

  • Show all the sub-layers
  • Drag the new ellipse on top of the others
  • Select all and use Align panel or the Control area to center vertically and horizontally:
  • Save as WildlifeV2.ai

Adding the logo elements

  • Unlock the Logo Elements layer and lock the Background layer:

Logo Elements layer is where we add another ellipse plus some symbols

  • We need a fourth ellipse; this one we will feather, fill with a blue color and add symbols such as: rocks, trees, clouds and so on. This ellipse is to fit insde the other ellipses, so will be smaller than the others.
  • Create a new ellipse: 5.0” by 5.0”
  • Make it a light blue …the CMYK values are below

I used:

  • C: 51.6%
  • M:0%
  • Y:10.98 %
  • K:0%

Softening Edges of a Shape

To soften the edges of the new ellipse:

  • Choose Effects>Stylize>Feather
  • Make it be 1”
  • Check the Preview box
  • Position it inside the other ellipses
  • As usual, use the Align panel to center everything (You will probably need to unlock the BackgroundLayer)

Now we have four ellipses: Outer container, 2 type-on- a -path and an inner, blue” one

You might lock the blue ellipse Path>and Background so you don’t move them accidentally,

  • Unlock logo elements, if necessary, because that’s where we’ll add the symbols

Adding Symbols

  • Let’s add some nature-related symbols.
  • Select the logo elements layer

Selecting a Symbol Library…you should recall how to do this

  • Open the Symbol panel
  • Click itspanel menu
  • Choose Open Symbol LibraryNature

If you drag the mouse over a symbol, the tool tip provides a brief description of that symbol.

  • Drag a tree or two: and some rocks, grass, bugs, clouds, trees

Practice: Scale, change stacking order to move objects around. My current layer stack:

  • Save as WildlifeV3
  • Add a few more symbols, make sure clouds are on top of stacking order:

Changing the Stacking Order

Notice anything unusual? It would make more sense if the clouds were behind everything. To do so, drag the cloud elementsdown in the list you see. That way, clouds will be below the other objects

Save aswildlifev4.ai

Using Related Colors

In a previous module, we discussed Kuler harmonious colors. Let’s use the concept of using related colors and modify our logo to use nature-related colors.

Instead of Kuler, we’ll use some Illustrator harmonious colors. First, we need to open the Swatch panel.

There are many ways to show colors of a particular genre. Here is one such method.

  • Open Swatches Panel
  • Open its swatches panel menu
  • ChooseOpen SwatchLibrary
  • Find/show the Nature>Landscape

This displays the color swatches shown next

  • Lock the Logo Elements layer, andunlock the Backgroundlayer because that is what contains the original objects we will re-color the ellipses and text on a path.

We will first change the fill color of the large originally black, ellipse.

  • Select the Outer Ellipse

Make sure the Fill tool is selected, not the Stroke

  • Click in the Landscape panel on the color you want. I chose a dark green; thelastonein the second row
  • Select the inner ellipse, the one that’s feathered-blue and named <path> …

Make sure it’s at the top of the Background layer

  • Click on the actual blue ellipse to select it, or the small <path> circle:
  • Select the Fill tool:
  • Choose a lighter green:Choose the color that is third from the right

Result:

Note: Layers don’t select OBJECTS; they select layers so they can be moved. To select art, click the tiny circles

Now, change the text colors. Let’s make both text items be the same green color. We want a contrasting color so the text stands out from the background.

  • Select both text layers:Shift-Clickon the blue circles
  • Select the sub layer for “The American…” And shift-click on the Pittsburgh…layer
  • See that they are both selected (Click the small circles to actually select the text):
  • Click on Fill tool
  • Change the color to a light green (2nd from the left):
  • Result:

Let’s add a black stroke to the main ellipse border

  • Select the outer ellipse(Click its small circle again)
  • Select the stroke
  • Make it black, 8 points:
  • Decide to change mind: Change stroke color to be a Landscape light green: Choose 4th from right

Save the logo as WildLifeFinal.ai

Grouping and Resizing

  • Drag over everything
  • Or use Select>Allor Ctrl-A
  • Object>Group
  • Show bounding box
  • Hold down Shift key, which maintains the aspect ratio, and drag the bounding box to resize: (or transform, or scale tools)

My elements didn’t get selected: Check to see if Logo Elements is locked; If so, unlock

OOPs…the stroke didn’t resize

Scaling a Stroke

You can force the stroke to scale if you open the menu options menu on the Transform panel, and checkScale Strokes & Effects, as shown next

  • If you didn’t scale the stroke, then manually, reset stroke to 2 points
  • Save as WildlifeFinal.ai

Saving for the Web

Now, we want to save the logo for a Web site. We don’t want entire page, just the object. Recall, If you Save for Web, the entire page will be selected.

We need to crop the artboard...have shown before… skip

Crop

  • Choose the Artboard tool
  • Resize the artboard
  • Choose File>Save for Web
  • Choose gif or png-8, and make white the transparent color

One final reminder: When saved for Web, the vector object becomes a bitmap (usually a gif), which you shouldn’t modify thereafter

Questions?

WildlifePage 1