Week 3 | Illustrator

Introduction to Adobe Bridge

Adobe Bridge is an organizational software application that is a part of the Adobe Creative Suite. Its primary purpose is to link the parts of the Creative Suite together using an interface similar to the file browser found in previous versions of Adobe Photoshop. It is accessible from all other components of the Creative Suite.


Best Practices for File Naming

Accurate file-naming – Special characters – Underscore – Date

YYYY_MM_DD _FileName_Version

Read more about file-name convention for digital files.


Best Practices for File Storage

What happens when you move your files to multiple locations?


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.


Adobe Illustrator vs Adobe Photoshop

They share much of the same functionality BUT Adobe Illustrator is used for creating vector graphics and vector text, while Photoshop is used to create raster graphics (or bitmaps). Vector graphics are  made of lines and curves that contain mathematical objects called vectors (Illustrator). Raster graphics (or bitmaps) contain tiny dots of color (also called pixels or bits)(Photoshop). In Photoshop the image is the combination of many of these dots/pixels with the final result being the appearance of a solid image. You to edit images by changing the pattern of the pixels by lightening or darkening them, and by rearranging their pattern.

Summary: Photoshop is the primary tool for editing photos and Adobe Illustrator is the preferred tool for creating vector graphics. Note:  Bitmap graphics (photos) are much larger in file size than vector graphics because information for every single bit must be saved to the file. Every time you change the file and resave it you lose quality. Change the size of a raster graphic and your quality will be changed. Vector graphics can be scaled to any size without losing quality.

Adobe Illustrator will allow you to convert a vector image to a raster image. You can also import raster images, but the images themselves cannot be edited in Illustrator.

See the example below of a vector and a bitmap below.


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.

Using the Selection Tool


DESIGN BRIEF:

Create an original graphic for a background for a website using Adobe Illustrator, to create an original work. Use design elements including line, shape and space as well as Illustrator effects to create the background.

In Class Exercise 1: 

Download the sample vector file here.

Create a new document with the following parameters, prepped for the web:

  1. Width: 1280 pixels – Height: 800 pixels.This is the most common web resolution.
  2. Make sure that the New Document Profile has Web selected. This will set the resolution will be set for you (72 pixels/inch, color mode RGB 8 Bit).
  3. Open the sample vector file and drag it and drop it onto your new document. Change the following: color, size, shape and placement and scale using Illustrator’s simple tools and effects (blur, etc.) to create a generic background that could be used for a website. Save the file as an editable pdf and upload to your blog.
  4. Give your document a name starting with: 2013.9.20_Last Name_Frist Name_Background.
In Class Exercise 2: 
Create a new document with the parameters above EXCEPT this time, DO NOT use the sample vector file. Create your own vector file. Save the file as an editable pdf and upload to your blog, giving your document a name starting with: 2013.9.20_Last Name_First Name_Background2
The project theme is: WATER.

IN-CLASS EXERCISE 3:

 – The project theme is: RESIZING/TRANSFORMING.

Rectangle Tool

  1. Create a new blank document. File > New (The shortcut on the Mac is Command+N)
  2. Choose Print from the New Document Profile drop-down menu and Inches from the Units drop-down menu.
  3. Profile > Custom – Number of Artboards > 1 – Size . Letter –
  4. Press OK and a new document appears
  5. Select the Rectangle tool from the Tools panel. Click and drag anywhere on the artboard. Typically, you pull from the upper-left corner diagonally to the lower-right corner.
  6. Save the document as: 2013.9.20_Last Name_First Name_Rectangle
Complete the following:
  • Choose the selection tool and click on your rectangle to highlight the rectangle and show the eight handles.
  • Drag the rectangle to a new location without resizing it.
  • Hover over the bottom-middle handle until the cursor becomes a vertical arrow. Click and drag to resize the rectangle.
You now know how to create, move and resize and object.

Save the document as: 2013.9.20_Last Name_First Name_Rectangle2

Transform Panel: The transform panel lets you know the shape’s dimensions.
  • Select the rectangle – Open the Transform panel – Window > Transform
  • Click on the upper-left corner of the reference point locator to see the X and Y values change
  • Choose View > Show Rulers to display the rulers
  • In the transform panel type 2 into the X text field and 2 into the Y tab field. MAKE SURE the Constrain Width is not selected. Then type 1 in Width and 1 in Height text field.
The rectangle is now positioned and sized according to those values.

Save the document as: 2013.9.20_Last Name_First Name_Rectangle3

Rotating and Using the Transform Panel:
Select the shape – Type 25 into the Rotate text field at the bottom of the Transform panel and hit REturn. The object rotate 25 degrees counterclockwise.
Click and hold on the arrow to the right of the Sheer text field and choose -30 from the drop-down menu. The shape is now sheared by 30 degrees.

Save the document as: 2013.9.20_Last Name_First Name_Rectangle4

Constraining a Shape:
  1. Select the Rectangle Tool
  2. Hold down the Shift key and click and drag on an empty are. NOTE: Holding down the shift key contrains the shape to create a square. To keep it a square, release the mouse BEFORE releasing the shift key.
  3. Do the same with the Elipse Tool. You can find the Elipse Tool by holding down the mouse on the Rectangle Tool and you’ll see a drop down menu.
  4. Hold down the Shift key, select an area of the art board, and drag to create a circle. NOTE: Remember to release the mouse BEFORE you release the Shift key to keep the shape a circle.

Save the document as: 2013.9.20_Last Name_First Name_Rectangle5

@@@NOTE: At the end of the Illustrator section you will be turning in a print portfolio with all your work. Create a NEW Illustrator document and place ALL your rectangles  on ONE page.

Save the document as: 2013.9.20_Last Name_First Name_RectangleFINAL – Upload that file to Flickr and post on your website. @@@


IN-CLASS EXERCISE 4:

 – The project theme is: SHAPES.

Download the .ai file here that will be used in exercise 1. For this simple exercise you will do the following:

  • Recreate the shapes that are locked on the layer base. DO NOT unlock the layer.
  • Change the width of the stroke of each of the shapes.
  • Save the file as: 2013.9.20_Last Name_First Name_Exercise_Shapes –  Upload that file to Flickr and post on your website.
Entering Exact Dimensions:
  • Choose Illustrator  > Preferences > Units  to see the Preferences box. Select inches from the General drop-down menu.
  • Using the Ellipse tol, click on the artboard.
  • Type 4 into the Width text field and press the Tab key. Type 4 into the Height key and press OK.
Under the Ellipse tool in the TOOLS panel are a number of other shape tools. Try the Star tool next.

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


Illustrator Drawing Basics

IN-CLASS EXERCISE 5:

Vector graphics, paths, direction lines and direction points

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

MAJOR PROJECT 1

(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 1 | Illustrator. KEEP ALL ORIGINAL FILES. They will be turned in at the end of the semester on a DVD.


HOMEWORK | Week 3  

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 Digital Media Production. On the Illustrator Project 1, heading: Sketches. Under that, create a list:

  • 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.
  3. Finish ALL in-class exercises, create a new blog posting title: Week 3 | Homework.
  4. Take the website background that you created in class, the one with the circle, and refine it. Do some research on color palates, website backgrounds and framing website and update your design. Scan your drawings OR take a photo and upload to Flickr, then  link the URL when you go to WordPress – add media – insert url.
  5. 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: 2013.9.13_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: 2013.9.20_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: 2013.9.20_Last Name_First Name_Triangle


  • DELICIOUS: On your del.icio.us account tag three Web Sites that focus on Adobe Bridge, 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.  *Make sure you also add the tag: digitalmediaproductionramapo2013 AS WELL AS add additional tags.

16 thoughts on “Week 3 | Illustrator

    1. There’s no image, artist statement or bio on your about page.
      You were supposed to create pages for ALL the classes your taking for fall 2013 on you site.

    1. ALIGN LEFT
      On the ABOUT page, add a photo of yourself, an artist statement and a bio. Have the image ALIGN LEFT.

      DELETE
      The sample page.
      The hello world post.

    1. MISSING: PHOTO: ALIGN LEFT
      On the ABOUT page, add a photo of yourself, an artist statement and a bio. Have the image ALIGN LEFT.

  1. Your missing the majority of your homework.

    Install WordPress on your web hosting space. Each week you will post a link to your homework on your own WordPress website in the comments section of this blog.
    Go to your DASHBOARD and install a theme (you may not use the default theme) under appearances, select themes and choose a new theme.
    Fill out the personal info on the site in the SETTINGS on the dashboard.
    Add the following PAGES to your website:
    About
    Contact
    Ramapo College
    Digital Media Production
    Create additional PAGES for the other class your taking this semester
    On the ABOUT page, add a photo of yourself, an artist statement and a bio. Have the image ALIGN LEFT. You should UPLOAD your headshot onto Flickr and insert it into your ABOUT page using INSERT URL. When upload your photo to Flickr, change the title and description, create a set, upload to photostream. Click on the photo you want to use, shift click and select view original image, choose the size you want the image to be, shift click on the image ad COPY image URL.
    On the CONTACT page, add a contact plugin form. Try searching for Contact Form 7 in PLUGINS under POPULAR.
    ON the RAMAPO COLLEGE page create a list of all your RAMAPO fall 2013 classes.
    On the DIGITAL MEDIA DESIGN page, create a list with the following information:
    Week 1 Homework | Due 9.13.13
    Week 2 Homework | Due 9.20.13
    Week 3 Homework | Due 9.27.13
    Week 4 Homework
    Week 5 Homework
    Week 6 Homework
    Week 7 Homework
    Week 8 Homework
    Create a POST called WEEK 1 HOMEWORK | Due 9.13.13

    On that post write links to all your homework. Copy the URL. Go to the page you created called DIGITAL MEDIA PRODUCTION. Highlight Week1 Homework, click link and paste in the blog URL.
    Create a POST called WEEK 2 HOMEWORK | Due 9.20.13

    On that post write links to all your homework. Copy the URL. Go to the page you created called DIGITAL MEDIA PRODUCTION. Highlight Week 2 Homework, click link and paste in the blog URL.
    List the Theme you added to your site
    List the PLUGINS you added to your site (Add at least SIX plugins).
    List any widgets you added

Comments are closed.