Week 9 | Illustrator

Introduction to Adobe Illustrator CS6


Adobe Illustrator History

Adobe introduced Illustrator 1.1 was introduced in 1987, using the Bezier curve as the basis for vector graphics. These vector graphics create PostScript files visually.


Understanding Vector Graphics (Illustrator)

Vector is another word for a scalable graphic design. They are constructed shapes, colors, and placement that together, form a picture, and are ‘scalable’. Vector graphic formats include PICT, EPS, and WMF as well as PostScript and TrueType fonts.

In their original format, vector graphics are easy to alter; anything about the graphic can be changed. Vector graphics allow you to open a previously saved file, change it, and then save it again. You can open the file an unlimited number of times, change it, and then save it and you never lose the integrity of the document. They offer exceptionally high quality print; the vector file type most typically requested by printing companies is called .EPS – which is short for Encapsulated Post Script.

Adobe Illustrator creates graphics in vector format, and then from these vector images a whole multitude of other file types can be created without changing the scalable attributes of the vector file (the master file). From this master file you can create a GIF, JPEG, PNG, TIFF, XBM, BMP, and PCX file. Note, you can take a vector file and turn it into a bitmap bile but you CANNOT take a bitmap image and turn it into a vector image.

When a shape or an object in Illustrator, it is considered either an open path or a closed path. When the path is enclosed, a square for example, it’s call that a closed path. When the beginning and ending points are not connected, a line for example, that is an open path. A path is made up of multiple segments with each segment having an anchor point at the beginning and one at the end. Anchor points control the shape of the path. When you draw a shape, it is considered to be an object in Illustrator. Anything added is always considered an object.


Touring the Illustrator Interface

Tools Panel Overview

The Tools panel appears at the left side of the screen. You can move the Tools panel by dragging its title bar. You can also show or hide the Tools panel by choosing Window > Tools.

You use tools in the Tools panel to create, select, and manipulate objects in Illustrator. Some tools have options that appear when you double-click a tool. These include tools that let you use type, and select, paint, draw, sample, edit, and move images.

You can expand some tools to show hidden tools beneath them. A small triangle at the lower-right corner of the tool icon signals the presence of hidden tools. To see the name of a tool, position the pointer over it.

tool bar


Setting Up a New Document

  • File – New
  • Choose a profile: print, web, video/film, etc.
  • Advanced: choose your color mode (CMYK for print, RGB for web)

Lynda.com video on touring the interface.


Basic Tools


Illustrator | Saving Files


Creating Objects


The Pen Tool


Selection Tools


Shape Tools | Selection Techniques Review

  1. Open the attached .ai file here. You’ll see a completed fish illustration on the top and the individual components of that fish at the bottom.

Object-Oriented Design

 Save the document as: 2015.3.23_Last Name_Object-Oriented Design –  Upload that file to Flickr and post on your website.


Grouping

 Save the document as:2015.3.23_Last Name_First Name_Grouping –  Upload that file to Flickr and post on your website.


MAJOR PROJECT 2

(Illustrator CS 6): CD/DVD
The assignment is to create a digital still life (a CD/DVD design including front, back and spine), in Illustrator, using your knowledge of the drawing tools. The designs will be set up and must be sketched BEFORE moving to Illustrator.


Design Brief for Illustrator  

CD/DVD Case Design

Develop a design for a compact disc CD/DVD case. This design will include both the front and back cover insert for a conventional jewel CD/DVD case, along with the title panels. The design can focus on either an audio CD/DVD or CD/DVD game, CD/DVD movie title, or idea of your own and can be either real or fictitious.

Design Specifications: Size Conventional CD/DVD case dimensions. Download a print ready template here. Download the .ai file titled:

CD Package
4.75″x 4.75″
Double Back

This gives you the layout for the front and back but not the spine.

CD/DVD Name: Use a real or fictitious audio CD name – or real or fictitious CD or DVD game title.

Logo: Design an original logo for the company of manufacture for either the audio CD or game CD/DVD.

Information: The project will include all of the information typically found on either an audio or game compact disc. Included will be the side title bars and the back cover insert. Dimensions can be found on a typical CD case or DVD cover.

Project specifications include research, size, name, manufacturer, font choices, initial logo design and  initial box design and final designs.

Written Description: Detailed 500 word document detailing your design process, the tools you used and what you would change if you had to do  it again.

* Each project must be submitted with following items: Research & Conceptual Sketches, Preliminary Comps, Final Designs and written description. You will be graded separately on each phase of your projects. You will also be submitting each final design as a digital file.

Final Package Printout:

Final project must be printed in color, at full size, and inserted into a cd/dvd case. The cd/dvd inside the case should ALL files you created (including hand sketches, multiple .ai iterations and written description doc. All files should also be uploaded to your website on a page titled PROJECT 2 | Illustrator. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester on a DVD.


A NOTE ON SKETCHING

  • When designing anything, (including the CD/DVD project) sketch often!

Sketching helps you think about content, hierarchy and flow among other aspects. Sketches are cheap, easy to do and very fast. You should be able to create one new idea every thirty seconds. Sketching is also one of the best ways to communicate ideas about layout, user experience and user flow for a site.

DON’T use the computer until we review the sketches in class. Young designers tend to skimp on the sketches or omit them altogether. Too many designers transition too early from sketches to a higher fidelity design without first exploring all possible solutions.

Design concepts for developers
Sketches allow you to iterate on ideas quickly and save lots of time experimenting in mockups or code

Create a NEW page call Illustrator Project 1. The parent page should be Interactive Media. On the Illustrator Project 1, heading: Sketches. Under that, create a list:

  • Research 1
  • Research 2
  • Sketch Round 1
  • Sketch Low Fidelity (pencil)
  • Sketch High Fidelity (pencil and colored markers)
  • Logo Iteration 1
  • Logo Iteration 2
  • Logo Iteration 3
  • Cover Iteration 1
  • Cover Iteration 2
  • Cover Iteration 3
  • Back Cover Iteration 1
  • Back Cover Iteration 2
  • Back Cover Iteration 3
  • Spine Iteration 1
  • Spine Iteration 2
  • Spine Iteration 3

The sketches from the instructions below need to be uploaded to Flickr and the URL linked to each one of the above.

  1. Create  CD/DVD with various iterations in your sketch book.  Scan your drawings OR take a photo and upload to Flickr, then  link the URL to the above.
  2. Create Logo for CD/DVD with various iterations in your sketch book. Scan your drawings OR take a photo and upload to Flickr, then  link the URL to the above.

HOMEWORK | Week 9 | Due Monday March 30th

  • Create  a new page called Illustrator Project 1 with the parent page INTERACTIVE MEDIA. Add the bullet point listed above.
  • RESEARCH for project 1 – add FIVE links in Delicious from your research and inspiration for your project idea. Tag it with the additional tag: Illustrator Project 1. Make sure you add your comments in the COMMENT section on what inspired you, what design aesthetics you might use, etc.
  • List the NAME of your project and if you’re going to be creating a CD or DVD.
  • Hand draw at least two iterations for your first design sketches. Upload to Flickr and copy embed code and add to your Illustrator page.
  • List your Delicious URL on your homework blog posting
  • On your del.icio.us account tag three Web Sites that focus on Illustrator or anything we learned in class today, and write a note in the Delicious comments section about why you think each one would be a good resource for this class. ALSO, add week 9 in your comments section so that I can keep track of your comments. *Make sure you also add the tag: interactivemediaramapo2015  AS WELL AS add additional tags.
  • Finish ALL in-class exercises, create a new blog posting title: Week 9 | Homework | Due March 30
  1. Open the attached .ai file here. You’ll see a completed fish illustration on the top and the individual components of that fish at the bottom.

  1. Choose the Selection tool – Click on the large red fin.
  2. Click and drag to reposition the fin anywhere on the page.
  3. Choose the Direct Selection tool from the Tools panel.
  4. Reposition the cursor over on of the tips of the fin and click when you see the arrow with the small white square.
  5. Click on the solid anchor point and change the shape of the fine. (this shows you how to alter the shape). Hit Command Z to undo that.
  • Grouping the Scales:
  1. Click the Selection tool – Click on one of the orange scales – hold down the Shift key and click on a second scale. Now two scales are selected.
  2. Choose Object > Group or Command+G and the two scales are grouped together.
  3. Shift+click a third scale to add to the selection. Select all the scales.
  4. Press Command+G to group all six scales.
  5. Choose Select> Deselect or Shit+Command+A to deselect the scales.
  6. Using the Selection tool, click on one of the first scales you selected.
  7. With all the scales selected, click and drag the scales on toop of the fish’s orange body.
  8. Click on the Selection tool to reposition the rest of the separate components together to complete the fish.
  9. Choose File > Save As and save it with the following file name: 2014.9.22_Last Name_First Name_Exercise_Fish
Isolation Mode:
  • Using Shape and Transform Tools to Create Artwork
  1. Download the .ai file for this exercise here. Open the file and you’ll see artwork of two swimming fish. Keep this file open for reference.
  2. Open this .ai file now. You’ll see a document with four guides in the center of the peage.
  3. Choose Illustrator > Preferences > Units and change the measurement units in the General drop-down menu to Inches. Press OK.
  4. Choose File > Save As and save it with the following file name: 2014.9.22_Last Name_First Name_Exercise_Fish2
  • Using the Transform Tools
  1. Click on the Star tool and select the Rounded rectangle tool.
  2. Click and drag to crate a rectangle with rounded corners of any size.
  3. Activate the selection tool and click and drag until the rounded rectangle fits the dimensions of the guides located in the center of the document.
  • Adding a Fill Color
  1. Now fill the rounded rectangle with a color.
  2. Select the rounded rectangle with the Selection tool
  3. Locate the Control panel at the top of your workspace and click on the Fill box. Color swatch appear.
  4. Select the color CMYK Blue
  • Modifying a Shape
  1. Select the Polygon tool and click on the artboard.
  2. Type 3 into the Sides text field and press ok.
  3. Choose the Selection tool and click and drag the top center anchor of the bounding box upward to stretch the triangle.
  4. Click and drag each corner of the shape to resize the shape.
  • Entering a Shape Size in the Transform Panel
  1. Choose Windows > Transform
  2. Select the triangle and type .5 in the W and 2 into the H and Return
  3. Press D – the triangle’s color reverts to the default white fill and black stroke.
  4. Click one on the Stroke box and select None.
  5. The triangle is not visible now. You can only see its anchor points.
  • Viewing in Outline View
  1. Use the Selection tool and click on the artboard to deselect the triangle.
  2. Choose View > Outline.
  3. Use the Selection tool and click on one of the triangle’s sides and reposition it so its tip touches the center of the rectangle.
  4. Choose View > Preview.
  • Rotating the Shape
Let’s create a series of triangle shapes and rotate them 360 degrees.
  1. Select the triangle. and select the Rotate tool.
  2. Option+click the tip of the triangle. Type in 18 into the Angle text field and press Copy. This rotates your triangle 18 degrees.
  3. Press Command+D to repeat the transformation.
  4. Continue to press Command+D until you reach the original triangle.
  5. Press Command+Y to return to Preview view.
  • Changing the Color of the Triangles
  1. Now we’ll select the triangles and change their opacity.
  2. Switch to the Selectiion tool and select one of the white triangles.
  3. Choose Select > Same > Fill Color and all the white triangles become selected.
  4. Choose Object > Group
  5. Type 50 into the Opacity text field and return

Choose File and save as follows: 2015.3.23_Last Name_First Name_Triangle

21 thoughts on “Week 9 | Illustrator”

  1. http://www.joeyboullianne.com/week-7-ps-project-due-31615/

    American Red Cross Brand Project
    In this project I have created six different brand logos for The American Red Cross Non-Profit Organization. The six different types of banner that I used are Leader board, Square, Skyscraper, Rectangle, Button and Full Banner. My personal favorite banner that I used was probably the Skyscraper banner. It was my favorite because of how much I could fit into one image.
    I started messing around with Photoshop and tried really going in depth with these logos. I was trying to put multiple images in one banner, with a bunch of different slogans and what not, but once I zoomed out of the image I didn’t like the way it looked. A logo creator in the past has told me that the simpler the better. So that’s the concept of my six logos, simple and easy to follow. To the naked eye, my logos seem really basic, and simple, but once you look deeper into them, you start to see the real meaning behind them. For the leader board banner if you look closes there are different images, those images represent before and after pictures of hurricane sandy. Each on of my logos has meaning behind them.
    The reason why I choose to keep my logos simple is simply because they are easier to look at, they don’t look crazy, and the logos are more clear. My overall pitch to The American Red Cross is to help victims of Hurricane Sandy by donating money to help the victims.
    If I had to do my project all over again, the only thing that I would have changed would have been to add background colors to all of my logos. The only thing wrong with a white background, similar to the ones in my logos, is that it’s somewhat difficult to map out the boarders, and tell logo from logo.

Comments are closed.