|
Northern Virginia Community College - Annandale Campus Spring 2012. Syllabus for Art 283, Computer Graphics I Instructor: Giulio Porta, Liberal Arts Division, NVCC, Annandale campus. Instructor's email nvportg@nvcc.edu Instructors office hours: : MW 8 to 9 am and 3 to 4 pm, on TTRF by appointment (flexible) My office is located in the CM building, room 366. My phone # is 703-323 2135. Fax 703-323 4248. If you need to see me in person, please call or email in advance for an appointment. Foe all communications I prefer email. This syllabus is identical for all sections of Art 283, no prerequisites are required for enrolling in this course. Lecture 2 hours. Studio instruction 4 hours. Total 6 hours per week. | |
|
This course is offered in one versions: Traditional Classroom version, for the time being there are no web based/hybrid, or ELI versions planned. If someday there was an ELI version of this course, all course's versions will share the same syllabus. Particular requirements of what could become an ELI web based course are highlighted in blue. Course Objectives:
| |
|
If you are registered for the traditional
classroom version of Art 283, we'll be meeting in CT 118, which is a
classroom/lab, but not an open lab. CT 118 is closed when classes are not in
session. The software used in all of my CG courses is installed only on the
machines in CT 118. The CT main lab has a few workstations with Adobe CS
installed, please check with them. Software used:
Because Art 283 is not a "training" course. I will not introduce graphic technologies that can be learned from training CD or DVDs which may come with the purchasing of a particular software. An example of such technology could be that of Adobe Photoshop Version Cue. | |
| Books: There is no book purchase requirement for this course. The material I have prepared for you in this syllabus, all the tutorials here, all available now. They are somewhat equivalent to a book, but contrary to the text in a book, this text here is not edited. All versions of Adobe Photoshop and Illustrator comes with improved help files, please read them. If you are taking this course's hybrid version you can use older versions of Photoshop and Illustrator, as far back to version 5.5. Beginning with version 5.5 Photoshop added a new feature named SAVE FOR THE WEB, which in essence is a process of color reduction (Optimization) which reduces a file's size dramatically, but still maintaining adequate color quality for the web, previews and presentations. | |
|
Presenting your work (for the traditional classroom only): In this course's traditional classroom version, you'll be required to give 2 presentations of your semester's work: a midterm and a final. In your presentation, you must show concrete examples of how and where your work maybe used. Please refer to the list, here below, which identifies potential areas of application that CG images may have in fine and commercial art production. Please note that I will not attempt to differentiate between fine and commercial art in regard to your work. The assumption that I am making is that everything you'll create in this course will be conceived and viewed as fine art. The fact that anything you'll produce can also be sold, reduced in size, and manipulated further, it's something you must come to grips with.
The best manner of presenting of your work is that of creating a series of html document (hyperlinked pages). You must see these pages as layout designs rather then just "web pages". In these pages your work may appear by itself or along columns of text, titles, buttons, icons, thumbnails, animation, and other graphic elements. The relationships among these elements will define the potential use of the images you have created. Eventually theses pages can be uploaded to the Internet. If not, they can be used to showcase your work using a browser, without the aid of the program used in creating them. The functionality and actual use of your images is often determined by their size, the location and relationship with other graphic element in a page/lay out design. Initially you can arrive to a variety of design solutions simply by saving your work in different sizes (resampling), but later on in the semester you can do much better with your layout designs. To succeed with this endeavor I urge you to take a closer look to printed matter, such as books, magazines, brochures, and anything else that contains graphic images like web pages, titles for movies and TV shows. If you need to include columns of text in your design, you can dedicate space to it, without having to produce the actual text. Don't wait until the day before your presentation to create it. This should be done each class or every other one. This course is by no means about web page design, we'll use hyperlink technology and some fundamental concepts inherent to web page design only to showcase your work. Computer graphics is loaded with CG jargon and technical terms. Not familiar with computer jargon? If you have no idea of the significance of words like "resolution", "node", "interpolation", "color modes" or "anti aliasing". It is your obligation to find out. Knowing what all those words mean it is part of your education, make note of the term and look it up using the Tech Encyclopedia. | |
|
Guidelines for the ELI, and or web based/hybrid
version of this
course.
Please read the objectives and requirements for ELI/web based/hybrid courses first. Then read carefully the following check list:
| |
|
ADOBE PHOTOSHOP assignments and
tutorials.
8 projects, out of the 21 planned for this course, will involve photomontages and photo manipulations. Photos grabbed from the web are for the most part unacceptable, their recognizable origins and presence may not give much credibility to your work. In order to give credibility to your work, you must use original photos. Please use a digital camera to collect original photographical material. If your photomontages include personal or unusual situations plan them ahead of time. If you have a digital camera, use it, make sure to include photos of your self. That will ad more credibility to your work. | |
You must read the information that I have provided for you here
below within the first two weeks of classes.
|
|
|
Project # 1) Painting a fried egg
|
This project is primarily a "digital painting"
focusing on the use of digital brushes.
It is a deceivingly simple assignment involving the painting of a realistic fried egg, cooked sunny side up. This could be the beginning of a series of long term projects dedicated to the illustration of food items for a breakfast menus, cook books, magazine article, or package design. Where a hand painted image can perform better than a photographical one. Painting an insect Here's another tutorial dealing with the concept of "digital painting". This tutorial is not my own, and it is not an assignments, but it can help you in understand digital painting. |
|
Project # 2) Painting
a realistic eye Creating Selections, and Layers, in
Photoshop.
|
This new project extends the Painting a Fried Egg project into the "painting" of a new image. This digital "painting" project will test your painting skills, and your power of observation in creating 4 different images of an human eye. Each of the 4 images will play a different role in communicating in the manner in which images are designed to communicate on the Web, in a publication, and in game design. You'll need to make clear in each of the 4 presentation pages (used in displaying these 4 different eye images) how and where these images will be used. |
|
Project # 3)
An introspective self portrait Creating Selections, Layers, and Masks in Photoshop.
Selections in CG are the most ubiquitous sets of steps taken in separating parts of an an image to create concept based effects, or to perform local manipulations which may not be possible if the image was approached as a whole. In 3D design, selections also serve the purpose of allowing you to edits an object components, so it can be also animated. |
The idea of a self portrait is old and
yet still valid as a mean to introduce yourself in a particular meaningful
manner. For this project you could decompose a photo of yourself into a number of separate selections, using Layers. Try to illustrate overt or hidden aspects of your personality in this photo manipulation. The final product should be an image that possesses more than a single potential use. As it could be an icon or thumbnail to be used in a web page as a self introduction, and/or used for a magazine article article about human psychology. It will be up to you to decide this image's role. |
|
Project # 4) Creating
a Glowing Object. Creating selections with the Pen Tool and Alpha
Channels.
|
This project should expand your understanding of the
potential that the Pen Tool has in creating selections. In particular of
images possessing complex smooth curves. It also reiterates the potential
that an Alpha Channel has in extending the type and the use of selections
used in performing
further manipulations.
The glow effect will give your selection an aura of importance with a mix of the real and the unreal inherent to concept of "radiating energy", an the message which that carries. |
| Project # 5)
Creating
blinking signs
|
This project is an extension of project # 4, with the addition of animation. Blinking banners and signs are very common on the Web, they can be made with as few as 2 layers one of which can be turned on or off, like in the case of an animated blinking light. What matters in your case is how and where this sign will be inserted in your presentation, its size, what the sign itself will say, and color and size of what glows. |
|
Project # 6)
Texturing a 3D sphere with the eye's image to simulate eyeballs
|
This project is a branch, or a
continuation of project # 2.
One of the eye images that you have created in project # 2, the "Texture Map"
will be projected onto a sphere in a 3D program. The idea is that of simulating a human eyeball. This eyeball or
eyeballs will be also animated in the same 3D program and reintroduced in Photoshop for
further manipulation. This very last manipulation step can be as simple as a change in file
format ( from a AVI to a GIF ) suitable for the the Web. Or Quicktime to
Flash. If you are taking this course's ELI web version you can skip this project, or else you must download a fully functional copy of Autodesk XSI for a whole year of unrestricted use. That should be more than enough time to do a few of animations with XSI, bring them in Photoshop and save them for the Web as animated GIFs. |
| Project # 7)
Creating
an animated GIF with Adobe Photoshop and Image
Ready
|
Animated GIFs are common on the web, they share web page
space with Flash animation. GIFs are raster based, they are made out of
pixels, they are not scalable therefore they don't look good when played in
a Media Player in a size larger than the one in which they were created.
When GIFs are created they are in structure very much like a slide show.
There is no key framing and no interpolation between frames. In Photoshop
titles and new frames can be added to the original frame sequence. Flash animation is vector based, even when pixilated images can be imported into Flash, they are dealt from there on as vectors. In Flash there is also interpolation and key framing. But we are not dealing with Flash in this course. Although is part of the Adobe Suite, there is no time for it in this course, as well as for other important products such as In Design. |
|
Project # 8) Photo
Montages and Matte Painting
|
This painting project involves the use of masks in a photomontage
creation process. The tool we'll be using is the Ad Mask tool, where the default foreground and background colors,
black and white,
are used to subtract and put back to a selected area. Removing anything
that is not need in you photomontage. It would be best, like in most cases, if you could use your own photographs. |
|
For the traditional classroom course. Designing pages with an html editor such as Dreamweaver or Front Page The word "page" refers to the layout design of text and images as they may appear on a rectangular surface. The kind of "pages" that we are going to create for your presentation will be a series of hypertext documents identical to the ones you'll find on the World Wide Web. As you may well know pages can incorporate text, graphics, sounds, interactive material, hyperlinks, etc. Or simply text and images. But in our cases these documents are not going to be uploaded to the WWW, still, all their attributes, the ones that you may have assigned to each page will be fully functional. These pages will contain all your semester's work, or what you have done up to a certain point in time. At this point in time you should have enough work (saved in standard graphic formats such as JPG and GIF) to begin composing your presentation. From now on you should produce a couple of pages every class. Each page should be designed to reflect the potential use that your graphics may have for fine or commercial art. Don't make any assumption that you know how a web page or the mage of a magazine looks like, in particular if you had little or no experience in creating one. Look at concrete examples and don't be afraid to emulate them. |
|
|
This project has been mothballed The
Road. An animated photomontage.
|
This project is no longer a course requirement. But it
can be done on your own at home, using your own photography and you own
subject matter. This project focuses upon creating an animated
photomontage by using a series of staged photos. Staged photographs can be
copied and pasted one at the time into the same document to appear a set of Layers.
Those Layers can be compiled as an
animation in Image Ready, in CS 1, or in the Animation panel for new
versions of Adobe CS. If you have a digital camera, a tripod, and some ideas concerning what to stage, this project is for you. I can give you the same kind of credit as for any of the other required projects. |
| Project # 9
Animating human facial expressions with XSI Face Robot
|
This project is a sheer animation project, you'll
take a break from Photoshop to try your skills as a 3D animator by
manipulating facial expression in XSI Face Robot. Face Robot comes with a series of pre built heads, and the process of rigging them is automated. You'll need to follow the direction on the screen to successfully rig a character's head. The process of rigging sets up a number of control point/objects which can be used in animating facial expression. You need to decide what kind of expressions your character will produce and why. If you are working at home you can download a fully functional copy of Autodesk XSI for 30 days. That should be more than enough time to do a couple of animations with XSI, bring them in Photoshop and save them for the Web as animated GIFs. |
| This project has been mothballed
and replaced by project #9: Animating human facial expressions with XSI
Face Robot Project # 9a) Anatomical alterations.
Producing a side by side before and after images will show the extent of the alteration. |
This project involves a thematic series of four photomontages dealing with
the concepts of:
1) Perfect symmetry 2) Creating a bit map of a face, an image that has the properties of being mapped onto a 3D model of a human head. If you are taking the DL version of Art 283, this portion of the project will be possible only if you own one of the 3D software I support, if not you can skip the 3D portion of this project. You can still work on this project on your own. If you are working at home you can download a fully functional copy of Autodesk XSI for 30 days. That should be more than enough time to do a couple of animations with XSI, bring them in Photoshop and save them for the Web as animated GIFs. |
| Project # 10) Authoring
textures.
|
This project entails the creation of textures simulating those of a wall, a floor, and a ceiling.
But it can be extended to include the creation of images suitable to package
design. Applying a texture to a simple 3D model, simulating a box, a capsule or a sphere, for package design purposes is a lot easier then producing architectural textures. Therefore this project's classroom version will be geared toward package design rather then architecture. The "texture" could include lines of text, like the ones you see in package design. If you are working at home you can download a fully functional copy of Autodesk XSI for one year. |
| Project # 11) Metallic
looking text
|
For this project you'll be required to create 4 different types of simulated metallic texture such as:
These textures will be created in Photoshop and must be applied to the faces and beveled edges of lines of text simulating 3D text. Like the kind of text which you may have seen used in real or virtual logos, on TV, illustrations, electronic equipment, and machines. |
Midterm presentation of your portfolio. At this point in time, right after project # 11, you'll be required to present your portfolio. An entire class period will be dedicated to students presentations. This presentation must be done in front of the class. You must read the contents of the page How to present your work way ahead of time, and have at least 11 pages showcasing your work hyperlinked together ready for your presentation. You must speak coherently and intelligently about your work, addressing the potential use that your graphics may have, here is the list again as a reminder:
Your presentations should be compiled using Dreamweaver, because that is the html editor available in our lab. Please also read the grading criteria page, for a further and better understanding of other aspects of your classroom performance (other than your presentation) used in finalizing your grade. | |
| Project # 12)
Transparent
and reflective buttons (designer buttons).
|
Project # 12 and 13 must be read and
understood in conjunction with each other. Even though they are separate projects, parts of what is done in project # 12 can be reused in project # 13. |
| Project #
13)
Graphic
Interface design
|
|
| Project #
14)
Drawing
the human figure
|
This project focuses on the drawing of highly
simplified human figures. By doing so you attention can be given to
structure and proportions. You'll be required to create the characterization
of a famous person.
Photography can be used as a starting point, but the end product should look like a drawing, and not like a photo that has been painted over. |
| This
project has been mothballed Project # 15) Designing Interactive graphic elements. Slices, Links, Rollovers, Image Maps. Designing Image Map based Rollover with Image Ready v 8 Extra tutorials: |
This project is intended for web students
that own Image Ready, a program made available by Adobe staring with
Photoshop 5.5 all the way up to CS 2. In later versions such as CS 3 or
newer, Image Ready no long came as a separate program because some of its
tools were integrated in Photoshop.
Unfortunately some of its older feature used in project # 15 are no longer there.
|
| Adobe Illustrator | |
| Project #
16) Writing
along a curve
|
Create an image that is made entirely of letters of the alphabet. These letters must spell out words supporting and enforcing the message inherent to the image created. |
| Project #
17)
Designing Text
|
Design a number of letters of the alphabet to be assembled in a short word spelling out a title, message or idea relevant to the presentation of your work. |
| Project #
18) Designing
a flower
|
Using gradient meshes to create floral designs. |
| Project #
19) Painting
a face using gradients
|
Using gradient meshes to create a face's shaded base, and skin tones. |
| Project #
20) Architectural motifs
|
Using the Blending tool to produce etched and cross etched shaded areas for architectural rendering and/or architectural motifs. |
|
Project #
21) Drafting
with Illustrator
|
Even though Illustrator was not designed to do what
CAD software does, it is an excellent tool for creating fully shaded
concept drawings.
Do not be intimidated by the word drafting. For this project you will need to sketch 4 views, such as top sides, front and back of an object that you are designing and maybe planning to build. It does not have to be a design, or plan for a building. You can look at any object that interest you and used that as your model or guideline to create your own version of it. |
|
Project # 22)
Isometric
Systems
|
Isometric is a visualization system that predates
computers. What it does in essence, it allows objective representations of
a given subject matter by spacing the angles among dimensions equally, and
by keeping the depth of the space constant.
For this project you will be expected to design and visualize at least one simple piece of furniture or an architectural structure. If you don't have an affinity for architecture you can focus on drawing boxes that fit the isometric guide line, these boxes can be used to illustrate concepts other than those inherent to architecture. |
| Extra projects | |
|
2D animation tutorials. (extra) Animating Blends with Freehand MX
Importing 3D animation in Flash (coming)
|
Flash is the premier software for web animation.
These few scanty projects are intended to provide you with an introduction
to Flash.
If you are interested in a course dealing exclusively with Flash please look up what may be offered at other campuses. My intention is not to duplicate what is already offered there. After completing at least one Flash project, you will be required to insert at your Flash animations in Front Page, or any other html editor if necessary. If you are taking the DED version of this course and you do not have Flash at home you can substitute this Flash project with animated GIFs.
|
|
The Final Exam.
The final exam will be very similar to the midterm in terms of being another presentation, with the exception that it will include all of your work from project 1 to project 22 and the long term project. With the experience that you may have gained from the midterm presentation, and from my input, I will expect you to perform better. This is an opportunity for you to improve your grade. | |
|
File management, saving and storing your work.
To begin with, please read HOW TO MANAGE YOUR WORK You should purchase a USB drive, there are many brand names of different size capacity, please help yourself. You must back up your work, in other words save it in 3 different places: our network drive, your USB mini drive and you hard drive at home. You loose your work you loose your grade. Do not save your work on the C: drive or the desk top, the C: drive maybe reformatted by our IT staff several time during a semester, and your work will be wiped out. Storage devices and network drives available in the CG lab may change from year to year, depending on what kind of machines we have. Machine upgrades are not up to me as they come from the VCCS IT staff. | |
| Not familiar with a computer term? It is your obligation to find that out, make note of the term you do not understand, and ask me about it. You can also look it up using the Tech Encyclopedia | |
a
sample of a tile material.
a sample of rust, or corroded metal
