 |
2D & 3D
"Colour Palette Options"
When thinking up a good, and practical, Navigational Interface design for a Web site, many things will come into play that will supercede the lesser concern of 'should i make it 2D or 3D?' (from an artistic perspective that is). One of them being: which type of design will be most appropriate for the Web site; which is usually indicated to you by the subject matter that will be the heart and soul of the site; i.e. the textual content.
The reason why i'm mentioning the above fact is because the colour palette you use will directly affect your interfaces overall file size. Now, on a site that deals with things of an artistic nature, larger file sizes may be tolerated by visitors simply because they are at least half expecting to see some 'flash & bang' type of graphics. So they'll tend to be more patient about over-bloated graphic sizes and extended download times. But that doesn't mean we can't at least *try* to be courteous to our guests when creating our Web graphics, right? While on a site that is more bussiness oriented, extended download times will not be appreciated nor accepted by potential customers of a company. And if you work on the Web creating sites for these folks then you should already know most, if not all, of what we're about to cover.
One way to help ensure smaller file sizes and cross-platform compatability is to use the 216 Web safe palette. This palette is comprised of the 216 system colours that are used both on the PC and Macintosh computer systems. The remaining 40 (from an original palette of 256 colours), are not shared by each and were left out of the palette when it was first created. But even though the palette only has 216 colours in it, that doesn't mean we can't be as creative and colourful as we'd like to. You should just go about your routine as you usually do, but just make sure that you have the Web safe palette loaded in to your colour palette when creating image for the Web.
(This is the Web Safe palette layed out in a linear fashion.)
You'll notice here the large repetition of certain colours. This helps your eyes to see how the various shades will look when used together, which would be tougher to envision if there were only one swatch for each colour. Whether this was done intentionally or not when the palette was created i'm not sure; nor does it really matter why. You can usually find the Photoshop version of this palette on Adobes Web site, or just about any other site providing plugins and extras for the program.
Bonus! - Extending the 216 Web Safe palette.
There's a way to extend this tiny palette of colours that will give us back our photographic colour schemes that we all love to use so much, and free our minds up to be more creative; instead of worrying about how many colours we *can't* use and how many we *can* use.
Here's how it works: (you can try this using any palette)
Open a new RGB document that is only 2 pixels by 2 pixels square, and choose 'Transparent' for its background. Zoom in as far as possible by hitting holding down the Ctrl key a hitting the Plus Sign key over and over until it won't zoom any further; until you can see each separate pixel space on the canvas. Now grab your Pencil tool (it has the hardest/cleanest edges) and pick a 1 pixel brush size (usually the smallest in the palette). Then choose a bright yellow colour from your palette. With the Pencil, fill in the upper left square of the canvas by clicking it in that general area, and then do the same for the lower right square of the canvas. Duplicate this layer, then Flip it Vertically or Horizontally; either way. Now choose black, and hit Alt+Shift+Delete (PC).  That will temporarily activate the layers 'Preserve Transparency' function while at the same time filling the contents of the layer with the current foreground colour. You'll see what i mean when you do it.
(Remember that key combination, it'll save you time)
Now Select All (Ctrl+A), then go to Edit/Define Pattern. Open another new RGB document and make it any large size; say 400x400 pixels. Go to Edit/Fill/(Contents menu)-Pattern. See that mossy or pea green colour that filled your canvas? Well that specific shade of green is NOT in the normal 216 Web palette. So you've just now created another colour to add to that palette. By combining 2 different colours from the palette in this way, we can increase the palettes colour amount to literally millions if we want; essentially making it into a normal Photo quality RGB palette.
One minor fallback of creating 'hybrid' colours this way is that some combinations will produce a colour that has a very slightly noticable grid-like pattern to it. It does that because the individual pixels are not blurred together with anti-aliasing, and because it is an artificial colour, not a true shade of a real colour. But that's a small price to pay i think. Some patterns i've seen are actually quite cool looking and would make an interesting texture for certain types of graphics. Experiment with this technique to get a better idea of what to expect from it.
Ok next, let's proceed with 'Complex vs Simple designs'...
((( BACK --- HOME --- NEXT )))
Creating the NUI: Concept of Design / Nutz & Bolts / 2D & 3D / navDesign Summary |
|
|
