Assignment 4Text Project

Points:55

You are to use Illustrator to create this recipe: It’s purpose is to reinforce Illustrator text

Create a Recipe folder inside Assignments

Create an Images folder inside Recipe:

Once your assignment is finished, save your finished recipe two ways:

1.) As a pdf inside your USB drive’s /Assignments/Recipe /Images folder and

2.) As a gif (To later place on an html page) in that same folder.

You will use Dreamweaver and create a new html page. You will insert the recipe gif and add a link to your Portfolio index page (Home page)

You will also create a link from your portfolio index.htm to the new recipe page

Here is the scoring rubric (the actual instructions show after the scoring portion):

1. 2 columns (10 points)

2. Your name on the path, not mine: 10 points

3. Red text placed and wrapped around the logo: 10 points

4. Green heading (5 points)

5. Fancy border…if you can’t find the one in the instructions, choose another border (5 points)

6. Add Your name in the lower right corner: (5 points)

Recall you are to have a link from your Portfolio index.htm page that says Recipe. When clicked, the recipe page displays. and a link from recipe.htm to your portfolio index page

Instructions follow below…

Objectives: This exercise incorporates:

Opening an existing .ai file

Working with layers

Using the scissors tool

Adding text on a path

Reflecting text

Using text on a path properties

Placing a Word document

Creating a document with two columns of text

Wrapping text around an object

Using the Transform tool

Instructions

Download the zip file (Recipe Assets) from the web site, and unzip to your Assignments/Recipe/Images folder. There are two files: an Illustrator file (Recipe.ai) and a Word document:recipe.doc

Start Illustrator

File>Open and browse to recipe.ai

Choose Window>Workspace>Essentials

Choose View>Fit Artboard in Window

Choose Window>Layers

o Notice there are three layers:

Two are locked, and all three are visible. Experiment with the visibility (eyeballs)

Zoom In to the logo on the artboard

Set the Fill to none.

Select the type on path layer because you’re going to do just that!

To view the layer’s content, toggle the visibility off/on that’s the layer where you’ll add the actual content

Select the ellipse tool and click on the artboard, then specify:

o 2.3” wide

o 1.7” tall

o No fill

o Default stroke

o Use the Selection tool and move the ellipse so it fits over the logo: The box you see (If you’ve set it to display in the View menu) is the bounding box

We’re going to use the scissors tool to cut the ellipse into two halves

o Select the ellipse

o Select the scissors tool…under the eraser tool:

Click the anchor point at the middle-left edge of the ellipse

This should cut the left side of the ellipse .…see the middle anchor point on the left side in the picture above) It helps if Smart Guides

are on, then look for the word anchor as you move the scissors around

With the scissors tool still selected, repeat on the right side (Click the middle anchor point)

You should see this:

And then, if you move the cursor a bit,:

The path on the top half of the ellipse should turn a dark color:

We’re going to add text on the black path

In the Character palette, (Window>Type>Character) choose Arial, Bold, 24pt

Select the Type on a Path tool

Click on the top half (path) of the ellipse

Type Your FirstName’s in uppercase ( I used JOHN’s)

Click the Selection tool. You should see three vertical brackets; they are used to position the text

Next, adjust the position of the text:

o Use the left-most vertical bracket (a line) and slide the text to the right, so it’s centered:

Next, change the Type on a path properties

o Choose: Type>Type on a path>type on a path options

Choose these values:

Effect: Rainbow

Align to path: Center

Spacing: 0

Click the Preview box

You just lowered the baseline (We defined baseline in a previous lecture)

Click OK

Now, for the bottom part of the ellipse

Choose the type on a path tool again

Click on the lower half of the ellipse

Type: KITCHEN

It’s a mess now!

First, move the text as you did your name USE THE BRACKETS…select the text (Black arrow), then slide using the right most bracket:

Reflect the text (click and drag inwards using the center bracket)

You should see:

Move the text around using the brackets to move.

Apply the Rainbow effect, as you did earlier, and center the KITCHEN text

Save as myrecipe1.ai inside Assignments/Recipe/Images

Choose View>Actual Size

In the Layers palette, lock the type on path layer so it can’t be moved

Unlock the logo layer so we can draw on it.

Choose View>Show>Bounding Box

We want to eventually wrap some text (which we’ll place) around the logo. To do this, the text and the graphic must be on the same layer (logo, for us)

Select the logo layer

Select the type tool

Click and drag a Text box in the center of the document…don’t worry about the size, we’ll use the Transform tool to modify the size and location.

Choose Window>Transform

Select the center reference square

Enter these values:

Press Tab key after each value you enter

Be sure the text box is selected, that way when we import (place) the text, that’s where it will go

Choose File>Place and import the .doc file you unzipped earlier

Turn off all the options and Ignore the “missing font” error, if it comes up

Here is what you should see:

Next, let’s divide the text into two columns:

Select the text box

Choose Type>Area Type Options, enter 2 for the number of columns

Select your text box and try to center it on the page:

Next, we want to wrap the text around the logo:

The text and the object (logo for us) must be on the same layer…they are

Expand the logo layer:

The layer we added is now named To achieve…blah blah OR it might show up as “…”, as did mine below

Remember Stacking order?

The text box we just added (and placed the text into) has to be on a (sub) layer, below the logo (the graphic object we want to wrap around)

o Select the layer (To achieve…) in the above palette

o Drag it to the logo layer bottom:

See the result?

The text is behind the logo

Save as recipe2.ai

Select the Compound Shape layer. . . see above (it’s the green portion of the logo…play with visibility to see this)

Show the Bounding box. Select the Logo…You should see:

Now, let’s wrap (no singing!!)

Choose Object>Text Wrap>Make

Click OK (We wrapped text around the selected object)

Save as myrecipe3.ai

Format the text

Select the text box (Selection tool)

Use Type tool and click inside the text box

Choose Select>All (Or Ctrl-A)

Choose these text properties:

Tab key to apply

Let’s work with individual paragraphs next

Select the Type tool and select just the first sentence

Use these settings:

Choose the Fill tool and set the color to a Crimson Red:

The Result:

Choose Window>Type>Paragraph

Select the first sentence

Make sure the paragraph is aligned left: mine was

Try Centered, then back to Left alignment

Select the Type tool, double-click inside the text box and select the ingredients text: …10.5 package of silken tofu…to…soy milk or water, as necessary:…

Change text to Arial, Regular, 12, Kerning: Auto; leading: 16, tracking 0…Tab key to finish

Add a heading:

Select>Deselect

Insert I beam (Text tool) above the text box, after logo and type:” Green Goddess Dressing” (Note: I added the text in the middle of the text box, then moved it to the desired location)

Set its text to Arial , Bold, 22 point, tracking 200, leading auto

Select the recipe name and choose a green

Add a border

Collapse the logo layer and lock it

Unlock the Border layer

Select anywhere in the white area (i.e. in the background for the text box)

Select the Border layer

Select text box by clicking on it with the Selection tool

Choose Window>Brush Libraries>Borders>Borders_Decorative

Select the border of your choice (Use the arrows to jump to the next/previous)

I chose starburst

Adjust the placement of the border so it better fits the white box ( I had to slide the border up a bit)

Choose Select>Deselect to unselect everything

Inside the text box, in the lower right corner, type your complete name and use all caps (you might need to unlock its layer)

Save as Assignments/RecipieReciipeFinal.ai

Save again as recipe.pdf inside Assignments/Recipe on your USB drive

Save for web as recipe.gif

Start Dreamweaver (choose your site)

Create a new page named recipe.htm

Insert>Image and browse to your recipe.gif

Add a HOME link on your recipe.htm page

Add a “Recipe” link on your index.htm page (links to recipe.htm)

Submit via Blackboard