Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Tektronix 4010 wikipedia , lookup
List of 8-bit computer hardware palettes wikipedia , lookup
Stereoscopy wikipedia , lookup
Framebuffer wikipedia , lookup
Anaglyph 3D wikipedia , lookup
Apple II graphics wikipedia , lookup
Portable Network Graphics wikipedia , lookup
Stereo display wikipedia , lookup
Spatial anti-aliasing wikipedia , lookup
Hold-And-Modify wikipedia , lookup
Image editing wikipedia , lookup
Indexed color wikipedia , lookup
How to Prepare Image Files for the Web The non-Designer's Web Book 2nd Edition By Robin Williams & John Tollett Chapter 11, Pages 189 - 218 Prepared by Linda Blocker Technology Applications Standards http://www.sbec.state.tx.us/ SBECOnline TA 11.2s Delineate and make necessary adjustments regarding compatibility issues, including, but not limited to, digital file formats and cross-platform connectivity. Technology Applications Standards TA 11.10s Acquire information in electronic formats, including text, audio, video, and graphics. TA 11.11s Model respect for intellectual properties when acquiring information in electronic formats. Technology Applications Standards TA 11.12s Identify, create, and use available file formats including text, image, video (analog and digital), and audio files. Web graphic specifications Use RGB web-safe colors. Make the image the size you want it on the web page. Save images As GIF or JPEG Select 72 ppi (pixels per inch) resolution on the computer screen. Saving Web Graphics Optimize your image, so it will load quickly. Use the lowest, acceptable quality level. Experiment to find the best quality level with the smallest file size. Preview before you save. Save all the final graphics in a special graphic file folder for your web page. Popular graphic file types GIF (Graphic Interchange Format) JPEG (Joint Photographic Experts Group) Both GIF and JPEG can be viewed with any browser on the web. Both GIF and JPEG can use any graphics program in any platform. GIF files GIF files are best for graphics with large areas of flat color Type Simple illustrations Images with flat colors GIFs have a very small file size. GIF files use only 8-bit indexed color mode. Saving GIF files Use web safe colors Reduce the color palette to the minimum necessary. Turn off "anti-aliasing“. Save with "interlacing“, to tell the browser to gradually load the image. Save as 72 ppi, in indexed color mode. JPEG files JPEG is widely used on the web for photographs or graphics that have many colors and shades and very few areas of flat color. Photographs Paintings with many colors and shades Drawings with lots of color gradations JPEG files are very compressed and small. JPEG files display rich 24-bit color. Saving JPEG files Each copy deteriorates the quality, so save a Master copy. Select "progressive" to tell the browser to gradually load the quality of the image from low to high resolution. “Baseline Optimized” formatting gives the best color quality. Finding Graphics Draw your own graphics or have someone make images for you. Scan images or photos. Find books of copyright-free clip art. Buy graphic source CD-Roms. Borders Fonts Clip art Graphics Download graphics or images from the web (Watch for copyrights). Making Digital Photographs Deliver or mail your film to a photo lab to be digitally processed. Floppy disk Photo CD Rom Post your photos onto the web. Upload images Digital camera Camera memory card or disk Computer webcam Cell phone camera. Scanning Images Scan images into a digital format. Many homes, businesses, and schools have scanners. Many office supply or copy stores have pay scanners. The glass surface determines the largest size picture you can scan on a flatbed scanner. Edit the image, and make it’s dimensions the size that you want on the web page. Make a copy to save as JPEG or GIF for the web. Make a Scanned Image Make a Master file, at a resolution of 144 or 150 so you can edit it easily. Save as a TIFF TIFF makes a high-resolution master copy. Make copies of the master, for editing. An image which will be printed should be scanned at 300 ppi. Scanner Resolutions A 144 ppi Master image will leave the cleanest image, when a copy is reduced to 72 ppi. When presented with Low, Medium, or High: Medium will meet most needs. High is helpful, if you plan to do a lot of work on the image. Colors "Thousands" of colors in an image will meet most web needs. A GIF with 256 colors works well for an image which contains lots of broad, flat colors, and is not a photograph. A JPEG high-quality photograph can contain millions of colors. Make an image map An image map defines certain areas of an image as hot spots, which contain links to other pages or sites. Use layers for the hot spots and their URL links. You can make hotspots any shape you wish, and they can be invisible. When you move over the image map, tips and links can pop up as a surprise. "Save Optimized As..." from the file menu. Types of Web Backgrounds Background graphics Left-edge graphics Top-edge graphics Giant image graphic A textured background A tiled background Background Graphics Web backgrounds can be colors or images: Black, white, or a color. Plain colors or patterns. A texture can be added with a filter. A GIF or JPEG graphic that repeats (tiles) to fill the screen. A giant image. Left-Edge Graphic Left-edge graphics are popular backgrounds because they load quickly. They ornament a page and add color. Left-edge graphics help to organize the page. A Left-edge graphic is a long, skinny graphic, which creates a bar or stripe down the edge of the web page. The graphic repeats, to conserve load time. Making a Left-edge Graphic Open a new image file about 1000 pixels wide by 50 pixels high. Select the first couple of inches of the file. Fill with a browser-safe color. Select the rest of the image area, and choose "inverse“ from the select menu. Fill this new area with black, white, or another color. Add a small stripe of accent color between the two color strips. Finish the Left-edge Graphic Crop away most of the image height (because it will repeat itself). Leave it 1000 pixels wide by 10 pixels high. The file size is now 250 bytes (.25K). Export the image as a GIF file. Place it on the web page as a background. Add a table to organize information. Turn off the borders, so that the table is invisible. Make a Top-edge Graphic Top-edge graphics work best on pages that have very little or no scrolling. Top-edge graphics repeat, so they can load quickly. Follow the directions for a left-edge graphic, but make it tall and skinny. Make this graphic file taller than the scrollable content area, so it will not repeat too soon and show the top color again. Giant-image backgrounds Select an image to use as a giant background. Decrease the number of colors in your image. Save the image as a low resolution GIF file to preserve load time. Place the new GIF onto your web page as a giant background image. Select a contrasting color for your text, so it can be easily read, over the image. Make a Textured Background In Photoshop, create a new file 100 pixels x 100 pixels, with a resolution of 72 pixels per inch. Fill the window with a browser-safe foreground color. Open the filter menu. Select noise/add noise/pick a setting from the dialog box. Re-open the filter menu/choose blur/gaussian blur/use a low setting, between .3 and .5 Finish the Textured Background Open the select menu. Choose all to select the entire image area. To tile the pattern, open the edit menu/define pattern. Create a new file about 300x300 pixels. Open the edit menu/ fill/from the contents menu of the dialog box/ pattern/100% opacity(less, for a lighter version)/ok. Export the original texture file as a GIF89a. Place the image as a background on your web page. Make a Tiled Background Use the Adobe ImageReady tile maker filter. Select the image that you desire. Open the filter menu/other/tile maker. In the tile maker window, select blend edges/enter a value in the width field. Check the box "Resize Tile to Fill Image". Use the image as a background on your web page. Animated GIF Suggested software for creating GIF animations: ImageReady (comes with Photoshop) Macromedia Fireworks Make an Animated GIF Make separate graphic files, or frames of your image. Recreate only the moving parts, to decrease download time Change the parts to show movement. Number each part as you save it. Place the different parts on separate layers, and make them invisible until they show up on the correct frame within the sequence. Place a solid color background on the bottom layer. Save your Animated GIF As you Save, the software will make one compact GIF file. Select the number of times you want the animation to loop. (not forever, please!) Set the speed of the animation, the delay. Depending upon your software, save as a GIF file, or export all of the layers as one GIF89a file, or "Export Optimized“. Place the GIF file onto your website. Preview to see the movement. Graphics Software Links www.adobe.com www.macromedia.com www.apple.com/software/ www.microsoft.com www.arcsoft.com/en www.imsisoft.com www.eyewire.com www.shareware.com www.download.com Helpful Photo Sites www.shareware.com www.download.com www.walmart.com www.eckerd.com www.filmworks.com www.kodak.PhotoNet.com www.shutterfly.com www.aol.com "You've Got Pictures" www.Yahoo.com Yahoo! Photos www.activeshare.com Adobe www.dotphoto.com online photo album