Preparing Images for the Web

Preparing Images for the Web
The basics on file formats, resolution,
editing, and optimization.
Welcome to Web Graphics!
Overview:
You will learn:
A comprehensive study of Adobe Photoshop
Elements, an application used to create,
manipulate and optimize images for use on
the Web. Image file formats and resolution
will be discussed at length as well as
appropriate image preparation for e-mail
attachments.
Digital Image Formats: What are they
and how to use them correctly.
Web and the Resolution: Screen
resolution how it affects image display.
You will need:
{
{
{
Adobe Photoshop Elements
Digital Images (.jpg, .gif, .tif)
Microsoft Windows XP
Preparing Images for the Web
The Pixel: What a digital image is made of
and how it determines image resolution
and size.
Under Compression: “Save for Web” vs.
“Save”
Get the picture: Importing images from
the Web, a digital camera, other
device.
Center for Professional Development
Prepared by: Kimberly Alvarado
Digital Image Formats
GIF
(Graphic Interchange Format)
JPEG
(Joint Photographic Experts Group)
What is it? A graphic file format that was
developed specifically for use on the Web. The
max amount of colors that can be displayed is
256. Uses LZW compression. Allows
transparency.
What is it? A graphic file format that was created
to allow for full-color images. Millions of
colors can be displayed using a JPEG. Uses a
complex mathematical algorithm to calculate
compression.
Uses:
{
The Web
Uses:
{
{
Great for:
Black & white images
{
Line drawings
{
Images that use “web-safe” colors
{
Images that have large areas of homogeneous
color.
{
Simple animated icons and banners
{
Images with transparent areas
{
The Web
Digital cameras produce them
Desktop printing
{
Who uses it?
{
Web designers
{
Web graphic designers
Preparing Images for the Web
Great for:
PowerPoint presentations
{
High image quality
{
Color fidelity or true-life
{
Complex textures
{
Who uses it?
Graphic designers
{
Web graphic designers
{
Web designers
{
Photographers
{
Center for Professional Development
Prepared by: Kimberly Alvarado
The Pixel:
What a digital image is made of.
A digital image is made up of PIXELS.
Pixel: A tiny block of color.
Image Resolution: The number of pixels in an
image equals the size of the image.
Zoom-in/Zoom-out…
{
Zooming in on an image reveals the individual
pixels present.
{
From far away the image appears smooth and
cohesive.
{
Close-up, the image appears jagged and
“PIXELATED”.
For example, an 800x600 pixel image has an image
resolution of 480,000 (the total # of pixels). It
is different from SCREEN RESOLUTION.
Pixels on the computer screen…
1 digital image pixel = 1 screen pixel
{
Resizing images is just a matter of decreasing or
increasing the number of pixels in an image.
When resizing, the image is RESAMPLED according
to an INTERPOLATION method. Interpolation
is the method in which pixels are added or
deleted from a digital image.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
The Pixel:
What a digital image is made of.
Compare a digital image to a mosaic
Just like a mosaic is composed of
many multicolored pieces of glass
and stone, so a digital image is made
up of multiple pixels.
Preparing Images for the Web
When you zoom in far enough on a
digital image, you are able to see the
individual pixels that compose it.
Center for Professional Development
Prepared by: Kimberly Alvarado
The Pixel:
What a digital image is made of.
Hands-on Activity
Explore an image’s pixels
Finding the pixels
1.
2.
3.
4.
5.
6.
7.
8.
Click START>ALL PROGRAMS>ADOBE PHOTOSHOP ELEMENTS…
Open an image by clicking BROWSE FOR FILE… on the Welcome Screen or
FILE>OPEN… on the window toolbar.
Navigate to the sample image files in C:\PROGRAM FILES\ADOBE\PHOTOSHOP
ELEMENTS 2\SAMPLES…
Choose an image file and double-click on it.
Zoom in on the image by clicking on the magnifying glass on the Tools palette. The
cursor turns into a magnifying glass.
Using the magnifying glass, click on the image until you can see the individual pixels.
Experiment with zooming in and zooming out.
Note at what zoom percentage the image begins to appear “pixelated”.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
The Pixel:
What a digital image is made of.
Hands-on Activity
Resizing Images
Image size and resolution
1.
2.
3.
4.
5.
6.
7.
With the same image file open, view the image’s properties by clicking on
IMAGE>RESIZE>IMAGE SIZE…
Here you can see image’s size, or image resolution.
Under Document Size, the size is given in inches. Here you can see how large the image
would print on paper.
Keep “Resolution”, under Document Size, at its default setting. This does not refer to the
image resolution, but rather to how many of the images pixel’s will be displayed per inch on
a computer monitor. This is affected by SCREEN RESOLUTION.
Keep “Constrain Proportions” checked when you want the width and the height of the
image to remain in proportion to each other.
Keep “Resample Image” to bicubic when enlarging images and bilinear when shrinking.
Experiment with resizing the image.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Web and the Resolution
Screen Resolution: the number of pixels your
computer monitor displays.
Screen resolution varies with the settings on
your computer. For example …
{
A monitor with an 800x600 screen resolution
is capable of displaying 800 pixels across by
600 pixels down.
{
A monitor with an 1027x768 screen
resolution is capable of displaying 1024
pixels across by 768 pixels down.
Screen resolution vs. image resolution
Both determine how an image is displayed on a
screen.
{
If an image’s dimensions, or resolution, equals
the screen resolution, the image will fill the
screen.
{
For example: An 1280x960 image displayed
on a monitor with 1280x960 screen resolution
will fill the screen completely.
{
Most monitors come with a range of screen
resolution settings:
{
From “low” or “less” to “high” or “more,
800x600, 1027x768, 1028x960, etc.
{
The more or less refers to the number of
pixels it can display.
The trade off…
The higher the screen resolution setting the
smaller everything on your monitor will
appear.
{
{
The size of your monitor determines how big each
pixel is displayed.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
A 1280x960 image displayed on a monitor with
800x600 screen resolution will appear bigger
on screen.
Web and the Resolution
Hands-on Activity
Screen resolution and its affect on images
1.
2.
3.
4.
5.
6.
With the same image opened, return the image to it’s original state. Use the History
palette, if need be to, to “rewind” or “rollback” any edits you may have made.
Click START>PROGRAMS>CONTROL PANEL
Double-click on DISPLAY. The “Display Properties” window appears. Click on the
“Settings” tab.
Change the screen resolution and click OK.
Go back to the image in Photoshop Elements and notice how the image appears.
Experiment with the screen resolution settings.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Web and the Resolution
Hands-on Activity
Screen resolution and desktop wallpaper
1.
2.
3.
4.
Click START>PROGRAMS>CONTROL PANEL
Double-click on DISPLAY. The “Display
Properties” window appears. Click on the
“Desktop” tab.
Click on BROWSE and choose an image to
use as your wallpaper.
Choose whether to tile, stretch, or position
the wallpaper in the center.
{
Tile: repeats the image across your
screen. The number of tiles is
determined by the size of the image.
The smaller the image the, the more it
tiles across the screen.
{
Center: places the image directly in
the center of your screen. The size of
the image is determined by the
SCREEN RESOLUTION and IMAGE
RESOLUTION
Preparing Images for the Web
{
5.
6.
7.
8.
Center for Professional Development
Prepared by: Kimberly Alvarado
Stretch: forces the images to fill the screen,
even if its too small. Distortion will occur
however if the image’s dimensions are not at
least similar if not the same as the SCREEN
RESOLUTION.
Choose a background color for your desktop
just in case the image you choose is not big
enough to cover the whole screen without
stretching or tiling it.
Click OK.
Look at your new desktop wallpaper.
Experiment with the various position
settings.
Under Compression
To allow for faster download times, Web graphics
are COMPRESSED or, reduced in pixel
number.
Both GIF and JPEG images can be compressed.
Image compression allows for…
{
Lower file sizes
{
Faster downloads
The snowball effect… the more pixels, the higher
the image resolution, the higher the image
quality, the bigger the file size, the higher
the download time.
The ideal GIF resolution = 72ppi-100ppi
or how many of the images pixel’s will be
displayed per inch on a computer monitor.
SCREEN RESOLUTION affects this.
The ideal JPEG resolution = whatever quality is
needed since the majority of the time they are
photos which need true-color quality.
Many image editing applications come with a “Save
for Web” feature which allows you to choose
the optimum settings for your Web graphics.
The solution… To counteract this snowball effect,
image editing applications allow you to
determine what resolution your image should
appear in on the screen.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Under Compression
Hands-on Activity
My first Web graphic
1.
2.
3.
4.
5.
With the same image opened, return the image to it’s original state. Use the History palette, if need
be to, to “rewind” or “rollback” any edits you may have made.
Add text and shapes to the image using the Tools palette.
When you are done with your graphic, click FILE>SAVE FOR WEB…
Now you see two (2) instances of your graphic: the original and a preview.
Watch the quality, download time and file size of your graphic change as you apply different options.
“Save for Web” for GIFs
{
{
{
{
{
{
{
{
“Save for Web” for JPEGs
Optimized file format: GIF
Color reduction process: perceptual,
selective, adaptive, Web.
Dither: The way in which your GIF will
manifest on the screen while being
downloaded. Dither types: diffusion,
pattern, noise.
Transparency and Transparency Dither
Interlaced
Lossy
Colors: choose how many colors the image
can display without losing quality.
Web Snap
Preparing Images for the Web
{
{
{
{
{
{
Center for Professional Development
Prepared by: Kimberly Alvarado
Optimized file format: JPEG
Compression quality
Progressive: the way in which your JPEG will
manifest on the screen while being
downloaded.
Quality
Blur
Matte
Get the Picture
How do I get my image from my CD, digital camera, etc?
{
Images can usually be imported into image editing applications from
within the applications themselves.
{
Digital devices such as cameras can be either plugged into your
computer with a cable directly for retrieval of images or the memory
card reader can be directly plugged into the computer. The memory
card could then be inserted into the reader for image retrieval
{
Windows Explorer (the map of the Microsoft Windows computer), can
be used to copy your files to your Desktop from a disk drive such as
your memory card reader or USB memory stick.
How do I get my image from my e-mail?
{
Image e-mail attachments must be downloaded and saved to your
computer in order to work with them.
{
They can be saved directly to your computer.
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Final Thoughts…
Saving with a purpose…
TIPS:
When working with digital images in general,
determine your purpose and save your images
accordingly.
Save your work at regular intervals during your
image editing sequence. You will lose all the
changes you have made if the image editing
software or computer crashes.
Web: .gif or .jpeg
Print: .tif (Tagged Image File Format)
General/Archive: .tif or .psd (Photoshop native)
Editing with a purpose…
When you are ready to edit your digital images don’t
forget where they are going to be used.
Will they be…
{
Used on a website?
{
Used in an application such as PowerPoint?
{
Sent in an e-mail?
{
Printed in color or black and white?
Preparing Images for the Web
Always SAVE your original images in a native
&/or non-destructive format such as .tif or
.psd first. Saving new images as .jpg or .gif
will automatically degrade the quality of any
subsequent uses.
Make a copy of any original image you wish to
make edits on. This leaves the original image
untouched and you are free to experiment on
the copy.
Best fonts for plain text on the Web:
{
Times New Roman, Arial, Verdana, Trebuchet
MS, Century Gothic
{
This excludes text used in images; images can
contain any font type since the image does not
rely on the user’s having a particular font
installed on their computer.
Center for Professional Development
Prepared by: Kimberly Alvarado
Additional Resources
Books:
Fott, G. & McClelland, D. (2002). Photoshop Elements 2 For Dummies. Indiana: Wiley Publishing, Inc.
Frazier, P. & Smith, B. E. (2003). “Compressing and Image in Photoshop Elements”. Creating Web Graphics
for Dummies. Indiana: Wiley Publishing, Inc.
Lynch, Patrick J. (2002). Web Style Guide 2nd edition. Connecticut: Yale University Press.
King, Julie A. (2002). “Demystifying Digital Camera Resolution”. Shooting & Sharing Digital Photos for
Dummies. Indiana: Wiley Publishing, Inc.
King, Julie A. (2002). “Shrinking Digital Pictures to Screen Size”. Shooting & Sharing Digital Photos for
Dummies. Indiana: Wiley Publishing, Inc.
King, Julie A. (2002). “Ten Ways to Protect Your Pictures”. Photo Retouching & Restoration for Dummies.
Indiana: Wiley Publishing, Inc.
Warner, J. (2005). “Working with Digitally Captured Images”. Creating Family Web Sties for Dummies.
Indiana: Wiley Publishing, Inc.
Websites:
Official “Web Style Guide 2nd edition” website. http://www.webstyleguide.com/
Official Adobe Photoshop Elements website. http://www.adobe.com/products/photoshopelwin/main.html
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Image Credits
Slide 4: Photoshop sample image
Slide 5: http://www.bbc.co.uk/history/ancient/romans/mosaics_gallery.shtml
Slide 8: http://www.snoopy.com
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Support Information
Kimberly Alvarado (Instructor)
Web Designer
Center for Professional Development
X74650
kalvarad@kean.edu
Maria Perez
Coordinator
Center for Professional Development
x74562
mperez@kean.edu
Preparing Images for the Web
Center for Professional Development
Prepared by: Kimberly Alvarado
Download PDF