TUTORIAL MAIN PAGE | ATR HOME |

Editing Images and Preparing them for use in other Applications

Before you include an image in a print document, a multimedia presentation or a webpage you will want to work with that image to format it in a way that works best with where you plan to use it. You'll be doing a balancing act between getting the highest quality image possible and a file size that is appropriate for the medium that you'll be using to display the image. As you prepare images for use on the web (or in multimedia presentations) you'll want to aim for the smallest file size possible while not compromising too much of the quality of the image. Use the information below to see how this might be done.

This is an introduction to the four steps we'll be using for Image Editing. For a fuller description of the different processes involved in each step we'll be using the following additional resources:

arrowImage Editing: Digital Images in the Classroom - Explanations and examples for Digital Input, Enhancing Images, Digital Output, and References

Step 1: Choosing your image editing software

When you're ready to begin preparing your images for either the web or for multimedia presentations you will probably want to invest in image editing software.

Software applications - There are a variety of software based image editors available. Ranging from freeware to commercial products you will be able to find a product that you can use. The list on the right includes some of the most popular programs.

 


Step 2: Get your images

There are several ways that you can get your images.

  • Scan images that you've drawn or that your students have drawn. You can also scan photographs.
  • Create your own images
  • Download free from the Internet
  • Use CDs with royalty free images or CDs of photos that you've taken
  • Import images from digital cameras or video cameras
  • Take screenshots

After deciding where and how you'll get your images, your next step is to bring them into your image editing software. The links to the right point to tutorials to help with this.

 

 

Knowing how you plan to use your images will help you make decisions during the process of acquiring your images.

Images for the web: Resolution should be set at 72 ppi.
Images for print: Resolution should be above 150 ppi.


Step 3: Edit your images

Make a copy of your image and save the original in a folder called source. Save it using your image editing default format. This way you won't accidentally destroy your original image.

Using your editing software, make whatever changes you want to make. The options available to you will depend on your software. With most image editing software you can add text, create layers, modify colors, add effects (like drop shadows) and transform your images (scale, rotate, etc). Example 3.0 on the right is an example of an image created in Photoshop.

  1. A digital camera was used to take pictures of student art work.
  2. Pictures were brought into Photoshop and arranged in layers.
  3. A textured background layer and border were added.
  4. A title (with effects - glow and drop shadow) was added.
  5. The image was resized and optimized for the web to be a 15K file size.
 

wild things

Figure 3.0 - Image created with Photoshop

When you're editing your images, keep in mind how you will be using them. If you are putting them on a webpage, consider whether or not you want them to be transparent (will look like they're floating on the page). You can save .gif files as transparent images, but jpgs are more difficult to make transparent. Sometimes it helps to create the image on a background color that's the same color as the background where you'll be using the image.


Step 4: Export your images

Once you've created an image that you're happy with, you'll want to be sure that it is the correct height and width for using in your application and that you've saved it in the appropriate format.

In all image editing applications you should be able to change the size of your image by using the text menu at the top of the screen. Look for a command that refers to Image Size. This is where you can set the height and width and the resolution of your image. (Example 4.0)

 

setting image size

Figure 4.0 -Image size in Photoshop


Once you locate where to change the image size, a new window will open up and you can check resolution and height and width of your image.

You can usually set height and width by pixels or by inches. If you keep the Constrain Proportions checked, your image will always keep the same proportions as you change the size. (Example 4.1)

If you're designing for the web, you will want the resolution to be set at 72 ppi. (Example 4.1)

 

setting image size part 2

Figure 4.1 -Changing image size in Photoshop


When you're ready to export this, you'll do 2 saves.

  • First save the original document in the default format of the application you're working in so that you can go back in and make edits at a later date. For our example we saved it as a Photoshop document (.psd)

  • Then save your image based on how you plan to use it. In the example to the right, we chose to Save for Web. Sometimes you'll have this option and other times you might find it under the Export command. Check out your editing software to see what is available to you.

  • If you were working with layers, it's a good idea to flatten your image before you export it or save it for the web.

In our example we are using Photoshop 6.0 and it has an option to Save for Web so that is the option that we chose. (Example 4.2)

 

save for web image 1

Figure 4.2 -Saving for the web in Photoshop


When you choose Save for Web, a new window will open up and you can view different options for how you want to compress your file.

  • Use the panel on the right to experiment with different settings.
  • You can change to different settings i.e. JPEG, or GIF, (see red circle to the far right) and you can choose the level of compression (jpg) or the number of colors to choose from (gif)
  • You can also see how big the file is (red circle to the left) and keep making adjustments until you get the quality and size you want. (Example 4.3)
 

save for web image 2

Figure 4.3 -Changing settings in Photoshop


When you get the size and quality that you're looking for you can press OK and it will open a new dialog window that prompts you to give it a name and save it. (Example 4.4).

Use the L.E.S.S. format and save it to a location where you will either use it or be able to find it when you're ready to use it.

 

save for web image 3

Figure 4.4 -Saving an image.

© 2003-2004 State of Hawaii Department of Education - Advanced Technology Research Branch



© 2005 State of Hawaii Department of Education - Advanced Technology Research Branch - Questions regarding this web site can be emailed to Joanna Dunn. All inquiries will be routed to the appropriate source. Site last updated: 11/15/05 .