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.
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:
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.
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.
Kyle Tezak developed this as a personal project to represent stories or movies in four minimalist icons. His project is at this page:
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.
AGP Graphics, brands, logotype and shampoo from Edge Gain on Vimeo.
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.
The following was a cool game for understanding the pen tool:
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):
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"/>
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":
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.
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: