vector vs. bitmap
Computer graphics are created in one of two formats: vector and or bitmap. Computer files containing these graphics may contain vectors, bitmaps, or both.
Vector graphics are created by using mathematical algorithms: formulas that describe where points, lines, and planes exist and how these elements relate to one another. Vector graphics can be scaled up to any size and retain their smooth edges. Vector graphics look smooth and crisp at their edges, and they can be easily scaled to any size. Logos are nearly always developed as vector graphics, as a logo has to fit easily on a business card, a website, and possibly a billboard or bus wrapping.
Illustrator and Flash are applications most often used to create and modify vector images.
Bitmap or raster graphics are built from grids of pixels. Each tiny pixel contains a unit of color information. Bitmaps are used for digital photography and scanned images. Bitmap files are not as easily scalable as vector graphics.
In the top and bottom images we "zoomed in" on the same logo to 700%. This means we are viewing the images at 7 times their actual sizes. If you enlarge a raster image too much, the pixel grid becomes visible to the human eye. The only possible compensation is to blur the edges. Either way, enlarging a pixel-based image results in loss of quality. Vector images don’t have this limitation. On the other hand, extremely complex vector images take an excessive amount of computer processing power. The top image is a raster; it is easy to see the individual pixels that comprise the digital logo as tiny squares of color. In the bottom image, the logo has been created in the vector-based application, Illustrator. Notice that the edges of the lines, letters and figure are still rendered as smooth lines.
Project 1 – Create a Favicon for your blog with Illustrator
I will give you an in-class tutorial on the basic tools of Illustrator so you can create your favicon and then upload it to your blog.
A Favicon is the icon you see next to the URL of a specific website.
For instance, to the left of http://uwf.edu/ you see a favicon in the shape of a nautilus.
Your favicon should be an icon that represents you.
Step 1: In-class Illustrator Demo
Step 2: Hand-sketch some ideas for your favicon on paper I will provide.
Step 3: Start a new “WEB” document in Illustrator (as described in my demo) and create your favicon.
Step 4: Take a screen-shot of your finished favicon while in Illustrator by pressing command+shift+3. This will save your screen shot to the desktop. Post this to your blog.
Step 5: Save you Illustrator document for “Web and Devices”. Change the file extension of your document from .png to .ico
Step 6: Upload your favicon to your blog using the “design” function in Blogger.
Due dates:
MON & WED Class - Mon. Aug. 29th 2:30 pm
TUE & THURS Class – Tues. Aug 30th 11:30 am
