ET11 Computer Skills for Animation & Interactive Media: SYLLABUS
Winter 2004
Section 1577; Monday & Wednesday. 9:00 a - 1:15 p, AET Room 106

Santa Monica College - A.E.T.
Graphic Design Dept.
Instructor: James Reilly

Course Description


Computer Skills for Animation & Interactive Media is a class created for students interested in the computer as a tool for digital illustration, imaging, editing, computer animation and interactive media presentation on the web, or via CD-Rom or DVD. This class will help students develop a fundamental understanding of how computer graphics are created and presented.

The class will introduce a number of different graphics applications used by digital artists in graphic design studios, post-production houses, motion picture and animation studios, and website / interactive media development studios. Students will also learn the overall functions of computer hardware and software, become familiar with computer operating systems and the user interface, and learn to develop professional habits with regard to naming, using, storing and transfer of digital data.


Pre-requisites


ET11 is open to all SMC students. Some prior knowledge or experience with computer usage is prefered, but not required. Those with the least computer/graphics experience will need to spend the most time outside of the class to keep up and complete assignments.

Lab time (outside of class) is required, and failure to spend additional time on projects and assignments will probably cause those students to fall behind or produce poor quality work and possibly risk failing the course.

Textbooks:

Required: Photoshop CS, A Visual Quikstart Guide, Peachpit Press;
  Required: Illustrator CS, A Visual Quikstart Guide, Peachpit Press;
Photoshop CS, Visual Quickstart Guide
Illustrator CS, Visual Quickstart Guide
...or other Photoshop manual you may already have or prefer; such as Photoshop Bible, ect. (should be at least Photoshop 6)
  ...or other Illustrator manual you may already have or prefer; such as Illustrator Bible, ect. (should be at least Illustrator 8)
The above books are available at the AET bookstore, any retail bookstore, or online from Amazon.com, ect.
  • Also Recommended:

    Flash MX 2004: Graphics, Animation & Interactivity
      Dreamweaver MX 2004 (or MX), A Visual Quikstart Guide, Peachpit Press;
    Flash MX 2004: Graphics, Animation & Interactivity
    Dreamweaver MX 2004, Visual Quickstart Guide
    ...or other Flash manual you may already have or prefer;
      ...or other Dreamweaver manual you may already have or prefer
    The above books are available at the AET bookstore, any retail bookstore, or online from Amazon.com, ect.


    The Complete Guide to Digital Imaging by Joel Lacey;
       
    Photoshop 6, Visual Quickstart Guide
     
    ...or other similar introductory graphic / digital design handbook

     
    The above book is available online from Amazon.com, ect.

Materials Needed

  • 1 Zip Disk (100 MB IBM PC formatted) or...
  • USB Jump Drive

Download Free Trial version of Adobe Photoshop, Illustrator and other Adobe products

Download Free Trial version of Macromedia Flash MX 2004, Macromedia Dreamweaver MX 2004

Schedule

Week

1.1

Intro to Computer Graphics and Animation
What is digital art?
How is digital art and animation presented?
Various types of digital art, animation and interactive media.
Introduction of Students and Instructor.
Registration Issues.
Classroom and Lab rules and procedures.

This week's advice: Get your books and supplies; look at digital art and animation for inspiration.

Resource site of the week: Adobe Expert Center

Homework: Not Yet

 

Week

1.2

Understanding Computer Hardware and Software
Computer components and what they do.
Storage and memory.
Visual display of computer graphics / animation.
Platforms and operating systems: PC and MacIntosh.
Organization, naming and transport / storage of files.
File sizes / types.

This week's advice: Start reading your books. You'll be amazed by the useful information you can absorb by merely perusing manuals and books on applications and techniques.

Homework: Within a limited budget (imaginary), design the best / most productive computer for personal or professional use in the digital art / animation production field. This will include CPU, Motherboard/Processor, Hard Drive (speed & capacity), Other Drives, Memory, Input Devices, Monitor and Periferals. And a computer isn't much good without software...

So, within your budget, you must also include vital software application programs. Utilize your ability to "buy" educational versions of software from educational resellers -- but no "stealing" software from internet crack copy sites!

Complete systems from Apple, Dell, Gateway, ect. are o.k. But please list the primary components and describe your system. Your total imaginary budget: $2500.

 

Week

2.1

Introduction to Adobe Photoshop (chapters 1-3 in text)

Starting from scratch: creating a new digital image file PSD (Photoshop Doucment)
Photoshop 6's User Interface
- setting image size: pixel (or other) dimensions, pixels-per-inch / dpi, color mode, and background options. Images for the web and computer animation should be 72ppi, RGB; for print 150 - 300dpi (or more!) CYMK.
- the 'Toolbox': Photoshop tools and their options (Options Bar)
- Photoshop Menus
- Palettes: color 'sliders' and swatches
, Layers-Channels-Paths, History, Info palettes
- Text: Character palette; editible vs. rasterized type
- choosing and creating Brushes

Saving a file
- use the SMC computer's "E drive" for the initial SAVE, copy the file to your Zip disc (memory permitting!)
- Photoshop version ??
- "Save As"
- "Save a Copy"

More about Color
- RGB / CYMK
-
The Color Wheel & Color Theory
- Primary, Secondary, Tertiary
- Hue and Value, Tint and Shade
- Contrasting Schemes

-
"Web-safe Colors: "hexadecimal"

A first look at Photoshop "Filters"
- They are cool!... but don't overuse them.
- the illusion of depth / 3-Dimensionality

Weeks

2.2

Getting Familiar with Adobe Photoshop:
Aquiring source material

Getting images from the web
- "save image as..." & "download image to disc"

Screen Capture on a PC
- "Print Screen" key
- from the Clipboard into Photoshop

Using a Scanner with Photoshop (CLICK HERE)
- Import > "Twain" (Aquire)
- The Scanner window and its settings
- Selecting optimum PPI (pixels per inch)
- Preview and scan area selection
- saving & using the scanned image

Image manipulation:
how to get exactly what you want from source material
- image extraction techniques: Lasso tool, Magic Wand, and the Pen tool (best)
- Working with Pen tool points, and "Bezier" curves/handles
Saving and using Paths

More about Layers
- Layer Modes and Opacity / Alpha
- Color adjustment
- Layer Transform
- Adjustment Layers
- Text Layers

Getting deeper into Filters:
The good, the bad and the ugly

Putting it all together: Image Compositing with Photoshop

Smile! It's digital camera photo day (to use in your 3rd Photoshop assignment)

Due Next Week > Class Assignment #3 (2rd Photoshop assignment): Create a CD cover for a real or imaginary music artist.

  • Complete image dimensions should be about 720 x 480 (big enough to show actual size CD & Jewel Case)


Click to see full-size example

Week

3.1 - 3.2

Compositing (combining images) with Photoshop (cont. from week 2)

Photos< Click the camera to see and retrieve your "class photo"

Weeks

4.1 - 4.2

Creating Vector Graphics with Adobe Illustrator

"Vector" vs. "Bitmapped"
- Vector graphics (Illustrator) are based on mathmatical coordinates (x,y, ect.)
- Bitmapped images (Photoshop) are made up of individual pixels of color.
- Therefore, when using vector coordinates to describe placement and display of shapes, lines and colors, file size does not increase when an element is 'scaled' up -- even to a very large size. With a bitmapped image, scaling an image up to 'double' its size results in a four-fold increase of pixels (and therefore memory) used. Additionally, with vector-based imaging, "anti-aliasing" is not used, as edges and lines are perfectly smooth (neither created from square pixels nor resolution dependent) at any size.

Using Illustrator to design a Business Card
- Sketch possible logo designs on paper before creating them on the computer.
- Standard Business card size is 3.5" x 2"
- Determine the text elements you wish to include: company name, your name, title, address, phone number, e-mail address, ect.
- if you intend to include a photographic or bitmapped background or element in your card, it should be pre-prepared in Photoshop at 300 dpi and at the appropriate size for placement in the Illustrator file.
CLICK HERE for detailed instructions

The Heart of Illustrator
Graphics created in Illustrator are ultimately combinations of individual, yet independent, colored shapes and lines.
- Working with Pen tool points, and "Bezier" curves/handles along with the Pathfinder for cutting and combining shapes, will allow you to achieve excellent results with this program.
- Many of the skills and sensitivities developed using Photoshop can be applied to Illustrator, but because of the inability to blend pixels and apply filters, these two programs are inherently different

In the second Illustrator assignment you will create variations of a "photo-realistic" environment using a combination of colored shapes, and modifying them to achieve a different effect.

Form and Value with Adobe Illustrator

Weeks

5.1, 5.2, 6.1

Introduction of Bonus Program(s) (i.e.: Adobe Image Ready, Macromedia Dreamweaver, Macromedia Flash) *as class progress permits
Details TBA

Week 6.2

Presentation of Final Projects

LAB
TIME
Students are expected to perform 3 hours of lab time, on their own schedules, per class meeting. But I expect that you will spend MUCH more than that creating exquisite work that just might help get you a job someday!

*Course contents may be adjusted as determined by the progress of the class.
**Due to School Holidays , there will be no class on ...

Monday, February 17 (Martin Luther King holiday)

Project List

The assignments:

  • "Build your Own Computer" (written) (10 points)

  • "Digital Abstract Painting" with Photoshop 6 (10 points)
  • "Music CD Jewelbox Cover" with Photoshop 6 (10 points)
  • "Yourself in a Fantasy Situation" with Photoshop 6 (15 points)

  • "Form and Value Still Life" with Illustrator 9 (10 points)
  • "Make Your Own Logo & Business Card" with Illustrator 9 (15 points)

  • Final Project
    Option 1 - Create a Tabloid Magazine Cover with Photoshop and Illustrator. Image should include modified or original digital images / photos and text headlines and logo / title. (20 points)
    Option 2 - Digital Art masterpiece. This image should be created with a combination of the programs which were introduce in ET11 (20 points)

  • *There will be a written Mid-term Exam given at the begining of the 4th week. (10 points)

**This syllabus is subject to change

Missing classes can cause you to fall behind. Therefore, please attend every class and be on time. Students who are absent excessively will be dropped. Attendance will be considered in the calculation of your final grade.
Total Points / Grade
100 - 90
A
Credit
89 - 80
B
Credit
79 - 70
C
Credit
69 - 60
D
No Credit
< 60
F
No Credit


Contact James Reilly
reilly@jamesreilly.com

Link to JAMESREILLY.COM | Return to James Reilly's SMC Info Page

Santa Monica College | AET

Link to
                          Postcard AMERICA.com