Introduction to Illustrator


Topics

  1. Vector Graphics Versus Raster Graphics
  2. The Tools Panel
  3. Videos to Get You Started
  4. The Pen Tool
  5. Fonts
  6. SVG
  7. Learn More about Illustrator
  8. Assignment

1. Vector Graphics Versus Raster Graphics

The key to understanding Illustrator is understanding the difference between vector graphics and raster/bitmap graphics. Underlying raster/bitmap graphics, are pixels which do not scale nicely (you will see jagged edges if you scale it up too much). Vector graphics are based on mathmatical expressions. Because of that, vector graphics will always produce nice smooth edges. Illustrator produces vector graphics whereas Photoshop typically is working with raster graphics.

https://helpx.adobe.com/uk/illustrator/how-to/what-is-illustrator.html

 

1.1 Free Vectors

Be careful randomly grabbing things from the internet. Sometimes there are copyrights on certain images. The below video talks about Creative Commons Licencing.

The following are some sources that you can use:


2. The Tools Panel

The Adobe Illustrator work area includes:

The first time you start Illustrator, the tools panel appears on the left side of the screen. You can find more about the Tools Panel from the Adobe website.

This video is a good introduction to Illustrator:

Adobe Gen Pro Digital Creativity Week 2 Assignment from Edge Gain on Vimeo.


3.Videos to Get You Started

3.1 Digital Badge

The following tutorial creates a badge to introduce some basic shape tools as well as some cool features in illustrator. If you want to dive into the hands-on component, go to 4:38.

AGP - What is Graphic Design? from Edge Gain on Vimeo.

3.2 Four Icon Challenge

Kyle Tezak developed this as a personal project to represent stories or movies in four minimalist icons. His project is at this page:

http://kyletezak.com/four-icon-challenge.html

The below tutorial creates four icons for a mystery movie (you have to watch the video to find out):

Graphics class 2: 4iconchallenge from Edge Gain on Vimeo.

3.3 Logo Design

AGP Graphics, brands, logotype and shampoo from Edge Gain on Vimeo.


4. The Pen Tool

The Pen Tool is by far one of the most challenging tools. The following might be useful:

For those of you who are interested in the math behind Bezier curves:

Cubic Bezier Curves - Under the Hood from Peter Nowell on Vimeo.

4.1 Pen Tool Game

The following was a cool game for understanding the pen tool:
http://bezier.method.ac/


5. Fonts

There are some really neat fonts "out there". You can install fonts that you download from the internet. The following website has some cool ones that are free or on a donation basis:

To not rehash what has already been done, the following page has instructions on how to install the fonts: http://www.dafont.com/faq.php

When you are professionally creating webpages with non-standard fonts, you should consider using CSS for the fonts (instead of images):

 


6. SVG

SVG stand for Scalable Vector Graphics. SVG can be used to create animation on webpages.

In Illustrator, you can save your files as SVG. If you've worked with basic primitives (squares, lines, and circles), the code might look something like this:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="792px" height="612px" viewBox="0 0 792 612" enable-background="new 0 0 792 612" xml:space="preserve">
<circle fill="#FFFFFF" stroke="#000000" stroke-miterlimit="10" cx="262" cy="239" r="71"/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="462" y1="283" x2="532.7" y2="212.3"/>
<rect x="410" y="387" fill="none" stroke="#000000" stroke-miterlimit="10" width="167" height="93"/>
</svg>

To give you an inspiration of what you can do with an SVG file. I used a pen tool to draw pictures and then saved them as SVG format. I then used Video Scribe to animate them in this video:

If web animation excites you, you might be interested in the following for next week's "Open Lab":


7. Learn More about Illustrator

https://helpx.adobe.com/illustrator/tutorials.html


8. Lab Assignment

Design a logo for a fictitious company or product using Illustrator. Keep in mind how text can be used to convey your product or company message. Make copies of your logo as you go so that you can submit your artboard as a "Work in Progress". You can export your final Artboard and your final logo as a ".png" and upload them to your learning journal. Document what you've learned, challenges faced, and any outside resources you found to help you complete this assignment.

8.1 Mark Distribution

8.2 Submission

Please submit to URCourses the URL of your Adobe Spark Page learning journal. This page will contain weekly entries for each of the CS205 labs. The deadline is the start time of your following week's lab.

Your learning journal for this week should contain:

  1. A heading for Lab 1 and a brief description of what tool was used and the exercise that you completed (ie. for the first lab, it should be Lab 1: Illustrator Logo or something along those lines)
  2. Two images: one image of your (potentially messy) Artboard and the other image of your final Logo
  3. A learning journal entry which might contain any or all of the following: a description of what you've learned, challenges faced, any youtube videos or tutorials that you found useful, any credits for content that you got from "open source", and anything that you might want to remember about what you've done for the future.