 |
 |
|
Images can be acquired by using a camera, scanner, clip-art and stock photography, or from the web. Most film developers offer digital processing, which converts your 35mm film or existing prints into digital images stored on a CD. However, if you plan to take a lot of photographs for your site you might want to consider buying a digital camera, which skips the developing time and expenses. For existing prints, a scanner is a good way to digitize them. See webmonkey's scanner tutorial for more information on scanning images properly for web use. Scanner tutorial: <http://hotwired.lycos.com/webmonkey/geektalk/97/41/index3a.html> Another great place to find graphics for the Web is the Web itself. Saving pictures from a website is as easy as right clicking on the image (ALT + click for Macs) and selecting "Save Picture As". However, most online content is copyrighted material. To use an image from the Web, you must first get permission from the original owner. When in doubt, assume an image is copyrighted unless explicitly stated otherwise. Obvious violations of copyrighted material are subject to removal from the DePauw website. The DePauw Photo Database was created to address this issue, and provides a variety of images that you can use freely in your site. DePauw Photo Database: <http://www.depauw.edu/photos> Several online resources offer free clip art and stock photography, although the quality of what's available varies dramatically from source to source.
http://www.1clipart.com/ Clip-art and images acquired from the web are generally ready to use "as is". Most others will require some editing before putting them in place on your site. After digitizing an image into your computer, the next step is to open the file with a graphic editing software program. Two of the most common are Adobe Photoshop/Imageready and Macromedia Fireworks, which are both pro-caliber tools, but there are cheaper and less complex alternatives. Microsoft's Image Composer comes bundled with FrontPage, and offers many of the same features and capabilities. Each application generally operates under the same core principals, which are detailed below. For the specifics of a particular application, see the help and tutorials included with the software. They are a good reference when stuck at a particular point, or to just get a better sense of an application's possibilities. In addition, many online tutorials are available: Adobe Photoshop/Imageready Tutorial: <http://hotwired.lycos.com/webmonkey/design/graphics/tutorials/tutorial1.html>
Chances are, your imported image isn't the exact size it needs to be for your site. To resize an image, choose Image Size and convert the measurement units to pixels, which are the standard unit of measurement for HTML tables and therefore the best way to estimate the size of the photo you'll need. Also, since monitors only display 72 dpi (Dots Per Inch), set the image Resolution to 72 (this may be the default or only choice in some applications). As a general rule, never use a graphic that is any larger than the size it is to be displayed on your site. For example, if you create a graphic at 800 x 400 pixels, do not display that graphic at 200 x 100 pixels. Although the graphic is displayed at a smaller size, the file still downloads at full size and the browser reduces the display size. In the DePauw template, the maximum width of the content area is 605 pixels. Therefore, you will rarely, if ever, need an image larger than 605 pixels wide. Also keep in mind that some space around an image is good design practice, so a typical maximum size would be about 580 pixels wide. (One exception would be using the wide template, which allows for a 765 pixel wide content area. Consider this template for photo gallery pages, where you can put two 380 pixel images side by side down the page.) Once you've resized the image, you may notice a loss of resolution quality. Unsharp Mask (under Filters) is a good tool for precisely sharpening an image into focus, especially those taken with a digital camera. If you do want to use a large graphic, consider creating a thumbnail that leads to the graphic. Use the Auto-thumbnail function in Dreamweaver or FrontPage to create both the thumbnail and a hyperlink to the full-size picture. A page of thumbnails leading to these larger images is helpful to visitors who want to scan your site, particularly those on a dial-up modem connection.
The easiest way to remove a portion of an image is with the Crop tool. Simply select the part of the image you want to keep, and the crop tool discards the rest. Note that unnecessary parts of an image (for example, a lot of extra background) not only take up screen space, but add to the downloaded file size of the final image (see Optimizing below). In many cases, resizing and cropping are all the editing your image needs, and you're ready to move on to Optimizing. That said, editing imported images is only part of the Web graphics game. Occasionally, as in the example of a custom logo, you'll want to create an image from scratch. When only original art will do, building Web graphics from scratch is required. Whether you have a clear plan of what you want to create or no idea at all, there are a few things to take into account. Generally, the same programs that are used to edit images can create them from scratch as well. Photoshop and Fireworks provide the widest range of options, but are also more complicated to learn than a program like Image Composer. Getting Started Under File, select New. A New Document window will pop up with settings for canvas size and pixel resolution. Since monitors display at 72 pixels per inch, limit your Web graphics to that resolution.
Creating a graphic usually begins by adding shapes and/or type to the canvas. For unique shapes, start with something simple like a circle or square. As a general rule, you should use HTML to create text on your site whenever possible - type should only be used in a graphic when absolutely, aesthetically necessary (logos, banners, etc.). This is because the file size of graphic type slows the overall page download time. Finally, a diverse font collection helps to create a distinct style, although it's important to use them sparingly. There are several online resources that offer free fonts, including: http://www.pcfonts.com and http://www.acidfonts.com/
Drawing tools are fairly consistent across most applications, and typically include paint brush, air brush, pen, pencil, and eraser tools, all of which work like their analog counterparts. You can alter drawn shapes with tools like marquee, lasso, paint bucket, clone stamp, and various effects. Each of these operates somewhat differently depending on the application you're using - check the help guide or tutorial for more detailed information on using them.
Different browsers and operating systems display colors very differently, often resulting in unintended results. To avoid this, use the 216 color web safe color palette to make sure images look the same no matter what a viewer uses to look at them. Select the "Web 216 palette" from the list of swatches and choose your colors from amongst those provided. Browser-safe color palette: <http://hotwired.lycos.com/webmonkey/reference/color_codes/>
Once you have a basic design set you can make alterations with effects, styles and filers. Common examples are drop shadow, emboss, gradients, Optimizing is the process of compressing an image file to reduce its file size. While ideally all images would be left in their original highest-quality state, compression is a necessary evil for web images. Overly large image file sizes increase the total download time of your pages, making your viewers wait longer to see the content. Keep in mind the dramatic difference between the speed of the DePauw network and a dial-up modem connection; pages that load quickly on campus may be intolerably slow over a modem connection.
While estimates vary, we suggest that you keep the total size of each web page, including all graphics files in the page, to 40-60K (kilobytes) for most purposes, and almost never more than 75K. FrontPage provides tools to help you determine both the total size of a Web page, and which pages in your Web are slowest to load. Optimizing involves selecting a file type to optimize to (see Formats below) and the amount of compression to apply. For example, the file size of the East College image is reduced with consecutively greater amounts of JPEG compression:
As seen above, for most photos a setting between 30-60% quality is the best compromise of image quality and file size.
Nearly all graphics on the Internet are either JPEG (Joint Photographic Experts Group) or GIF (Graphics Interchange Format) format. Other file formats, such as PNG (Portable Network Graphics) exist, but to be sure that the greatest number of browsers can display a graphic, choose either JPEG or GIF. GIF As a general rule, GIFs are better suited for graphics with areas of solid or flat color such as illustrations and logo than for photographs. The GIF format also lets you create transparencies, interlacing, and animations. Use .gif files for: Images that contain transparent areas. A limited number of colors, such as 256 or less. Colors in discrete areas. Black and white images. A transparent GIF allows one color to be set as transparent, usually a background color. All Web graphics are square or rectangular and transparencies are a way to create the illusion of irregularly shaped images. Interlaced images display a rough version of the entire image quickly and then gradually fill in the details. This affords the viewer a sense of the image before it fully downloads, a godsend to those with low bandwidths. Animated GIFs are files that contain multiple images set to display like a slide show. They work on all major browsers and require no plug-ins. JPEG The JPEG format was designed for photographic images. Use .jpg files for: Photographs. Natural-looking images. A large number of colors, such as in the millions. A great deal of detail, such as a photograph of a house on a real estate site. An image with large dimensions. PNG PNG (Portable Network Graphic) is largely considered the format of the future. While it has many advantages, many older browsers (I.E. 4 and Netscape 4 or older) do not support the format at all, and some newer versions still have sporadic problems. Use GIF and JPEG instead. For more information on image file formats and when to use GIF vs. JPEG,
see: <http://www.siriusweb.com/tutorials/gifvsjpg/> primary sources
©2000-03 DePauw University |
Acquiring
Images
Editing
Images
Resizing 
Cropping 
Starting
from Scratch 
Type 
Drawing
Browser-safe
Colors 
Effects
Optimizing
Formats