Transcript So you want pictures on your web site

So you want pictures on
your web site ?
ECUSA Digital Media Services
Workshop
by
John Rollins, Cindy Meneghin
and Jan Paxton
Simple Overview
Put all of your pictures into one folder
Enhance and resize your pictures for web
quality
Make a web page (or pages) on which you
can display your pictures and put it into
the same directory as the photos
Put the pictures into the web page(s) with
suitable identification
FTP the pictures and the web pages to
their directory on the server
What’s this “one folder”??
Html links on web pages need
complete information
When all of the items for a web page
are in one folder, the links are easy
to make
If the items are not all in one folder,
the program makes local links which
will not work on the internet
Enhance
Crop photographs
Adjust lighting/color
De-speckle scanned photographs
Sharpen images – “unsharp mask” is
good
Discard photographs that are not of
adequate quality!
Resize
The general low resolution screen
width on the web is 600 pixels
Pictures larger than 300 pixels will
fill most of the screen
Uniform height for pictures on a
page is esthetically more pleasing
than assorted heights
More Resizing
Check the dimensions of your
original photograph
Resize in jumps of about 200 pixels
Use “unsharp mask” from the
“filters” menu between each stage of
resizing
Make a Web Page
Set up your web page with all of the
identification information for your site
Figure out a navigation system if you are
doing a whole set of picture pages
One or two small pictures can be placed
in a page of text using “align left/right”
More web pages…
A “photo-album” web page should not
have more than 6 pictures
Make a table with a cell for each picture
and an adjacent cell for a caption
With pictures 200-250 pixels wide, a
table with 6 rows and 3 columns works
well (narrow, empty middle column,
captions below)
And More Web Pages…
Use thumb-nail pictures with links
to larger photographs
Consider placing a photo album
folder on your site
Place the pictures in the album and
thumb-nails on text pages
Find a page you like and copy it!
Suitable Identification
When possible, the photographer
should be credited
Check spellings and titles when
identifying people in a photo
If you can’t identify the people, try
to identify the group
Avoid using photos of clearly
identifiable children
Make a Title Image
Open a new image – 300 pixels by
150 pixels works
Choose a background color or make
it transparent
Select the Text tool and click on
your image
Select a font and font color
Use “anti-alias”
Choose a justification
Type your text
Move the text to the correct place
on the image
Apply any effects – drop shadow,
etc.
Save as *.gif or *.jpg
FTP
Check to make sure all of your images
are in the same folder with your web
pages and that there are no “local” links
Make sure that there is a corresponding
directory structure on the server for your
web site
Check your web pages on-line to make
sure everything works
We’ve got trouble…
None of the “filters” in Photoshop
are available
You may need to increase the
number of colors for your image
The image may not be in “RGB”
mode
Use the “Colors” menu to make
those changes
Yes, We’ve Got Trouble…
My pictures won’t work in the html
editor
Make sure they are either *.gif or
*.jpg
Make sure that their file names are
no more than 8 characters, no
spaces
Trouble With a Capital T
When I check my web page, some of the
images are not there
Check the code of your web page to
make sure there are no local links to
images
Check to see that you got all of the
pictures uploaded when you ftp-ed
Check to see that the file name of the
image is the same as the path name in
the html
Allow Yourself Enough
Time!
It takes time to scan pictures and
put them on a disk
It takes more time to fuss with them
and enhance and resize
It takes even more time to design
the web pages on which they will go
Make sure your
supervisor knows!
Your department head has just
handed you the digital camera with
30. pictures from the great
conference….
You have a minimum of 5 hours of
work ahead of you before the web
pages will be ready.
This is fun, so
enjoy yourself!