title.gif

« Basic Sperm: Essential Tip I | Main | Drawing with objects »

Have you ever seen a site where the colors look so rich and subtle that they just blow you away, and you wonder how the designer ever happened to settle on those particular colors? If you are designing a page to showcase an image, it seems obvious that you go to the image to find your basic colors, but even after hours of playing with variations of hue and saturation, etc., often what you end up with seems to lack quite the same deft touch that you've seen elsewhere. How do they do it? Well, I just don't know. But I did come up with an interesting idea yesterday that I've had a lot of fun playing with: use a mosaic filter on your image to give yourself a potential palette. I'm sure this is an old idea, but I haven't read about it before, so I'll share. To do this in Photoshop, just go to the regular filters and use Filter: Pixelate: Mosaic, and choose a cell size that gives you the number of options you feel comfortable working with. If you don't have any mosaic filtering options, use this trick: make your image tiny, save it as a .gif, then open the file again and increase the size. For example, if your image is 300 pixels x 300 pixels, reduce it to 10 x 10, save, re-open, then increase back to 300 x 300.

For a couple of quick demonstrations and a few more tips, keep reading.

For example, here's a .gif that shows an image, and a couple of basic background color choices. This is what I came up with from just looking at the image and going with my first inclination, and it's nice; I like it, but it seems maybe a touch flat and uninspired. So I did the mosaic trick, and used this array to begin playing with colors. Here's what I ended up with, which I like much better. My first choice wasn't a bad one though; here's an example showing one of the color choices from one of my mosaic palettes which is quite similar. If that first palette example seems like too many colors to choose between, just make your cell size larger when you pixelate the image, so that you end up with something like this, or this. Or you can narrow it down even further, using the maximum cell size, for a palette equivalent of Google's "I'm Feeling Lucky".

One note: on some images you will find that the colors are too subtle and/or similar or appear in spots that are too small for you to get a useful palette using this technique. In this case you usually end up with what looks like one solid-color square. Well, this color will probably be a pretty good choice, but to get back to having options, experiment with increasing the contrast or saturation on your image and then pixelating it. Once you manage to get a defined palette, work with those colors, decreasing saturation or brightness if needed. You can also try increasing your image size (just for establishing your mosaic palette).

Finally, one last tip (and I think this is a good one, so I shouldn't bury it down here, should I?): Choosing colors this way is nice aesthetically, but it doesn't necessarily make for the ideal web colors. I have a way to handle that . To get your chosen mosaic-inspired palette to be "web smart", I have a little shorthand trick (because let's face it, if you are going for 256 "web safe" palette, just choose one of the three or four colors that don't hurt your eyes and be done with it). Here's what you do: just make every second number or letter in the hexadecimal color code the same as the one that preceded it. That sounds complicated but it's very simple: for example, if the color you want is #49594D, make it #445544; if you want #568791, go with #558899; #A6A6CE becomes #AAAACC. Then you can go to the Smart Web Palette and look at your web-smart adjusted color and the colors around it to see what you prefer.

That's what I did on this example (except I just stuck with my shorthand colors) The background of the text area is #445555; the border between the background area and the text area is #664444; the border is plain black; the headline is #997766; the text is #888877.

Posted by taz on July 29, 2004 at 02:02 AM in Color, Photoshop, Tips | Permalink

TrackBack

TrackBack URL for this entry:
http://www.typepad.com/services/trackback/6a00d83420dec753ef00d83423385d53ef

Listed below are links to weblogs that reference Mosaic Palette color tip:

» TFIF from ChasingDaisy
I'm having a humungously busy day, just time for a few things you might enjoy. First up, Happy Left-Hander Day to all us southpaws, cack-handers and mollie dookers out there. Alas, it's also Friday 13th. I shall be especially careful [Read More]

Tracked on Aug 13, 2004 3:56:15 AM

Comments

I read all of that and comprehended at least 90%. Nifty stuff! Very cool idea.

Posted by: shane | Jul 30, 2004 12:22:28 PM

Shane, I also read all that, but comprehended only about 80%....

Posted by: taz | Aug 1, 2004 6:08:05 AM

Hi,
nice idea to get a customized color scheme. There is a different possibility to create such a color palette described in the following tutorial on:
http://www.bungalow104.com/tutorials/color_tables.html

Best wishes!


Posted by: Claudia | Aug 3, 2004 7:21:13 AM

Thanks, Claudia - what a great site! I've added it to the linkblog

Posted by: taz | Aug 5, 2004 5:20:27 AM

Hi Taz, I love your site so I just linked to you.

This is a fine way to work with color, especially with one main photo. I usually find colors instinctively, but often based on the main image. I'll try your method soon. Thanks.

Posted by: Marilyn Langfeld | Jan 22, 2005 5:50:52 AM