Skip to Content

Preparing Images

How many images do you need for your digital story? This depends on the length of the script and the visual impression you want to create. On the Sample Stories page, Kristen Lindblom’s story changes images about every 2 seconds. Watch this story and get a sense of this timing to help you make a decision about your own.

For tips on taking quality digital photographs, see the Resources page of this section.

Image Editing Applications

You can use any image editing software to prepare your images. By far the "standard" software to use for image editing is Adobe Photoshop. Photoshop is available to Northeastern students and staff on campus through NUnet. There are also other less expensive (possibly free) options, including:

The following material refers to menus and items in Adobe Photoshop, however many of the same tools should be available in any image edit application you choose.

Correcting Color and Contrast

There are a number of ways you might wish to correct or enhance your image before you make the final "save" for the web. Following is a list of the most common image adjustment tasks. Remember, when you are editing a digital image, if you don't like something you can always cancel it, undo it, or just close the file without saving the changes and start again.

Brightness and Contrast

In the "Image" menu, under "Adjustments" you'll see "Brightness/Contrast." Selecting this option will pop-up a window with sliders that allow you to adjust the tonal range of your image by making the image brighter or darker, and have more or less contrast (between existing colors). Click the "Preview" check box to see what happens to the image as you slide the sliders around. If you don't like the results, hit "Cancel" and the changes will not be applied to the image. This is not the most accurate method for adjusting the tonal quality of your image, but it is one of the simplest. Using the "Levels" or "Curves" option under "Adjustments" allows more control (but does take some getting used to).

AutoLevels

Select "Image," "Adjustments," "Auto Levels" to automatically optimize the brightness and contrast of your image. This is the quickest way to adjust these qualities of your image, but offers the least control.

Color Balance

Again under the "Image" menu, under "Adjustments" you'll find "Color Balance." It allows you to change the color in your file, based on how photography, RGB, and your computer monitor, really work. This means that if your photo is red you'll need to add some cyan to correct for it; But don't fret if this sounds complicated... the sliders make it easy! Just remember if you want to do this to a section of the image (perhaps for red eye) you need to select the area first with the marquee tool [which is the tool on the top left-hand side of the tool box]. Another typical use is to remove "green" from an image taken indoors. The sliders will help you correct for this too, by adding magenta. This "green" usually shows up in the "white" part, or "highlights," of an image, so you might also wish to experiment with selecting the radio buttons for shadows, mid-tones and highlights as well, to better adjust the areas with the odd colors.

AutoColor

You may also see the "AutoColor" option in the adjust menu. It works in a similar fashion to "AutoLevels" (to automatically adjust your image) except that it adjusts the color (or hue) of your image instead of tonal values.

Variations

Variations is a more precise way to adjust the color balance in your image than using the "Color Balance" option. This function allows you to specify (via radio buttons for shadows, mid-tones, and highlights) which "part" of your image's color to affect. What's really nice about this option is that it not only gives you the shadows, mid-tones and highlights option, it also allows you to adjust how much correction is applied to the image via the slider marked with "fine" and "course".

Resizing

There are typically two reasons you resize and image for the web.

  1. To make it physically smaller (and get rid of any information you don't need), so it will take up less room on the screen/page, and
  2. To make its file size smaller, so it takes up less room on the computer and (more importantly) downloads more quickly over the internet.

To find out if an image is "too large," you can go to the "Image" menu and selecting the "Image Size" option. The "Image Size" popup window gives you all the information you need about the image. Actually, it gives us more than we need. We only need to focus on the information in the "Pixel Dimension" section.

With respect to download speed, if your image is less than 100K (listed right after the words "Pixel Dimension") it'll be alright because you'll be further compressing it when you save it for the Web as a gif or a jpeg. Remember though, that 100K is just a general rule of thumb, not a hard and fast rule, and you should always try and make things as small as possible -- and given that these images are a specific size, even if they are a bit bigger than 100K thats ok too. Also if your image "Pixel Dimensions" are followed by a number with an "M" after it, that means, at least for the web, that it's more than likely WAY too big. 1 M (or MB, or megabyte) equals 1000 K (or KB, or kilobyte).

With respect to digital story telling, you should size your images so they fit within the frame allotted for images, which will vary from tool to tool and project to project.

So keeping our two reasons/goals in mind here's what we're going to do:

And here's how:

Cropping:

  1. Select the cropping tool in the palette. It's the third tool down on the left hand side.
  2. Position the cursor on your image in the upper left quadrant in a spot where you think you'd like the "new" upper left corner to be (remember we're cropping so we'll be trimming the outside edges away).
  3. Click (and hold the mouse button down) and drag the cursor to a spot where you think you'd like the "new" lower right corner to be and then release the mouse button.
  4. You will now see that an area is selected, and that the "outer" area gets grayed out, while the inner area is still of a normal opacity. This inner area is what your image will look like if you cropped right now, the outer gray area is what will get trimmed away. However you will also notice anchor points at the corners of this selection area, and in the middle of each side. These are points you can click on and drag around to redefine the cropping area.
  5. Reposition the anchor points/cropping area if you need to, but before we cropped lets take a look in the lower left of the image window. They should be a few numbers preceded by the word "Doc" - if you don't see "Doc" click on the triangle for the wing-menu and set the option to "Document Sizes" so this area will tell you how big the file (this number might be different from the one in the Image Size window, it represents something slightly different, but they should be close). And now that we've seen it, just keep a mental note until after the next step.
  6. Place your cursor on the inside of the selected/cropping area and double click.
  7. You image is now cropped. Again take a look in the lower left corner at the "Doc" number... is should be smaller now, but probably still not small enough ( >100K ). So if you can, go ahead and crop more out, but being that most likely you already cropped out as much as you wanted, we're going to have to just resize the entire image.

Resizing:

  1. With the image still open access the "Image Size" option that is in the "Image menu" again.
  2. We already know that this tells you the width and height of your image, along with it's resolution and the file size as well. If you stop and think about all those things, they're really almost the same thing, or at least they're all related... but if you don't want to think about them, all you have to know is that you should, and can change the information in the "Pixel Dimensions" area.
  3. If they don't already say so make the pop-down menus to the right of the width and height numbers show "Pixels" - this will let us know we're working with the right "units." Remember the target resolution for the web is 72 pixels per inch (so 72 pixel make up an inch). It's actually 96 for a PC so images are always a little smaller on a PC, but it's a web convention, and they're are very few of those so let's just be thankful [grin].
  4. Now that it says Pixels, just type in a value you think your image should be. Again, for this tool, no larger than 630 x 300 pixels. Once you type that in, you should see two things. First the height should adjust too (this is because "Constrain proportions" is selected at the bottom of the window, if it's not click cancel and start again with it selected) and then the number representing the files size (after the words "Pixel Dimensions" at the top of the window) will change also. This tells you the "new" file size (in kilobytes).
  5. If it's ok, click OK; if it's not OK, change the size. Remember too, the size here, will be further compressed when we save it as a jpeg, so don't worry if it's not super small, but try and keep it under 100K or so...

Now you're ready to move on to one of the last two sections to save this file as a jpg.

Saving as a JPG

  1. This is the easy part! Once your image has been, adjusted, cropped, and resized too (to be sure it's pretty and the right size) you can just go under the "File" menu and select the "Save For Web" option - you could choose "Save" or "Save As" but this will give you the right options for making web graphics and images.
  2. Once you are in the "Save for Web" window you will see controls on the right hand-side, and the image on the left. But first, make sure that you are looking at the "Optimized" version of the file. To do this, look to the top-left side of the window and click on the tab that says "Optimized."
  3. Then under the "Settings" make the first pop-up (for file format) say JPEG.
  4. Then set the next pop-up (for quality) to any of the setting and see what it makes the image look like. Or, if you're feeling lucky, use the slider for quality (where the number is) to adjust your own setting. Usually I find a "medium" setting works just fine, or a number between 30 and 60.
  5. The next checkbox allows you to make the file a "Progressive" JPEG. This works much like an interlaced .gif file would - meaning that it would set the file up to load a rough copy onto the screen and refine it as the rest of the file loads over the web. Totally not necessary, and in some cases it can mess things up... so just don't check it.
  6. You see that you also have an option to blur the file here. Blurring a photograph sometimes gives you better compression with a .jpg file. You don't have to, but if you do a little the files size might decrease, so give it a shot!
  7. The other options are not things that I use (which doesn't mean they're not useful, just that you don't need them in most cases!). So click "OK."
  8. Click "save" and give the file a name and you're all set! This is saving a copy - not your original file, so when you're done you will be dropped back into Photoshop where you can choose to save the changes you made to your original file.