Color blenders - Web Designing
Interview Questions
Practice Test
Pragnyameter Exam
All Tutorials
Job SearchThe problem with the web palette is that it has only 216 colors to choose from (and they probably wouldn't be your first choices). If you are bored with your color options, you may want to try a color blender. Color blenders approximate any RGB color by mixing two colors from the web palette in a tiny checkerboard pattern. You can use these "hybrid colors" to fill areas of graphics or to create a background tile.
Color blenders all work about the same way. Simply select an RGB color (such as from an image using an eyedropper tool) and the blender converts it to a 2 2-pixel tile made up of two web-safe colors. The hybrid color is then available as a fill color to be applied to a selected object or marquee selection.
The Pros and Cons of Color Blenders
No technology is either all good or all bad, so let's look at the ups and downs of color blenders:
Advantages
- Color blenders allow you to choose colors off the beaten path of the 216-color web-safe palette, yet still be certain they will look the same on 24- and 8-bit monitors.
Disadvantages
- The controlled dither adds to the file size if used as a fill for large areas of the graphic, because it interferes with the GIF's LZW compression.
- It is more difficult to get inline images to blend seamlessly over a background tiled with a hybrid color. For instance, an image with a hybrid blue background may not line up correctly with the same hybrid blue in the browser background. For best results, create the original image with a background that is similar to the hybrid blue, and use transparency.
Creating Hybrid Colors
Color blenders are built into Fireworks, Photoshop 5.5+, and ImageReady. If you don't have these tools yet, try the less expensive ColorSafe from BoxTop Software, which has nearly identical features to DitherBox in ImageReady (shown later).
Photoshop/ImageReady
Photoshop and ImageReady use the DitherBox plug-in filter for creating "custom dither patterns" from web-safe colors (Figure). To use it, select an RGB color that you want to simulate. Then select the part of your image that you want to fill and choose Filter Other DitherBox. The DitherBox window shows you a close-up the tile used to make up your target color as well as a preview at actual size. When you are ready, click "Fill" to fill your selection with the dither pattern.
Figure: DitherBox filter in Photoshop and ImageReady
Fireworks
In Fireworks, the color blender (called Web Dither) is located on the Fill palette (Figure). Select an object containing a non-web-safe color. When you select Web Dither, the tiled pattern is applied to the selected object and becomes the active fill color. Be sure also to select the Hard Edge option to maintain web-safe colors. You can also use the Web Dither tool to simulate a transparent effect when you click the Transparency box.
Figure: Web Dither tool in Fireworks
Creating Hybrid Background Tiles in Photoshop
When creating a background tile filled with hybrid colors, the key is to set the width and height to an even number of pixels so the pattern repeats correctly. You can make the tile quite small (10 or 12 pixels square) to limit file size.
- Create a new graphic and fill the whole area with the color you'd like your background to be.
- Select the DitherBox filter from the Filters menu. You can adjust the color using the RGB controls.
- Fill your image with the new hybrid color.
- Convert the image to Indexed Color using the Exact Palette and either Save as or Export to GIF format.
- Insert your graphic into the HTML document by adding the background attribute identifying your tile to the <body> tag as follows:
<BODY BACKGROUND="tilegraphic.gif">
- Browsers
- Browser Usage Statistics
- Design Strategies
- Knowing Your Audience
- Test, Test, Test!
- The Importance Of Standards
- Dealing With Unknown Monitor Resolutions
- Fixed Versus Flexible Web Page Design
- Designing "above The Fold"
- Monitor Color Issues
- Alternative Displays
- The Web Is Not Like Print
- Typography On The Web
- Color On The Web
- Graphics On The Web
- Servers 101
- Unix Directory Structures
- File Naming Conventions
- Uploading Documents (ftp)
- File (mime) Types
- Browser Print Mechanisms
- Printer-friendly Html Pages
- Cascading Style Sheets For Printouts
- Portable Document Format (pdf)
- Flash Printing
- The Web Accessibility Initiative (wai)
- Accessibility In Web Technologies
- Accessibility In Tools
- Character Encoding
- Html 4.01 Language Features
- Style Sheets Language Features
- The Html Standard
- Html Tags
- Information Browsers Ignore
- Document Structure
- Tips On Good Html Style
- Html Tools
- Summary Of Structural Tags
- Setting Up An Html Document
- Global Settings With The Tag
- Using Tags
- Summary Of Text Tags
- Working With Html Text
- Inline Type Styles
- Html Specification
- The Font Tag
- Lists
- Text Layout Techniques With Html
- Character Entity References
- Summary Of Tags Related To Linking
- Simple Hypertext Links
- Linking Within A Document
- Affecting The Appearance Of Links
- Targeting Windows
- Imagemaps
- Non-web Links And Protocols
- Linking Documents With
- Summary Of Object Placement Tags
- Image Basics
- The
Tag And Its Attributes
- Horizontal Rules
- Embedded Media Files
- Advantages And Disadvantages Of Java Applets
- Summary Of Table Tags
- Introduction To Tables
- Basic Table Structure
- Affecting Table Appearance
- Table Troubleshooting
- Tips And Tricks
- Standard Table Templates
- Multipart Images In Tables
- Summary Of Frame Tags
- Introduction To Frames
- Basic Frameset Structure
- Frame Function And Appearance
- Targeting Frames
- Inline (floating) Frames
- Frame Design Tips And Tricks
- Summary Of Form Tags
- Introduction To Forms
- The Basic Form
- Form Elements
- New Form Attributes In Html 4.01
- Affecting The Appearance Of Forms
- Demystifying Cgi
- Specifying Color By Rgb Values
- Specifying Colors By Name
- Using Style Sheets
- How Style Sheets Work
- Selectors
- Specifying Values
- Properties
- Positioning With Style Sheets
- What's New In Css2
- Style Sheet Tips And Tricks
- How Ssi Is Used
- Ssi And The Server
- Adding Ssi Commands To A Document
- Using Environment Variables
- Xssi
- Ssi Commands
- Include Variables
- Time Formats For Ssi Output
- Gif87a Versus Gif89a
- 8-bit Indexed Color
- Gif Compression
- When To Use Gifs
- Tools Overview
- Interlacing
- Techniques For Working With Transparent Gifs
- Minimizing Gif File Sizes
- 24-bit Color
- Jpeg Compression
- When To Use Jpegs
- Progressive Jpegs
- Creating Jpegs
- Minimizing Jpeg File Size
- The Png Story
- When To Use Pngs
- Platform/browser Support
- 8-bit Palette, Grayscale, And Truecolor
- Png Compression
- Special Features
- Creating Png Files
- Png Optimization Strategies
- Designing With Web-safe Colors
- Converting To The Web Palette
- Web Palette Strategies
- Color blenders
- How They Work
- Using Animated Gifs
- Browser Support
- Tools
- Creating Animated Gifs
- Optimizing Animated Gifs
- Basic Digital Audio Concepts
- Using Existing Audio
- Preparing Your Own Audio
- Streaming Audio
- Web Audio Formats
- Choosing An Audio Format
- Adding Audio To A Web Page
- Basic Digital Video Concepts
- Compression Of Digital Video
- Video File Formats
- Which Format To Choose
- Adding Video To An Html Document
- Using Flash On Web Pages
- Flash Power Tools
- Creating Flash Movies
- Adding Flash To A Web Page
- Integrating Flash With Other Technologies
- Shockwave For Director
- Adding Shockwave Movies To A Web Page
- How Smil Works
- Smil Players
- Smil Authoring Tools
- Writing Smil
- Javascript History
- Javascript Basics
- Sample Scripts
- Handling Multiple Browsers
- Using Dhtml
- How Dhtml Works: Example
- The Document Object Model
- Creating Layers
- Dhtml Examples
- Browser Detection
- Dhtml Tools
- Limitations Of Html
- How It Works
- Xml Document Syntax
- Document Type Definition (dtd)
- Examples Of Xml Technology
- Xhtml Standards Development
- Creating Xhtml 1.0 Documents
- Xhtml Document Declarations
- Well-formed Xhtml
- Try It Out
- About Wap
- Creating Wap Applications
- Introduction To Wml
- Wml Elements And Attributes
Designing For A Variety Of Browsers
Designing For A Variety Of Displays
Web Design Principles For Print Designers
A Beginners Guide To The Server
Printing From The Web
Accessibility
Internationalization
Html Overview
Structural Html Tags
Formatting Text
Creating Links
Adding Images And Other Page Elements
Tables
Frames
Forms
Specifying Color In Html
Cascading Style Sheets
Server Side Includes
Gif Format
Jpeg Format
Png Format
Designing Graphics With The Web Palette
Animated Gifs
Audio On The Web
Video On The Web
Flash And Shockwave
Introduction To Smil
Introduction To Javascript
Introduction To Dhtml
Introduction To Xml
Xhtml
Wap And Wml
