GRC 175

Computer Graphics Review

•Review of computer graphics concepts

•Review of Photoshop, Illustrator, Fireworks

•Review of scanning concepts

•HTML and CSS introduced

Bitmap vs Vector Graphics

Bitmap •Image is composed of pixels•Each pixel can represent a dif color•Not ideally up-sizeable or scalable•Used in painting programs like Photoshop•Also known as a raster graphic

Vector •Image is determined by a mathematical algorithm •Uses mathematical relationships between points and the paths connecting them to describe the image•Vector graphics are composed of paths•Scalable (up-sizeable)•Used primarily in drawing programs like Illustrator, Flash

Bitmap / Raster Graphic

•Made up of pixels (pixels, smallest element of resolution on the computer screen)•A pixels is often referred to as a dot but is actually square•Each pixel is represented by a shade of color •Bit depth determines the possible shades of color available•A bit depth of 4 (2 to the 4 power) = 16 colors possible•8 bit color (28 = 256 colors)•24 bit color (224 = 16,777,216 colors)•Recommended color mode for screen design is RGB

Bitmapped

Image aliasing can be a problem when using bitmaps

Aliasing

Jagged edges (aka stair-stepping) can be apparent when there are diagonal lines or curves in the image

Anti-aliasing

Attempts to smooth out the rough edges by blending edges by adding the appearance of a shadow to hide sharp edge

Photoshop

"bitmap" image editor

… used for creating, modifying and outputting digital images of a photographic nature, …manipulates individual color pixels within a fixed bitmap.

…also referred to as a “painting” program.

Continuous tone images (photo quality images) are edited in Photoshop.

Adobe Illustrator

“vector-based” drawing program

Vector graphics are composed of paths

You draw a path (line) by creating two anchor points

There are two types of anchor points: corner (makes a straight line) curved(makes a curved line).

In order to make a path/line you need two points

Adobe Illustrator cont.

You can create a curved line by generating curved paths (Bezier curves) connected by modifiable anchor points.

…anchors, with their handles are editable, and never "leave" the file.

Pulling and moving the handle on a curved point determines the curve that is produced between two points.

Vector to bitmap

The process of changing a vector graphic to a bitmap image is called rasterization

…converts the graphic's paths into pixels.

RGB color model

•Each pixel's color sample will have three numerical RGB components (Red, Green, Blue) to represent the color

•Pixel color is made up of three projected colors of light that mix together optically

•Projected light colors are red, green blue

•Mixed together these three colors create a color space called RGB

RGB color model

•Screen-based color for screen delivery

•RGB color is additive, meaning that mixing all the colors creates white

•The RGB color space was created for computer graphics to be viewed only onscreen

RGB color model

•What you see (as far as color on your screen) is not always the color that others will see on theirs

•Unpredictable color differences due to monitor settings and calibrations

•Calibration is how your monitor displays images

•No universal calibration model for screen-based color

RGB color model

•Macintosh images typically appear much darker on Windows systems due to gamma settings

•Gamma settings Windows ~2.2 vs Mac ~1.8

Hexadecimal-based colors

•Used for defining color in HTML

•Hexadecimal values are based on base-16 mathematics

•Graphics editors simplify this by showing us the colors to choose from and not having to know their Hex number

Hexadecimal-based colors cont.

• Hex value starts out with #

•Sample hex value #aaffqq

•There are sixteen color names that can be alternatively used instead of the Hex value, these names give us only basic colors like Black, Blue, Red, White, Yellow, etc

Scanning

• When scanning, set the dpi to your desired scan level/quality

• DPI dots (pixels) per inch

• Image size, quality, and file size varies with scanned dpi resolution

• 100-300 dpi is typical for scanning, depending on desired quality setting

• Use RGB color mode for screen output

• Each pixel's color sample will have three numerical RGB components (Red, Green, Blue) to represent the color

• If the web will be the final output then 72 dpi will be the final dpi when we do a “save for web” in Photoshop, auto adjusted in Photoshop

Scanning Recommendations Using Photoshop

•Open Photoshop (Use Photoshop to scan image )•File>Import (look for scanner or driver name)•Set scanning preferences

Set dpi to 300dpi Select dpi based on desired quality/use

•300dpi for archival quality •Preview Scan•Crop image•Scan image•Save in Photoshop

(save a archive file .psd format)

Photoshop image export for web

•File>Save for Web

•Select GIF for line art/text/logo (up to 256 colors)

OR

•Select JPG or PNG for photographs, images, gradients (over 256 colors)

•Photoshop automatically adjusts resolution to ~72dpi

•Click on Save

Native Photoshop file is .psd

Exporting out of Photoshop to a common image format like gif, jpg, png flattens the exporting image file (flattens layers)

.gif good for flat, solid colors. Contains up to 256 colors, limited color range. Good for type, line art, and images with sharp edges.

.jpg good for continuous tone images such as photographs or an image that contains a variety of shades, gradients, or blends.

.png also good for continuous tone images such as photographs, newer file format, combines the best of the two original common image formats

Dithering used with gif

•Creates the illusion of additional colors by positioning different colored pixels in order to simulate a color that does not exist on the 256 color palette

•Avoid dithering when possible

•Increases the file size slightly

•Can help when displaying gradients for gif images

Diffusion used with gif

•Helps simulates shades of colors for 8 bit 256 limited color display

•Produces a less obvious result while maintaining a small file size

•Higher percentages of diffusion do a better job of simulating

shades of colors

Image compression types

•Lossy: Some image data is lost in exchange for making the file size smaller (compressing)

•Lossless: allows the exact original data to be reconstructed from the compressed data

Transparency options

•There are options available to preserve transparent parts of an image

•Transparent parts appear as grey/white checkerboard in Photoshop background

•When “saving for web” save as transparent gif or ping and select the transparency option

•Preserves the transparency in the original image or allows you to define the color which should be used for transparency

Gif animation

•Animated format using the gif image file format

•Suitable for web, no plug in needed for viewing of animation, plays within browser

•Photoshop enables you to build animation and save in the animated gif format

•Rarely used anymore, Flash is a competing file format that requires a plug-in but offers more options

Browser/Web safe palette myth

The only reason to use the browser-safe palette is if you have a concern that your Web design work will be viewed from a 256 color (8-bit) computer system, extremely rare.

The Browser-Safe Palette only contains 216 colors out of a possible 256. That is because the remaining 40 colors vary on Macs and PCs. By eliminating the 40 variable colors, this palette is optimized for cross-platform use.

The Browser-Safe Palette should not be used to remap color photographs.

http://www.lynda.com/hex.html

Web Graphics File Formats

The three most popular image file formats for Web use

JPG

GIF

PNG

Web Graphics Resolution

72 dpi dots / pixels per inch

(Recommended setting for web graphics)

Use pixels as your standard unit of measure when working in editing programs such as Photoshop and Illustrator

When scanning you may want to scan at a higher DPI if you plan on using a high resolution or needing a large image or for non web or for print

Web Graphics Compressed File Formats

.jpg•Photographs, gradients and textures with more than 256 colors•Uses lossy compression, throws out data

.gif •Logos and Text•Supports transparency •GIF format supports GIF animation aka. Animated GIF•Uses lossless compression no data loss yet compressed

.png•Originally meant to replace GIF•Includes most features of GIF and JPG •32 bit color transparency, alpha transparency, no animation•Not supported in older browsers•Uses lossless compression no data loss yet compressed

HTML overview

HTML tags

Relative vs Absolute images/links

Deprecated vs obsolete tags

CSS in future/advanced development

Minimum Required HTML tags:(case sensitive in newer HTML, but must go in this order!)

<html>

<head>

<title>

</title>

</head>

<body>

</body>

</html>

Creating a webpage using HTML tags

• A webpage is a plain text document, contains all the required HTML tags, and saved with the .html file extension

• Tags can be typed in TextEdit or any plain text editor like Notepad and document is saved as anyname.html

• Most HTML tags have opening and closing tags

• Tags are used to markup text to have a desired format

Creating a webpage using HTML tags cont.

• Extra lines or extra character spacing is ignored

• Tags can be nested, must be ordered correctly<p><em>bold text here</em></p>

• Tags were case insensitive (upper, lower or mixed) although the newer standards XHTML and after will now require all lower case (except DOCTYPE declaration)

Sample HTML tags, go inside body

• Hyperlink<a href="URL goes here">Type a name for the link</a>

• Image<img src="image filename location goes here" />

• Line Break <br />

• Paragraph <p>paragraph content goes here</p>

• Bold<strong>bold text ges here</strong>

Relative vs Absolute images/links

•Important concept of files and important in web development

•Relative path (relative to wherever you are)

For example

/images/i.gif

(reads …look for a folder called images and inside the folder find file i.gif)

•Absolute path (absolute path to location)

For example

http://www.art.com/images.i.gif

Client server computing

•Client is the one viewing or connecting to remote file

•Server is where files are stored

•Client is the program like Internet explorer being used to connect to your webpage, each individual web browser is referred to as the client

•Server is the web server which serves up files such as webpages

Web files overview

•The web has become a very common way for publishing files

•Need to understand URL addresses

•Relative vs Absolute images/links

URL

•Uniform resource locator, URL

•Web address for an online file

•Important concept of web files

•Absolute path (absolute path to location)

For example http://www.art.com/images.i.gif

Files, Folders & Directories

•Another important concept of files and web

•Files such as online web pages and online images are stored in directories

•Within directories we can have folders

•Folders can have sub folders

•Must keep highly organized when creating websites

•Organize your content into logical folders

Dreamweaver

•Dreamweaver is a software program used to author webpages and very useful as a Website management tool, aka “wysiwyg” editor, what you see is what you get

•DW has a built in FTP program

•FTP used to connect to a remote web server

•FTP, File transfer protocol

•You must first define your sites (within Dreamweaver) on each machine you author on before you can FTP into a remote site

The World Wide Web Consortium (W3C)

W3C develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding.

The World Wide Web Consortium

http://www.w3.org/

Deprecated vs Obsolete

• Deprecated means outdated and may soon become obsolete (will probably continue to display by browsers)

• Obsolete means it is no longer supported and may not be recognized (by browsers or interpreters)

• An obsolete element or attribute is one for which there is no guarantee of support by a user agent

• Obsolete elements are no longer defined in the specification

W3C standardsDeprecated

A deprecated element or attribute is one that has been outdated by newer constructs. Deprecated elements are defined in the reference manual in appropriate locations, but are clearly marked as deprecated. Deprecated elements may become obsolete in future versions of HTML. User agents should continue to support deprecated elements for reasons of backward compatibility.Definitions of elements and attributes clearly indicate which are deprecated.This specification includes examples that illustrate how to avoid using deprecated elements. In most cases these depend on user agent support for style sheets. In general, authors should use style sheets to achieve stylistic and formatting effects rather than HTML presentational attributes. HTML presentational attributes have been deprecated when style sheet alternatives exist (see, for example, [CSS1]).

Obsolete An obsolete element or attribute is one for which there is no guarantee of support by a user agent. Obsolete elements are no longer defined in the specification, but are listed for historical purposes in the changes section of the reference manual.

DEPRECATED Tags

The following HTML page illustrates the use of the deprecated HTML attributes. It sets the background color of the canvas to white, the text foreground color to black, etc.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>a study of population dynamics</title>

</head>

<body bgcolor="white" text="black"

link="red" alink="fuchsia" vlink="maroon" >

... document body goes here...

</body>

</html>

CSS Cascading Style Sheets

• The presentational attributes of HTML have been deprecated and replaced with CSS

• CSS now the preferred way to specify a HTML document's presentation, or style a webpage

<style type="text/css">body {

background-color: black; }

</style>

This webpage has an internal style sheet being applied. The style sheet has a style for the body tag, it is adding a background color of black to the body, this style is also referred to as a rule

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN” "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>a study of population dynamics</title><style type="text/css">

body { background-color: black; }</style>

</head>

<body>

... document body goes here...

</body>

</html>

We will learn more about HTML and CSS during the semester.

This concludes our CG Review.

Please bring up any questions if at this time if you do not understand any of the basic computer graphic concepts we have reviewed.