Transcript Image Files Slideshow - Angelo State University

How to Prepare Image Files
for the Web
The non-Designer's Web Book
2nd Edition
By Robin Williams & John Tollett
Chapter 11, Pages 189 - 218
Prepared by Linda Blocker
Technology Applications
Standards
http://www.sbec.state.tx.us/
SBECOnline
 TA 11.2s
Delineate and make necessary
adjustments regarding compatibility
issues, including, but not limited to,
digital file formats and cross-platform
connectivity.
Technology Applications
Standards


TA 11.10s
Acquire information in electronic
formats, including text, audio, video,
and graphics.
TA 11.11s
Model respect for intellectual properties
when acquiring information in electronic
formats.
Technology Applications
Standards

TA 11.12s
Identify, create, and use available
file formats including text, image, video
(analog and digital), and audio files.
Web graphic specifications



Use RGB web-safe colors.
Make the image the size
you want it on the web page.
Save images


As GIF or JPEG
Select 72 ppi (pixels per inch) resolution on
the computer screen.
Saving Web Graphics





Optimize your image, so it will load
quickly.
Use the lowest, acceptable quality level.
Experiment to find the best quality level
with the smallest file size.
Preview before you save.
Save all the final graphics in a special
graphic file folder for your web page.
Popular graphic file types




GIF (Graphic Interchange Format)
JPEG (Joint Photographic Experts
Group)
Both GIF and JPEG can be viewed
with any browser on the web.
Both GIF and JPEG can use any
graphics program in any platform.
GIF files

GIF files are best for graphics with large
areas of flat color





Type
Simple illustrations
Images with flat colors
GIFs have a very small file size.
GIF files use only 8-bit indexed color
mode.
Saving GIF files





Use web safe colors
Reduce the color palette to the
minimum necessary.
Turn off "anti-aliasing“.
Save with "interlacing“, to tell the
browser to gradually load the image.
Save as 72 ppi, in indexed color mode.
JPEG files

JPEG is widely used on the web for
photographs or graphics that have many
colors and shades and very few areas of flat
color.





Photographs
Paintings with many colors and shades
Drawings with lots of color gradations
JPEG files are very compressed and small.
JPEG files display rich 24-bit color.
Saving JPEG files



Each copy deteriorates the quality, so
save a Master copy.
Select "progressive" to tell the browser
to gradually load the quality of the
image from low to high resolution.
“Baseline Optimized” formatting gives
the best color quality.
Finding Graphics




Draw your own graphics or have someone
make images for you.
Scan images or photos.
Find books of copyright-free clip art.
Buy graphic source CD-Roms.





Borders
Fonts
Clip art
Graphics
Download graphics or images from the web
(Watch for copyrights).
Making Digital Photographs

Deliver or mail your film to a photo lab to be
digitally processed.




Floppy disk
Photo CD Rom
Post your photos onto the web.
Upload images




Digital camera
Camera memory card or disk
Computer webcam
Cell phone camera.
Scanning Images

Scan images into a digital format.





Many homes, businesses, and schools have
scanners.
Many office supply or copy stores have pay
scanners.
The glass surface determines the largest size
picture you can scan on a flatbed scanner.
Edit the image, and make it’s dimensions the
size that you want on the web page.
Make a copy to save as JPEG or GIF for the
web.
Make a Scanned Image


Make a Master file, at a resolution of
144 or 150 so you can edit it easily.
Save as a TIFF



TIFF makes a high-resolution master copy.
Make copies of the master, for editing.
An image which will be printed should
be scanned at 300 ppi.
Scanner Resolutions



A 144 ppi Master image will leave the
cleanest image, when a copy is reduced
to 72 ppi.
When presented with Low, Medium, or
High: Medium will meet most needs.
High is helpful, if you plan to do a lot of
work on the image.
Colors



"Thousands" of colors in an image will
meet most web needs.
A GIF with 256 colors works well for an
image which contains lots of broad, flat
colors, and is not a photograph.
A JPEG high-quality photograph can
contain millions of colors.
Make an image map





An image map defines certain areas of an
image as hot spots, which contain links to
other pages or sites.
Use layers for the hot spots and their URL
links.
You can make hotspots any shape you wish,
and they can be invisible.
When you move over the image map, tips
and links can pop up as a surprise.
"Save Optimized As..." from the file menu.
Types of Web Backgrounds






Background graphics
Left-edge graphics
Top-edge graphics
Giant image graphic
A textured background
A tiled background
Background Graphics

Web backgrounds can be colors or
images:





Black, white, or a color.
Plain colors or patterns.
A texture can be added with a filter.
A GIF or JPEG graphic that repeats (tiles)
to fill the screen.
A giant image.
Left-Edge Graphic





Left-edge graphics are popular backgrounds
because they load quickly.
They ornament a page and add color.
Left-edge graphics help to organize the page.
A Left-edge graphic is a long, skinny graphic,
which creates a bar or stripe down the edge
of the web page.
The graphic repeats, to conserve load time.
Making a Left-edge Graphic






Open a new image file about 1000 pixels
wide by 50 pixels high.
Select the first couple of inches of the file.
Fill with a browser-safe color.
Select the rest of the image area, and choose
"inverse“ from the select menu.
Fill this new area with black, white, or
another color.
Add a small stripe of accent color between
the two color strips.
Finish the Left-edge Graphic






Crop away most of the image height
(because it will repeat itself).
Leave it 1000 pixels wide by 10 pixels high.
The file size is now 250 bytes (.25K).
Export the image as a GIF file.
Place it on the web page as a background.
Add a table to organize information.
Turn off the borders, so that the table is
invisible.
Make a Top-edge Graphic




Top-edge graphics work best on pages that
have very little or no scrolling.
Top-edge graphics repeat, so they can load
quickly.
Follow the directions for a left-edge graphic,
but make it tall and skinny.
Make this graphic file taller than the scrollable
content area, so it will not repeat too soon
and show the top color again.
Giant-image backgrounds





Select an image to use as a giant
background.
Decrease the number of colors in your image.
Save the image as a low resolution GIF file to
preserve load time.
Place the new GIF onto your web page as a
giant background image.
Select a contrasting color for your text, so it
can be easily read, over the image.
Make a Textured Background




In Photoshop, create a new file 100 pixels x
100 pixels, with a resolution of 72 pixels per
inch.
Fill the window with a browser-safe
foreground color.
Open the filter menu. Select noise/add
noise/pick a setting from the dialog box.
Re-open the filter menu/choose blur/gaussian
blur/use a low setting, between .3 and .5
Finish the
Textured Background






Open the select menu. Choose all to select
the entire image area.
To tile the pattern, open the edit menu/define
pattern.
Create a new file about 300x300 pixels.
Open the edit menu/ fill/from the contents
menu of the dialog box/ pattern/100%
opacity(less, for a lighter version)/ok.
Export the original texture file as a GIF89a.
Place the image as a background on your
web page.
Make a Tiled Background






Use the Adobe ImageReady tile maker filter.
Select the image that you desire.
Open the filter menu/other/tile maker.
In the tile maker window, select blend
edges/enter a value in the width field.
Check the box "Resize Tile to Fill Image".
Use the image as a background on your web
page.
Animated GIF

Suggested software for creating GIF
animations:


ImageReady (comes with Photoshop)
Macromedia Fireworks
Make an Animated GIF





Make separate graphic files, or frames of your
image. Recreate only the moving parts, to
decrease download time
Change the parts to show movement.
Number each part as you save it.
Place the different parts on separate layers,
and make them invisible until they show up
on the correct frame within the sequence.
Place a solid color background on the bottom
layer.
Save your Animated GIF






As you Save, the software will make one
compact GIF file.
Select the number of times you want the
animation to loop. (not forever, please!)
Set the speed of the animation, the delay.
Depending upon your software, save as a GIF
file, or export all of the layers as one GIF89a
file, or "Export Optimized“.
Place the GIF file onto your website.
Preview to see the movement.
Graphics Software Links









www.adobe.com
www.macromedia.com
www.apple.com/software/
www.microsoft.com
www.arcsoft.com/en
www.imsisoft.com
www.eyewire.com
www.shareware.com
www.download.com
Helpful Photo Sites











www.shareware.com
www.download.com
www.walmart.com
www.eckerd.com
www.filmworks.com
www.kodak.PhotoNet.com
www.shutterfly.com
www.aol.com
"You've Got Pictures"
www.Yahoo.com
Yahoo! Photos
www.activeshare.com Adobe
www.dotphoto.com online photo album