Noel's Digital Image CD Primer

Got a digital camera and a CD writer? Here's a great way to share digital images.

[A CD of Photos; Click to See a Larger Image]

What Are We Talking About Here?

Some time ago, around the time I got my first digital camera, I began to realize photos can make wonderful gifts. 8 by 10 enlargements are, of course, simple to create with an inkjet printer, and nice little frames are fairly inexpensive.

However, prints are "old tech", and as I found myself attending a number of birthday parties with my wife and young son, I began to think it would be nice to give the parents, who were kind enough to invite us after all, a CD full of party photos. They almost never seem to find the time to shoot many pictures themselves; I would have something fun to do during the kids' party (i.e., play with my camera); photos do make great, personalized gifts; CD writers are fairly cheap; and CD-R blanks cost less than a dollar yet are supposed to retain data for 50 to 100 years! Last but not least, I make sure and get a few good pictures of my own son, which makes my wife happy. A win/win/win/win/win/win situation! I like those kinds.

I've developed a technique for putting photos on a CD that works like this:

The recipient's web browser (e.g., Internet Explorer) auto-runs upon inserting the CD.

A title and brief message top the page, followed by a set of thumbnail images.

Each thumbnail image is a link to a larger image.

There is an option to see several different sizes of larger images.

Two of the best pictures become the front and back covers for the CD jewel case.

A contact sheet (little printed thumbnails) makes the inside cover of the jewel case.

I include a freeware viewer tool (Irfan View) for the more advanced computer users.

I even add audio tracks of synthesized music (another of my hobbies) to the CD.

This takes a little time and effort to do right, and you might even learn some HTML, but people are generally floored when they receive one of these CDs - it's worth it! No doubt, some time after the party ends and the confetti is cleaned up, they realize that in the heat of the moment they neglected to take pictures, and here, out of the blue, someone comes along and hands them a set of priceless memories!

Step by Step Guide For Making A CD of Photos

So you've taken a bunch of pictures with your handy dandy digital camera, and you're ready to get down and dirty with your computer... Let's make it happen!

1. Load and Clean Up Your Photos

In this step we'll load the images from the camera, create a working directory structure, and make all the images look good.

Download: First, of course, if you have not already done so you have to download your images from your digital camera into your computer.

Orient Portrait Shots and Set Dates: I use a shareware tool called Picture Information Extractor (PIE) on my original images to perform lossless JPEG rotations of portrait mode shots (i.e., those with the long side up and down) and to set the times/dates of the files to the time that the picture was taken (vs. when it was loaded to the PC). After I do this, I also set the file attributes to "read-only" to help keep me from accidentally deleting my originals.

Create a Working Directory Structure: When I build a CD I create a structure of directories on my hard drive that exactly matches what will be written to the data portion of the CD. We will copy and work on the files needed for the CD here. For the purposes of this discussion I will call the top directory of that structure CDRoot. Note that the word "directory" is synonymous with "folder" here. Here are the directories you will need (note that all subdirectories are 8 characters or less in length; this is important, in that we want to make an ISO 9660 standard CD-R):

CDRoot CDRoot\FullSize CDRoot\HalfSize CDRoot\I_View CDRoot\Thumbnls

Make a Working Copy of the Images: I always keep my original images untouched (other than the rotations and redating), so we'll need to copy all of the party images into the CDRoot\FullSize directory, where we can delete the bad ones or retouch them as needed.

Cull Out the Bad Shots: Face it, you shoot 'em, I shoot 'em. I use a freeware viewer called Irfan View and do a quick viewing of each image in the CDRoot\FullSize directory to make sure the subject looks good, it's focused well enough, and the exposure is close enough that the image can be made to look pleasing. Usually, I delete a few images in this step. Do NOT (yet) make any other (e.g., exposure) corrections.

Get a Listing of Filenames / Dates: From a DOS prompt, do a directory command to capture the file names and dates into a file. We'll use this later to create the HTML links to the image files and alternate text. It's important that this step follow the one above and precede the one below, as the retouching operations change the file dates. Set your default directory to the CDRoot directory and use this command:

DIR FullSize\*.JPG >FileList.txt

Correct Exposure / Sharpen / Retouch: Depending on how much time you have (or want to take) and how you feel about your images, do exposure corrections, sharpening, noise reduction, and any other retouching you like. I use a variety of tools to do this: Adobe Photoshop, Irfan View, Qimage, Picture Information Extractor, and an old version (1.D2/32) of LView Pro, among others. Once, I even took the time (with Photoshop) to make a boy's mom look thinner in all the shots. She was thrilled! :)

2. Resize Your Photos for Presentation

I include several sets of photos on the CD: Thumbnails, small ones, and large ones (pixel-wise) to accomodate people with small displays (e.g., 640 x 480 though it's hard to believe anyone really uses that resolution any more) and those with larger (I use 1280 x 1024 on a 21" monitor myself). The large photo files will end up in the CDRoot\FullSize, the smaller in CDRoot\HalfSize, and the tiny thumbnail images in CDRoot\Thumbnls.

Note that the above was natural when I shot photos with my D-500L - Full sized images were 1024 x 768 pixels and half-sized images were 512 x 384. With the recent introduction of higher resolution digital cameras, such as my 1712 x 1368 pixel C-2500L, I have begun to wonder whether to include the full-sized images right out of the camera and create a third resolution (e.g. quarter-sized). After all, in the year 2030 someone might want to load up and print an old photo, and they will appreciate all the resolution they can get. The methods listed here can be extended to include a third directory of quarter-sized photos (CDRoot\QartSize?) or whatever sizes you prefer.

Make Copies of the Images for Downsizing: Up until now we've been working on the full-sized images in the CDRoot\FullSize directory. Copy all of the image files into both the CDRoot\HalfSize and the CDRoot\Thumbnls directories.

Resample Images to Half Size: Using Irfan View's Batch Conversion feature, resize all the images in the CDRoot\HalfSize directory to half their original size. With this function you can set the resultant size as a percentage of original. I choose "Preserve aspect ratio", "Use Resample function (better quality)", and add some digital sharpening.

Resample Images to Thumbnail Size: Using Irfan View's Batch Conversion feature, resize all the images in the CDRoot\Thumbnls directory to where the results will be about 128 pixels wide. For 1024 pixel width images the size setting to accomplish this would be 12.5% (one eighth original size).

3. Create the HTML Pages

Now for the fun part (at least to a software engineer like me), and where you get to learn a little about the nitty gritty of HTML (HyperText Markup Language; the stuff that drives web pages). The main page, _Run_Me_.htm, will go in the root of the CD, It is named _Run_Me_.htm so it will be obvious if someone goes looking on the CD what file to run to get things going. Here's an overview of what it will contain:

Opening/setup HTML code to set the page color, background, and title.
The banner and text you'd like to display at the top of the page.
A note describing how to see smaller or larger images.
Code that shows the thumbnail images as links to the full-sized images.
Some descriptive text about whatever else you put on the CD.
A short attribution stating who you are (you don't want to remain anonymous, do you?)
Closing HTML code.

Create the Main Page: _Run_Me_.htm: Using a text editor (e.g. Notepad), open a new file called _Run_Me_.htm in CDRoot and copy the following template HTML code (in blue, below) into it (note that you can download a sample of this file containing information for an actual CD I made by clicking here - Sample ZIP File):

<HTML> <TITLE>Enter Occasion Here; This Comes Out on the Top Bar of the Browser Window</TITLE> <BODY BGCOLOR="#F6EBDF" BACKGROUND="Emboss.jpg"> <CENTER><H1> Enter Occasion Here; This Comes Out in Big Letters at the Top of the Page </H1></CENTER> <H2> Write a short paragraph describing the occasion. Include the date of the affair and whatever else you'd like to say. This comes out in smaller letters under the occasion title. </H2> Click on a thumbnail image here to see a larger image. If you'd like to save the image to another location, such as your hard disk, right click on the image. Use your browser's [Back] button to return here to the thumbnails. These are links to full-sized high resolution images (1024 x 768 pixels). Click <A HREF="HalfSize.htm">Here</A> if the images are too large for your display and you'd like to see smaller, half-sized images (512 x 384). <A HREF="FullSize\NameOfFirstImage.jpg"> <IMG ALT="[NameOfFirstImage.jpg - mm/dd/yy hh:mm pm; Click to See a Larger Image]" BORDER=5 SRC="Thumbnls\NameOfFirstImage.jpg"></IMG></A> <A HREF="FullSize\NameOfSecondImage.jpg"> <IMG ALT="[NameOfSecondImage.jpg - mm/dd/yy hh:mm pm; Click to See a Larger Image]" BORDER=5 SRC="Thumbnls\NameOfSecondImage.jpg"></IMG></A> <A HREF="FullSize\NameOfThirdImage.jpg"> <IMG ALT="[NameOfThirdImage.jpg - mm/dd/yy hh:mm pm; Click to See a Larger Image]" BORDER=5 SRC="Thumbnls\NameOfThirdImage.jpg"></IMG></A> Include as many of the above sets of 3 lines as needed to link to all images. Delete this line. <HR> The freeware tool, Irfan View (I_VIEW32.EXE) in the \I_View subdirectory on this CD can be used to view a slide show and to view, adjust, resize, and print images. <HR> <CENTER> Photos taken by YourNameHere with an YourCameraHere Digital Camera and processed with YourToolsHere. Audio tracks on this CD are from NameTheSourceHere and can be played on your stereo audio CD player. </CENTER> </BODY> </HTML>

Change the Appropriate Parts of the Above to Personalize Your CD: Using your text editor, change the parts shown above in bold italics to personalize the CD for your particular use. See the next step for filling in the actual image file links (NameOfFirstFile, etc.).

Set up the Image Links: Each image file name (and file date/time) listed in the file CDRoot\FileList.txt you created in step 1 needs to appear in HTML language, replacing the NameOfFirstImage.jpg, NameOfSecondImage.jpg, etc. entries above. If you are adept with a powerful text editor that handles regular expressions, the job can be easy. Otherwise, you'll have to copy the boilerplate above a bunch of times and transcribe the information manually. If you've gotten this far, you're not allergic to a little work. :-)

Test Your Work: At this point, you should be able to double click your _Run_Me_.htm file and see your CD page take shape in your browser. Click on each thumbnail. Mistakes you may have made (such as transcribing a file name incorrectly) should be obvious.

Create the Half-Sized Image Page: HalfSize.htm: Once you have created and tested the _Run_Me_.htm you created above, copy it to HalfSize.htm, also in CDRoot. Edit it to make it into a nearly identical page, but which points to the half-sized images as follows.

Change the third line to:

<BODY BGCOLOR="#DCF5D8" BACKGROUND="EmbossG.jpg">

Change every occurrence of \FullSize to \HalfSize.

Change the paragraph that starts with "These are links" to read as follows:

These are links to half-sized images (512 x 384 pixels). Click <A HREF="_Run_Me_.htm">Here</A> if you'd like to see larger, full-sized high resolution images (1024 x 768).

Test Your Work: At this point, you should be able to double click the "Click here if the images are too large" link in _Run_Me_.htm and see your half-size CD page, HalfSize.htm. It should look the same, but for a green background and the other changes above. Click on each thumbnail and see that you display the proper smaller image. Contrawise, you should be able to get back to the yellow-background _Run_Me_.htm page through the "Click here if you'd like to see larger..." link.

[Sample Front Cover Image; Click to See a Larger Image]

4. Create the Cover and Inside Images for the CD Jewel Case

Somewhere in all the images you've taken are a couple that express the content of your CD. I usually choose a photo of the birthday child blowing out the candles (I always make a point to shoot one of those) and at least one more that shows him/her having fun.

I use Adobe Photoshop to edit images. It is perhaps the top-of-the-line tool for the job, but many others will do nicely for what we need here.

Edit and Print the Front Cover Photo: Choose your shot, then resize and crop it to be a square image 4.75 (4 and 3/4) inches on a side. This is the size of the cover insert in a CD jewel case. Sometimes I put text over the image, but try to be conservative; a picture is worth a thousand words. Print your image and cut it out with a pair of scissors. Save this file as CDRoot\CDCover.jpg.

Edit and Print the Back Cover Photo: Again, choose a shot. Size and crop this shot to 5.375 (5 and 3/8) wide by 4.75 inches high, then expand it an additional 0.25 (1/4) inch on both the left and right sides to leave vertical white bars. This is where the text that appears at the thin edges of the CD will go. Your overall image will be 5.875 (5 and 7/8) inches wide by 4.75 inches high. If your image editor can do this, type in the title of the CD and date in lettering rotated 90 degrees clockwise (i.e., reading from top to bottom). Duplicate the lettering in both vertical white end bars. If you can't do this with the computer don't worry; just leave it white and use a pen! Print it and cut it out. Save this file as CDRoot\CDBack.jpg.

Create a Contact Sheet: Last, but not least, we'd like to create a small set of thumbnail images and some simple instructions for the inside cover of the jewel case. There are several programs that can make a contact sheet; one is LView Pro and another Irfan View. I use LView's "Contact Sheet" function, configured to generate a 1280 x 1280 pixel image, and I set the size of the thumbnails so that they occupy only the top 3/4 of the image, leaving some room for text below. I then bring this image into Photoshop, where I size it at 4.75" x 4.75" (same as the front outside cover), and add the text "If This CD Doesn't Run on Insertion, to View These Pictures", "Execute the File _Run_Me_.htm", and "Note: This CD also plays in your audio player!". Print it and cut it out. Save this file as CDRoot\CDCont.jpg.

5. Make the CD AutoRun When Inserted Into a Windows System

Now we get to the tricky part. The way Windows works, the existence of a specially-named file, AutoRun.INF, in the root directory of the CD will cause the system to perform the actions you specify inside that file on insertion of the CD into the computer. You'd think it would be as easy as simply specifying the web page name _Run_Me_.htm on the Run= line, but alas, it is not so. It turns out Windows will only run an executable program. The good news is that a good program for starting this web page is available. It's called ShellRun, which is from a small freeware package (and which I've included in the CD Sample Zip File).

Create AutoRun.INF: In the CDRoot directory, create a text file named AutoRun.INF with the following contents:

[AutoRun] open=ShellRun _Run_Me_.htm Photo Page Loading icon=CD.ico

Get Support Files: Copy the following files from within the CD Sample Zip File I've provided (Click Here) into your CDRoot directory:

CD.ico Emboss.jpg EmbossG.jpg ShellRun.exe

6. Gather Up Whatever Else You Want to Put On the CD

Cover Images: Per the steps above, you have already placed the cover and contact sheet images, CDCover.jpg, CDCont.jpg, and CDBack.jpg into CDRoot.

A Viewer: I also include a copy of the freeware viewer Irfan View in CDRoot\I_View for those who might want to do more to their images than just view them with their browser. The only files I believe you really need from Irfan View's installation (at least at the time of this writing) are:

i_view32.exe i_view32.hlp i_view32.cnt

Audio Files: As one of my other hobbies is digital music synthesis, I usually include some audio tracks on the CD to make it more entertaining. The recipient can play the CD on their stereo equipment as well as view the photos on their computer. They can even listen to it on their PC if they start the CD Player application, though at the moment they cannot listen to the audio and view the photos at the same time. Perhaps in a future version of Windows...

7. Burn the CD

Here's where you fire up your favorite CD writer application and commit what you've done to disc. I use Roxio Easy CD Creator, myself.

Final Test: When you think you're all done, it doesn't hurt to test out your new pages one last time. If you commit an error to a CD, it becomes what is known to the industry in technical terms as a "coaster" or a "frisbee". ;-)

CD Format: You can write your CD-R in pretty much any data format you want, but since you probably want it to be readable in the widest variety of computers and for a long, long time into the future, I recommend you use standard ISO 9660 format, which gives the widest compatibility for a data CD. Since I put both the photos and some audio tracks on the CD, I use CD-Extra format, which accomodates both audio and ISO 9660 data. Here's what Roxio has to say about the CD-Extra format:

A CD Extra CD is a multisession CD that contains both audio files (tracks, WAV, or MP3) and computer data. The first session contains the audio files, so a home or car stereo CD player can play them. The second session contains data intended for your computer's CD-ROM drive. Many music CDs are created as a CD Extra CD to provide music CD tracks and a music video all on the same CD.

Good Luck and Have Fun!

Date last updated: June 10, 2003

NCarboni@ProDigitalSoftware.com