VCD 357 Marketing Communication
Download
Report
Transcript VCD 357 Marketing Communication
JRN 440
Adv. Online Journalism
Raster file formats for
projected
Monday, 2/13/12
Class Objectives
Lecture
Raster File Formats for Projected
Homework
Update: P1 due Monday, 2/20, at 2:05 p.m.
No class this Wednesday, 2/15
Sign up for 3/28 1:30-3:30pm SmartPhone
success at the U.C.
SmartPhone and tablet productivity, time, project,
people, and e-mail management apps
“Critical basics" for true mobile productivity
To register, please go to iCentral/My Work
Day/Employee Training/Current Employee Training
File types
File names, extensions or suffixes that
indicate the format or usage of a file and a
brief description of that format.
The file format in which you save your file
depends on where it is headed…
For Print use TIF, EPS, and PDF
For Web use GIF, PNG, and JPEG
Compression
Compression = taking large files and making them
smaller. Compression works by eliminating redundant
information. There are two types of compression:
Lossy - This method eliminates data to tightly
compress it. Usually, this means the repetitive or
redundant data so the resulting output is NOT an
exact copy of the original.
JPG
Lossless - Uses a compression algorithm that
reduces file size but does not lose any data.
RLE and LZW
Lossy Compression
Lossy= lose data when compressing
Most common technique is JPEG
Reduces the file size of natural, photographic-like true-color
images as much as possible without affecting the quality of
the image as experienced by the human sensory engine.
We perceive small changes in brightness more readily than
we do small changes in color. It is this aspect of our
perception that JPEG compression exploits in an effort to
reduce the file size.
Idea is too much data for normal human eye to see…the
image would still look the same without all this extra data.
Do not make multiple compression saves; avoid
recompressing JPEG images multiple times. You
should save 1x and return to the master image for
subsequent changes.
Lossless Compression
Lossless = no loss of data when you
compress or decompress the file
All image information is restored during
viewing
Common techniques
RLE, default for PDFs
LZW, used to be only option for TIFFs
PNG and GIF are lossless
Web images: JPEG, JPG
Best for displaying photographs composed of many colors or
subtle color variations.
Not good for images that have a lot of solid colors
Computer generated art, line art, type
When you save as JPG
Compression quality
Higher quality number means better image quality, less
compression, larger file size
Lower quality number allows for more compression and
worse image quality and smaller file size
Progressive- select this
Web browsers will display a lo-res version of the image
first, then replace with hi-res
On the average- Progressive jpegs are actually smaller
than non-progressive (do it now)
Web Images: JPEG 2000
Extension is (normally) .jp2
Either Lossless OR lossy compression
Includes transparency
Ability to display images at different resolutions
and sizes from the same image file
http://www.verypdf.com/pdfinfoeditor/jpegjpeg-2000-comparison.htm
Problem
the only way browsers can display jpeg2000 is
with a plugin
can’t use in Dreamweaver
Web Images: GIF
First image format available for the web; still
widely used
Owned by Compuserve
Best for small graphical images (e.g. icons,
buttons) comprised of a few flat broad shapes
When you save as GIF, your image mode
changes to Index color (only 256 colors)
Reduction methods
Selective- better for synthetic images with highcontrast edges (images from Illustrator)
Perceptual- creates nicer transitions between
colors; best for scanned images
Web Images: GIF
GIF Options, Interlaced
Interlacing helps convey information to the viewer
faster.
An interlaced image is broken down into four passes,
the first of which displays the entire image at low
resolution very quickly.
Each successive pass increases the resolution as the
image is being downloaded.
Gives the user a better idea about what is loading so
they can make decisions about the information without
waiting for the entire image to load.
Web Image: GIF
Allows transparency
Useful when adding spot illustrations of irregular
shapes to a Web page that has a background pattern
or color.
Background will show through all transparent sections
rather than having all the illustrations in solid
rectangles.
In Photoshop, select the area you want to be
transparent, and delete it (on unlocked layer), be sure
to save as GIF
Do it now, save deleted as both JPG and GIF
Bring both into Dreamweaver
Change mark-up to be <body style="backgroundcolor:red;">
Web Image: PNG
Because Compuserve owns GIF patent, PNG
was created by W3C
Png is web standard (royalty free) for raster
images
Can do everything GIFs can do
Including transparency, although
Dreamweaver may not show it.. need to test it
in IE
Transparency
When to use transparency
If you want a shape other than a rectangle
Aliasing will create a sharper cut
Anti-aliasing is a partial selecting of pixels
Feathering (with anti-aliasing) also
produces a partial selecting of pixels
Photoshop and ImageReady
In Photoshop CS, if you “Save for Web and
Devices”, you get lauched into ImageReady
Clicking on the “optimized” tab is a good way
to get best suggestion for Web image
2 and 4 up let you see what changes will do
to your image before you save them
“Dithering” means adding patterned or random
dots to the image to make it appear to contain
more colors than are actually in the palette,
allowing you to use a smaller palette size.