Gathering and preparing your images

Acquire or create at least 3 images to illustrate your 3-step tutorial
There are many sources for imagery. Choose whichever works best for your situation.

Scan your original photographs or drawings
You can use photographs you have taken or original drawings you have created. Make an appointment to use the scanner in the TechnoLounge to 'digitize' your images. Once scanned, these digital files can be transferred to your folder.

If you have a scanner at home you can email the files to yourself or bring them to school on a Zip cartridge or floppy disk.


Grab an image from your screen
From the keyboard, hold the Shift and Command keys down while typing 4. The cursor will change to a crosshair. Drag a marquee around the image displayed on your screen that you want to capture. A 'snapshot' will be taken and appear as Picture 1.


Schedule a digital photo-session
Arrange to have digital photos taken during class or by appointment.
If you have a digital camera of your own, you can email the sized JPEG images to yourself so you can retreive them at school. You can also transport them by floppy or Zip disk.


Search the Internet for "copyright-free images"
The Internet has a wealth of imagery. is a good place to start. Try your search in: Images

You must give proper credit to the original artists and create a link to the original work on the web if you appropriate someone else's artwork or photographs.
Try sending the site/artist an email explaining the school project and asking for permission to use their image. Most web artists will grant you the right to use their work for such a purpose and appreciate the exposure for their work.
If you cannot contact the artist, take note of the website address so you can add it to your page as a link to the original work.

Preparing your acquired images in Photoshop
Create a new folder [lastnamexx] in your personal folder. All images and HTML documents will be saved in the same folder.

Open Photoshop. It is located in the Applications folder.

From the File menu, choose Open.. and navigate to find your image files.

Double-click Photoshop's Crop tool to reveal the Crop Options palette.
The Crop tool shares its place on the Tool palette with the square, circular, row, and column selection marquees. If it is not visible, click the marquee tool to reveal the Crop tool tucked away beneath.

Check the Fixed Target Size box

Set the Width to 240 pixels

Set the Height to 180 pixels

Set the Resolution to 72 pixels per inch


Drag the Crop tool cursor across your image diagonally.

The marquee becomes an adjustable, movable crop box that maintains the proportions. Frame the portion of the image you want to use, double-click inside the box (or hit Return on the keyboard) to crop.

When you are satisfied with your cropped image, Choose Save for Web… from the File menu.

Choose the 2Up tab to do a side by side comparison between your Original and an Optimized version. Experiment with the settings to see how to best Optimize your image.
If your image is a photograph, JPEG is your best choice of file type. GIF works best on flat color graphics.
The type of Image, file size and estimated time of download are shown under each image. Try to adjust the Quality slider (for JPEGs) or the Number of Colors (for GIFs) to find a balance between file size and maintaining the image quality of the original.

When you're satisfied with the look of your image, the OK button will allow you to name your image and save it to your folder.