© Copyright 2014
All Rights Reserved
You are here: Help Topics > Edit Website > Edit an existing template, site or page > How to use Add Image > Image Editing Tutorial
How to Create and Edit Images
How to Create Images
Creating images is the easiest aspect of getting an image ready to use on the web. Once the image has been made it needs to be converted so it can be used on your website.
Editing is a little more complicated and is described in more detail below. The creation of images can be accomplished through a variety of means. Cited below are several obvious and a few not-so-obvious ways to get pictures ready for editing.
- If you have a camera which takes regular film, take the pictures you need and when you're ready to have the film developed, check the area of the film deposit form which asks "PhotoDisk" or "JPEG images on disk." When you retrieve your film you will also receive a floppy disk with JPEG files of your pictures. These disks can be inserted into Macintosh or Windows machines and the files viewed onscreen.
- Because they are intended for screen viewing, the resolution of these JPEG images is at the 72 to 95 dots-per-inch required for web images.
- You will need to copy the images you want on your web site to the hard drive of your computer so you can more easily edit them later. You probably will also want to rename the files to something more meaningful than the "image1.jpg, image2.jpg" filenames that these disks typically use.
- Some of the photofinishers as well as Kodak in some locations also offer a service where JPEG copies of your pictures are sent to a special AOL location where you can view them. If this is more convenient for you, use this service.
- If you have a digital camera you're already familiar with taking digital images and copying them to your hard drive. When you take pictures with your digital camera and intend on them to be used on your website, set the camera resolution to it's lowest resolution rather than its highest, which is intended for printing on photo-quality print paper.
- If you have a digital camera, you probably are already experienced in transferring camera images to your computer hard drive. The only trick to keep in mind when using digital cameras for photographing people, scenes or items for the web, is to use the lowest camera resolution. You will be able to store more photos in the camera and the resolution of the pictures you take will be pretty close to ideal for use on the web.
- If you already have pictures but need them converted to a digital format, you should use a scanner. Scanners are common enough that you may have a colleague or friend with one, if so, arrange to use it. If you don't know someone with a scanner, Kinko's and other office supply or copy stores can show you how to use their scanner or scan the pictures for you.
- In either case, when you're ready to have the picture scanned, there are some settings on the scanning software which need to be adjusted for the picture to be properly scanned for web use. The resolution setting should be set to somewhere between 72 and 95 dots per inch (dpi).
- If you're having a photograph of people or other scenes with a subtle blend of colors, have the scan saved as a JPG file (for JPEG).
- If you're scanning a graphic drawing such as a cartoon or the schematic to something, have the scan saved as a GIF file.
- JPG saves color information more faithfully than the GIF format. The GIF format, though, is often smaller than its JPG counterpart and will be a faster image to download to browsers as a result.
- Once you have the images scanned and saved in the appropriate format, you can get them to your computer from either the office supply store or a colleagues in several ways. You can copy them to a floppy or Zip disk depending on what is available on both computers or you can attach them to an email and send them to your email address and retrieve them that way.
How to Edit Images and Pictures
Image editing is an entire occupation in its own right. The web is a very visually demanding medium which means you will need to know some basics about image editing.
The software which comes on a PhotoDisk will allow you to view the JPEG images and rotate and crop them. That may be all that is necessary to get them ready for use on your website. If, however, you want to resize, add text or change colors, or any of a dozen other modifications, you will need something with more features than the JPEG viewer which comes from Kodak.
There is almost a bewildering array of software to create, modify or otherwise manipulate images (or bit maps, as they are called in image-editing lingo). Listed below are a few of the more obvious choices.
Experiment with some of the free demo versions which many of the software makers offer. Be wary, though, some of the more expensive programs can run into the dozen megabytes to download even the demo. At the other end are the shareware progrrams. They download fast, are really inexpensive to own, have great support and run extremely fast even on slow machines.
Choosing the Imaging Editing Software
Image Creation and Editing Software
- There are several commercial programs for image editing available for the Macintosh and Windows computers. The most talked-about of these is Adobe Photoshop. However, at nearly $700 for the full Windows or Macintosh version, Photoshop is clearly not for every one. Cited below are several very good and effective tools which provide many of the features Photoshop provides at one-fifth to one-eighth the cost. Some of these products are very often bundled with scanners. If you expect to scan a lot of images, you might consider buying a scanner. Prices are low for excellent products, and as indicated, often bundled with the scanner are exellent image editors.
- Below are hot links to a few of the most popular image editors for both Windows and Macintosh computers. The category of price is very subjective. Costly means over $300, Reasonable means somewhere real close to $100, Quite Reasonable means less than $50, Cheap means less than $30.
- If you want to spend much time editing and preparing images for use on your website, one of these tools is a must. All of them provide the minimum set of tools required to size, crop, enhance, focus or blur an image and save it in the correct format with some choice over the file size. The hot links open a new browser window, so feel free to visit the home pages of these software programs.
Using the Image Editor
- Once you've chosen and installed an image editor, become familiar with opening JPEG files from PhotoDisks, or opening some of the generally-included license-free images on the installation disk.
- Also become familiar with opening a photograph or other graphic and saving the file in a different file type.
- Practice using "New" and creating a new blank image document and pasting a clipboard image you copied from a website or from a game.
- Practice opening up "wallpaper" or "desktop pictures" and saving these files as both JPEG (.jpg extension) or GIF (.gif extension) files.
- Open your browser and from within the browser, select either "Open File" or "Open Local" and use your file manager dialog box to locate the JPEG or GIF files you previously saved.
- If your browser opens the image and it looks like you expected it to, you have successfully created or edited a picture and saved it in a format suitable for uploading to your website.
- Many images which come on PhotoDisks appear sideways or upside down. Use your editor to rotate them. Generally the choices let you rotate the image clockwise or counterclockwise or flip it horizontally or vertically.
- When the image appears in the correct perspective, save it. That way further editing will occur on an image which is at least right-side up..
Unsharp Mask and Other Filters
- The next steps you might need to practice include re-sizing an image which is too large to fit into the 300-pixel width of the Content Area of your website or the 100-pixel width of the Sidebar area.
- Depending on which program you are using, there will be a feature called "Image Size" or "Resize" or perhaps even "Resample." Look in the File menu and the Edit menu and the Image menu (if there is an image menu) for this feature.
- Resizing an image involves scaling it to fit proportionately into a smaller space. Images are made up of dots (pixels) which generally run 72 to the inch up to 95 to the inch (depending on screen resolution, monitor settings and monitor dot pitch size).
- A 300 pixel image is roughly 3 1/2 inches across. If you have an image which is 6 by 4 inches, you will need to scale it down to fit into the 300 pixel area.
- Web browsers can perform that scaling for images which they receive from web pages if the HTML instructions call for an image to be a certain width. The browser may do a decent job of scaling the image. It may do a terrible job of scaling the image.
- The reason you would want to scale the image yourself is to see the differences and approve of the differences. When you take an image which is 6 by 4 inches, that would be roughly 550 by 375 pixels and scale it down to 300 by 200 pixels, something has to give.
- Image resizing works by sampling the pixels throughout the image and where there are strong contrast or color differences, that distinction is preserved. Where there are subtle or soft color or contrast distinctions, those distinctions can be and generally are smudged. How much smudging and where these losses occur is one of the options you have with image editing software and the resize or image size feature.
- You will want to experiment with the feature a lot because it could make the difference in a photograph looking quite legible and in looking somewhat blurred.
- Many of the image editing programs also have a filter called "unsharp mask." This filter can be a single-action filter or it may have one, two or more sliding controls to change certain filter features. Each program offers "Unsharp Mask" slightly differently.
- The filter takes an image which appears "unsharp" and analyzes it looking for color and contrast differences, which it enhances and smooths. A picture which was resized up to 50% can generally be made to appear perfectly in focus with this filter.
- If you are reducing an image much more than 50%, you will want to use the "Unsharp Mask" filter and another filter called "Sharpen Edge."
- Sharpen Edge (or Edges) works by taking the sharpest distinctions between colors and contrasts and making them slightly sharper, generally by darkening them.
- Using this filter can restore legibility to text which was previously shrunk beyond the ability to read.
- There is a strong interplay between resizing an image, using the unsharp mask filter and using the sharpen edge filter. If you're not familiar with these filters, take an image which you would like to see at less than half its present size and experiment with the Resize feature and then apply various combinations of Unsharp Mask and Sharpen Edge.
- There will be some settings, on those programs which offer filter settings, which you will find optimal for certain photographs or images. Write down those settings, or if the program allows, save the settings.
Beyond Basic Edits
- Some images which you want to put in your website may not look just right because there is a greenish tint to the picture or there is a strong yellowish look.
- Whatever the coloration, if a picture you want to upload to your site has a color problem, most image editors provide a means of correcting for worst-case imbalances.
- Look for a menu item called "Image" or "Adjust" or "Color" and find the "Adjust Color Balance" or "Hue and Brightness" or "Color Correction" controls. If your image is overly yellow, you can generally adjust either the yellow controls to remove yellow, or use an automatic color correction filter built in to some programs to create a more natural look.
- Again, experiment with the controls and how changing certain levels has an overall change to the image, either in the image's color or it's contrast and lighting.
- If you have an image which has really bad color balance problems, use that image to experiment with since any corrections you're able to make to that image will probably be "worst case" for most of the rest of your images.
- If you find certain color combinations or color and contrast combinations which create a good-looking image, save a version of your work using the "Save As" feature of the program. Remember to save it in either .gif or .jpg format.
- It may be true that no one reads an instruction manual or a user guide anymore. If you're one of these millions of individuals, change your habits for this one area.
- Image editing and image editing software are among the most sophisticated programs which are used on computers. Even the simple ones perform amazing mathmatical functions in executing some of their filter combinations.
- The use of the filters and the many other features of most of these programs can only be learned by understanding how the filter works and when best to apply a particular filter.
- Special Effects filters, such as lighting, lens flare, rainbow, and others, are included in almost all editing programs. These filters can definitely enhance an ordinary photograph or give a plain graphic some pizazz. Be cautious, though, to not overdo the filters. Very often the simple, easy to see and understand picture is the one which gets the message across the best.
- On the other hand, now that you've got one of today's sophisticated computer tools, use it for fun and make sure you experiment on a variety of images.
- Like riding a bicycle, learning how to use an image editing program is more difficult to describe than it is to learn. The trick is practice, and, oh yes, read the instructions and user guide that came with the program. It will contain a huge number of tricks and shortcuts which can shorten your learning time.
You are here: Help Topics > Edit Website > Edit an existing template, site or page > How to use Add Image > Image Editing Tutorial