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 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!