| Web Color | | | | color or RGB color is present in photographic JPG files |
| There are many web design tutorials that cover Web | | | | and other created artwork. Full color images should |
| color in detailed scientific terms. However, for our | | | | not be saved as GIF files because of the limited |
| objectives, let's briefly discuss Web color and how it | | | | number of colors. By having limited colors, the full |
| will be used in the Web portfolio. You will need to | | | | color image will represent the true colors using the |
| develop a color scheme for your Web portfolio | | | | existing Web palette of 216 colors. |
| pages. This means that you will designate colors for | | | | This creates a poor, dithered, and ugly image. That is |
| your page background, the type used on the page | | | | why it is very important to use the right file format |
| and any other static elements that reside in the page. | | | | for each specific graphic. When converting print |
| There are two types of color that can be used in | | | | images to the Web, it's important that you do not |
| Web graphics. The colors can be associated with the | | | | use the CMYK color model for anything including |
| Web graphic file formats we just mentioned: GIF and | | | | graphics. The CMYK model is not a monitor friendly |
| JPG. | | | | color space. The CMYK graphics cannot be seen in |
| | | | CMYK on the Internet. They can only be represented |
| GIF files use index color. Index color consists of 216 | | | | by the RGB color model or the Web safe (indexed) |
| common colors found on all computer monitors and | | | | color model. Here are the rules for Web color: |
| within all Web browsers. These common colors reside | | | | Full color images (RGB palette) and photos are saved |
| in a Web palette. The Web palette of colors is | | | | as JPG. |
| available in Macromedia Fireworks and Adobe | | | | Flat graphics (Web 216 palette) with limited color are |
| Photoshop so they can be used in design of Web | | | | saved as GIF files. |
| screens without variance of color when the pages | | | | For Page backgrounds use the Web safe palette |
| are on the Internet. Also, the Web palette is the | | | | (Web 216 palette) in all computer graphics, |
| standard color palette in Macromedia Dreamweaver | | | | multimedia, and Web development applications. Now, |
| and Macromedia Flash. This allows us to achieve | | | | let's discuss Web page and graphic size. |
| consistent color across Web applications and Web | | | | Size |
| browsers. | | | | Web pages are measured in pixels. Pixels are the unit |
| We use Web colors for: | | | | of measurement for the screen. A Web page can |
| Web text/HTML text | | | | literally be any size. Standard Web pages usually fit |
| Web page backgrounds | | | | into a few sizes: |
| Web page colors used for table or layer backgrounds | | | | W × H |
| Web links | | | | 600 × 800 |
| GIF files | | | | 640 × 480 (Dreamweaver default) |
| JPG | | | | 1024 × 768 |
| JPG files use red, green, and blue (RGB) for graphical | | | | 550 × 400 (Flash default) |
| color. RGB color is also known as full color. Full color | | | | The default Web page sizes provided in Web friendly |
| items include bitmap graphics or photographs. We | | | | applications and listed earlier are a great place to |
| want to utilize photographs as much as we can within | | | | start. You will probably use a smaller, custom size for |
| a Web portfolio to add to the visual rhetoric and the | | | | pop-up windows. The Web page size you choose is |
| narrative that we are trying to present. Extensive | | | | up to you. Remember to use actual space for the |
| use of photographs, especially their manipulation in | | | | Web page effectively so that the content is in the |
| programs such as Adobe Photoshop, require a brief | | | | proper proximity to the user's navigation patterns. |
| description of the RGB color model. RGB color is | | | | Web page size affects the way users move around |
| known as additive color because of all colors, red | | | | the Web pages and the Web portfolio site. One rule: |
| green, and blue were added together at their full | | | | Pick a size for all main screens and stick to it. |
| intensity that would create pure white. The mixtures | | | | Consistency in page size r should be used on each |
| of the relative strengths of these colors, "create the | | | | level of the Web portfolio design flowchart. You will |
| millions of colors computer monitors can show" | | | | need to understand size in the image editing |
| (Kimball, 2003, p. 95). The strength of these colors is | | | | application when you develop screens and Web |
| set in from zero to 255 with zero being the least | | | | graphics. We must keep our graphics within the page |
| intensity and 255 being the highest intensity. When | | | | size guidelines otherwise they will over extend the |
| red, green and blue are combined at zero intensity | | | | Web browser and the user will need to scroll to see |
| the result is black. At full strength, high intensity, | | | | them. That is not a good thing and will definitely turn |
| where the values are set at 255, 255, 255, the result | | | | off the user. When you are looking at Web screens |
| is pure white. To remember this, here is a simple | | | | and graphics in an image editing application such as |
| metaphor. Think of the red, green, and blue as light | | | | Macromedia Fireworks or Adobe Photoshop, you can |
| switches. Each light switch using a slider has a range | | | | see the exact size the image will occupy on a |
| of zero to 255. When all the white switches are set | | | | monitor when the view is set to 100 percent. |
| at zero the room is dark. What all the light switches | | | | This means that you can get an accurate indication |
| are set to 255, the room is lit at full intensity. Once | | | | of how a page will look before going through the |
| you begin to use image-editing applications such as | | | | process of making it an HTML Web page. This helps |
| Adobe Photoshop and Macromedia fireworks, you | | | | with design and production. It helps eliminate guess |
| begin to explore computer color within your graphics | | | | work when developing pages. Size also depends on |
| and photographs. When discussing color usage, full | | | | resolution. Let's discuss resolution next. |