Image Editing

Check your book for more details.

Image editing can be very simple or very involved. Whole classes are taught on the use of image editing software for the Web. We will start by looking at the simple basics of image editing that all images should follow. We will then look at various techniques for enhancing the quality and effect of an image. In this class, we will use Adobe Photoshop as our image editing tool. Microsoft PhotoEditor and Paint are included free in Windows operating systems but are considerably inferior to Photoshop. Photoshop is the best and most widely used image editing tool of the professionals. It is also quite expensive. It is cheaper if bought for educational use so if you have a friend with access to a college bookstore that might be the place to get it. If you are looking for less expensive image editing tools at home, I recommend Paint.net. This is a free item and can be downloaded at getpaint.net. There is also an online editor(no download needed) at picnik.com.
Image Editing Basics
We have already talked about placing and aligning images on your webpage. We have also covered choosing the correct image file type. This section of our curriculum will focus on trying to improve the quality of the image you use. As we discussed in the design layout section of this curriculum, use of images on a web page should be well thought out. Don't use images if they serve no purpose as they take increase your download time to your user. However, if you are going to use an image, make it of optimum value. These are basic tips they apply to all images:
  • Keep the original image on file. Do a Save As... to create a working copy. That way, if you screw up, all is not lost.
  • Choose the correct file type.
  • Remove extra pixels by cropping around the outside of the image if you can without compromising function. Do not reduce image size by the width/height attribute in your image tag. Notice that the cropped left image(9KB) serves the same purpose as the right image(15KB) with a quicker download time.
  • Set the resolution to 72 pixels per inch. Computer monitors generally to not have a higher resolution than that so you are wasting file size that can't be seen. Photoshop does it under Image...Image Size.
  • Certain images look better if you frame them with a border. Photoshop lets you get creative with this, but Paint allows you to put a wide colored border around images also. The image of PC below has a simple yellow border made using Paint.

Photoshop Techniques
To add more special effects and complex editing to your images you need a more powerful tool such as Adobe's Photoshop. Photoshop is such a powerful tool that whole classes are devoted to it. It also is a tool that allows the user to invent technique and create their own effects. There are also many plug-ins one can download to increase the power of Photoshop. In this lesson, we will focus on some of the basic tools you can use in Photoshop. If you wish to explore on your own, I would encourage you to try the links at the bottom of this table.

Basic Photoshop Techniques

For more tips on Photoshop techniques, visit these websites:

Index Basic Tags Links Design Layout Tables Image File Types Using Images Image Editing Lists Frames