| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
| ||
|
Support 
E-mail
© Copyright 2014 website2Go.com All Rights Reserved |
| Image Editing Tutorial |
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.
Taking Pictures
- 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
- 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.
| Company and Software | Description and Price |
| Adobe's Photoshop for Macintosh and Windows | The benchmark image creation and editing program. Costly. |
| Adobe's Photoshop Elements for Macintosh and Windows | Photoshop light. Reasonable. |
| ArcSoft's PhotoStudio for Windows | Another contenter for Photoshop light. Reasonable. |
| Group 42's WebImage for Windows | Web-specific image editor. Quite Reasonable. |
| JASC Software's Paint Shop Pro for Windows | Standard for many Windows users. Reasonable. |
| LView Pro shareware for Windows | The standard for Windows for shareware editors. Cheap. |
| Graphic Converter shareware for Macintosh | The standard for Macintosh shareware. Offers many Photoshop-like features. Quite reasonable. |
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..
- 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.
- 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
Feature Overview
The generic steps involved in creation and editing of images and subsequent posting of them to your website will be listed, in order, in the Sidebar.
Creating and Editing Images
Taking Pictures
When using film cameras, have the photofinisher include a JPEG disk of the pictures.
When using digital cameras, use the lowest resolution the camera allows, ideal would be 72 to 95 dots per inch.
Scanning Pictures
When scanning existing images or photographs, set the scanner resolution to 72 to 95 dots per inch.
When scanning people or other items with subtle color changes, save the scan file as a JPEG image. When scanning charts, save as a GIF file.
Editing Images & Pictures
Software Choices
Adobe Photoshop is the standard against which other image editing software is compared. Corel and others make comparable software programs. Most of the competitors to Adobe offer their software at a considerable reduction in price from Adobe.
Shareware programs exist for Macintosh and Windows computers. Some of the shareware programs compete with commercial programs costing up to 20 times more.
Using Image Editors
Practice using the editing software to open and save files. Save the files as .jpg extension or .gif extension and open them with your browser to test the file compatibility.
Macintosh users will have to use extensions just as their Windows colleagues do. The HTML standard requires extensions on all files expected to be served to a browser.
Resizing the Image
Resizing is an image editing tool which allows a 6x4 inch photo to fit into a 3x2 inch web space. Resizing uses mathmatical corrections to preserve as much of the image data as it can.
Browsers automatically scale images if the HTML instructions call for that. You can do better than a browser using image editing software to avoid having pictures resized by someone else's browser.
Using Unsharp Mask and Sharpen Edge
Unsharp mask works to correct defects created when an image is resized smaller by more than a few percent. Unsharp mask attempts to restore color and contrast distinctions.
To use Unsharp Mask correctly will take some experimentation.
Sharpen Edge is a complimentary filter for Unsharp Mask. It works by redefining the sharpest color and contrast areas in an image.
The combination of Unsharp Mask and Sharpen Edge can restore a severely resized image to readibility.
Color Adjustments
Photographs taken using fluorescent lights, sunset or sunrise, candles, campfires or hearth fires can all have a very strong color tint. The tint can range from green to red.
Color Adjustments are features of image editing software which allow you to shift the color balance of an image back to a more normal color. Some programs have automatic color balalncing controls.
Beyond Basic Edits
Image editing software from the most expensive to the least expensive all contain filters and special effects which can be used to enhance or sharpen any image or photograph.
In order to fully appreciate the features of image editing software you should read the manual and practice using some of the filters. Use photographs or images which appear ordinary and experiment to see if some of the filters allow you to change an ordinary image into one which has more visual impact.
Experiment!