Transcript ppt - Computer Graphics Home

GRC 275
Computer Graphics Review
•Review of basic concepts learned in prior GRC courses
•Overview of general computer graphics terminology
•Review of Photoshop, Illustrator
•Review of scanning concepts
•HTML and CSS reviewed
Bitmap vs Vector Graphics
Bitmap/Raster
•Image is composed of pixels
•Each pixel can represent a dif color
•Not ideally up-sizeable or scalable
•Used in painting programs like Photoshop
Vector
•Image is determined by a mathematical algorithm
•Vector graphics are composed of paths
•Uses mathematical relationships between points and the paths
connecting them to describe the image
•Scalable (up-sizeable)
•Used primarily in drawing programs like Illustrator
•Pen tool can be used to create custom vector shapes
Bitmap (Raster Graphic)
•Made up of pixels
•Pixels are the 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 output is RGB
•Recommended color mode for print output is CMYK
RGB color model with pixels
•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
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
•Projected light colors are red, green blue
•Mixed together these three colors create a color space called
RGB
Bitmap problems
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" or "raster graphic" 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 (like jpg or 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)
You can create a shape by adding additional points and paths
You can use the pen tool to create anchor points
Bezier Curves
You can create a curved line by generating curved paths (Bezier
curves) connected by modifiable (curved) 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.
You should know and be comfortable with how to use the pen tool
in Illustrator and Photoshop.
Take time to continually practice with the pen tool in order to
perfect your pen tool skills.
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
•What you see (as far as color on your screen) is not always the
color that others will see on their screen
•Unpredictable color differences due to monitor settings and
calibrations
•Calibration is how your monitor displays images
•No universal calibration model for screen-based color
•There are tools and programs used for calibrating monitors
RGB color model
•Macintosh images typically appear darker on Windows
systems due to gamma settings
•Gamma settings Windows ~2.2 vs Mac ~1.8
Hexadecimal-based colors
•Hex value is used for defining color in HTML and can also
be used in popular graphic programs
•Hexadecimal values are based on base-16 mathematics
•Graphics editors simplify this by showing us the color
swatch to choose from without us having to know a Hex
number
Hexadecimal-based colors cont.
• Hex value starts out with #
•Sample hex value #aaffqq
•In HTML there are 17 standard color names that can be used
instead of the Hex value, these names give us only basic colors like
Black, Blue, Red, White, Yellow, etc
•Programs like Photoshop let you pick colors using different values
like Hex, RGB, or CMYK
Scanning
• When scanning, set the ppi to your desired scan level/quality
• ppi dots (pixels) per inch
• Image size, quality, and file size varies with scanned ppi
resolution
• 100-300 ppi 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 or screen will be the final output then 100 ppi is
recommended
•Most monitors display at approx 100ppi
•300 ppi is good for high quality archival
Scanning Recommendations Using Photoshop
•Open Photoshop (If possible use Photoshop to scan image )
•File>Import (look for scanner or driver name)
•Set scanning preferences
Set ppi to approx 300ppi
Select ppi based on desired quality/use
•Preview Scan
•Crop image
•Scan image
•Save in Photoshop
(recommended you save as a archive file .psd format)
Photoshop image export for web
•Set resolution to approx 100ppi for screen output
•File>Save for Web
•Recommended select JPG or PNG for photographs, images,
gradients (over 256 colors)
•GIF is available for line art, text, simple logo (up to 256 colors)
•Click on Save
Native Photoshop file is .psd
Exporting out of Photoshop to a common image format
flattens the exporting image file (flattens all layers)
.gif
good for flat, solid colors. Contains only up to 256 colors,
limited color range. Good for type, line art, and images with
sharp edges. Bad for gradients or photographs.
.jpg
good for continuous tone images such as photographs or an
image that contains a variety of shades, gradients, or blends.
No transparency options.
.png
also good for continuous tone images such as photographs,
newer file format, combines the best of the two original
common image formats and allows for transparency.
Image compression types
Lossy
Some image data is lost or thrown out in exchange for making the
file size smaller (compressing). Jpg uses lossy.
Lossless
allows the exact original data to be reconstructed from the
compressed data. File size becomes smaller but not as small as
jpg. Png uses lossless.
Transparency options
•There are options available to preserve transparent parts of
an image
•Transparent parts appear as grey/white checkerboard in a
Photoshop background
•When “saving for web” save as transparent ping or gif 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
Web safe colors myth
Old, web safe colors are no longer used.
The only reason to use the web-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 web/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.
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
JPG
GIF
PNG
Web Graphics Resolution
Recommended setting for web graphics being viewed on screen
100 ppi dots (pixels per inch)
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 ppi if you plan
on using a high resolution or needing a large image or for print
output
Web Graphics Compressed File Formats
.jpg
•Photographs, gradients and textures with more than 256 colors
•Uses lossy compression, throws out data. No transparency.
.png
•Originally meant to replace GIF
•Includes most features of GIF and JPG
•32 bit color transparency, alpha transparency
•Not supported in very old browsers
•Uses lossless compression no data loss yet compressed
.gif
•Simple logos, text, and line art. Limited to only 256 colors.
•Supports transparency
•GIF format supports GIF animation aka. Animated GIF
•Uses lossless compression no data loss yet compressed
Dithering only 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 only 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
Gif animation
•Animated format using the gif image file format
•Allows you to create a simple animation with a gif image
•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, not recommended, Flash is a better
file format that requires a plug-in but offers more options
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 web URL location)
For example
http://www.art.com/images.i.gif
Relative vs Absolute images/links
•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
Files, Folders & Directories
•Another important concept of files and web
•Files such as online web pages and online images are stored in
directories
•A directory is another name for a folder on a web server
•Within directories we can have folders
•Folders can have sub folders
•Must keep highly organized when creating websites
•Organize your content into logical folders like an images folder
Client server computing
•Client is the one viewing or connecting to a remote file
•Server is where files are stored
•Client is the program like Internet Explorer being used to connect
to your file like a webpage
•Each individual web browser is referred to as a client
•Server is the web server which serves up files such as webpages
HTML overview
HTML tags
Relative vs Absolute images/links
Deprecated vs obsolete tags
CSS in future/advanced development
Creating a webpage using HTML tags
•
A webpage is a plain text document and contains all the required
HTML tags, and is saved with the .html file extension
•
Tags can be typed in TextEdit or Notepad or any plain text editor
but document must be saved using .html file extension like
anyname.html
•
Most HTML tags come in pairs and have opening and closing
tags. Tag example shown below.
•
<p>a paragraph goes inside here</p>
•
Tags are used to markup text to have a desired format
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 cont.
• Extra lines or extra character spacing is ignored
• Tags can be nested, must be ordered correctly
<p><em>italic text here</em></p>
• Tags were case insensitive (upper, lower or mixed)
although the newer standards HTML5 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>
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 standards
Deprecated
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 now deprecated
HTML attributes. It sets the background color of the canvas to white,
the text foreground color to black, etc. Acceptable in the old version of
html but no longer used in the newer version of html5.
<!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
<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>
Older Browsers that don't support CSS
•
Older browsers, before Netscape 4.0 and Internet
Explorer 4.0, either don't support CSS at all or do so
inconsistently
•
For these browsers you can still control the style by
using HTML if absolutely necessary
Validating HTML pages
•
Webpage's can and should be valididated (tested)
•
To further promote the reliability and fidelity of
communications on the Web, W3C has a
W3C Markup Validation Service at
http://validator.w3.org
Benefits to validating
•
Web pages will work more consistently and on a wider
variety of browsers
•
Web pages load faster
•
Will be better supported on new devices being used to
view web pages
•
More accessible to the visually impaired who use aural
screen readers (<img> alt and src required for strict)
Additional required tags shown in bold required for validation:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>
title goes here
</title>
</head>
<body>
<h1>
welcome to my webpage
</h1>
<p>
<img src="http://www.vegas.com/image.jpg" alt="vegas image">
</p>
</body>
</html>
Recommended DTDs to use in your Web document
•
When authoring a document in HTML5, it is important
to Add a Doctype declaration
•
The declaration must be exact (both in spelling and in
case) to have the desired effect
•
Such a definition is called a "Document Type
Definition", or for short, DTD
•
Given its syntax, the DTD declaration is often called, for
short, "Doctype"
You ask why its needed?
•
Tools which process HTML documents, such as Web
browsers, need to know which DTD an HTML document
is actually using
•
This is a critical piece of information needed by browsers
or other tools processing the document
•
This is why each HTML document needs, at the
beginning, a DTD declaration, such as:
<!DOCTYPE HTML>
The most widely used DTD by professional Web
designers is now
HTML 5
<!DOCTYPE HTML>

We will be using this version of HTML during our class

When you create a new document in DW File>New make sure
you specify the DocType: HTML5
51
And even more reasons to specify a doctype?
•
With most browsers, a doctype declaration will make a lot
of guessing unnecessary and Web pages load faster
•
Web pages will work more consistently and on a wider
variety of browsers
•
Will be better supported on new devices being used to
view web pages
•
More accessible to the visually impaired who use aural
screen readers
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.