JMA501
Assignment 3Text ProjectPoints:55
You are to use Illustrator to create this recipe:
Create a Recipe folder inside Assignments
- Create an Images folder inside Recipe:
Once your assignment is finished, saveyour finished recipe two ways:
1.)As a pdf inside yourUSB drive’s /Assignments/Recipe/Imagesfolderand
2.)As a GIF (To place on an html page) in that same folder.
You will create a new html page and insert the gif and a link to your Portfolio index page
You will also create a link from portfolio index.htm to the new recipe page Finally, you will use Dreamweaver to FTP the the recipe, and the revised Portfolio index page.
Here is the scoring rubric (the actual instructions show after the scoring portion):
- 2 columns (10 points)
- Your name on the path, not mine: 10 points
- Red text placed and wrapped around the logo: 10 points
- Green heading (5 points)
- Fancy border…if you can’t find the one in the instructions, choose another border(5 points)
- 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. (10 points) 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 schedule page, and unzip to your newAssignments/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
- 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…what’s that? Nothing is supposed to happen, that’s just the layer where you’ll add the actual content
- Select the ellipsetooland click on the artboard, then specify:
- 2.3” wide
- 1.7” tall
- No fill
- Use the Selection tool (black arrow) 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 thebounding box
- We’re going to use the scissors tool to cut the ellipse into two halves
- Select the ellipse
- 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
- 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 theblack 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 YourFirstName’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:
- 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
- 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 boxin 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)
- Select the layer (To achieve…) in the above palette
- 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 thegreen 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 CrimsonRed:
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…soymilkor 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>BrushLibraries>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.pdfinside Assignments/Recipe on your USB drive
- Use Dreamweaver to FTP the pdf to your portfolio’s Assignments/images folder
- Link your Portfolio index page to the recipe.pdf andname the link “Recipe”
- Submit via Blackboard
Note: You could save the recipe as a jpg, create a new HTML page and insert the jpg. Then, link the portfolio index page to the new HTML page. That way, you could add a Home link on the recipe page back to index…just a thought!! In fact, worth extra 10 points!!!)
That’s it…