colr.org

This is scrumptious: whizbang color thingy from colr.org. Choose an image you like from the web, copy the address into the "image url" box then go down and click "random from image" and you will get a color palette. When you get one you like, tag it with any combination of words or phrases. You can see my palettes by entering "taz" into the "Tags:" box and clicking "go".

You can add tags to other people's palettes, as well, and also tag the colors themselves. Greatest little color toy I've seen in ages; go have fun (and if you make some palettes, why not add a comment here to tell us what tags to looks for!)

Posted by taz on May 6, 2005 at 04:56 AM in Color, Color toys, Web tools, Web Toys | Permalink | Comments (9) | TrackBack

Make your own semi-transparent backgrounds

If you are familiar with Citrusmoon's "OverAlls" and would like to try making some of your own, I've written a wickedquick guide to doing it. Although it may look complicated at first glance, it really isn't at all, and using this method, you can create a semi-transparent tile from an existing design in about 30 seconds!

Before we jump in, I'd like to note that I've used a tile with a fairly bold design with a lot of white space for our practice session, not because this is necessarily the best type to use for an OverAll, but so that the results will be visually unambiguous in our sample images. So. Ready? Let's go...

The Steps:

In Photoshop or similar program that offers layers, open your original, opaque tile image. (If it's a .gif, be sure to change the image mode from "indexed" to "rgb").

Paste it over a background layer filled with the color of your choice. (The background is unimportant; it's only useful so you can see how your pattern looks over a color once it's been made semi-transparent.)

Add another layer over your tile image.

You are going to want to fill this layer with a checkerboard pattern of one-pixel squares. You can make this checkerboard fill on your own, but why not just use mine? Just save this .gif:

Yep, that's it - that tiny dot up there is a 4-pixel by 4-pixel square of alternating black and white pixels. Open it in your graphics program and save it as a fill pattern (In Photoshop, use "Edit: Define Pattern), then, with your fill tool set to "pattern", fill in the top layer with this tiny checkerboard pattern (it will appear grey).

Now, with your magic wand selection tool (with "contiguous" turned off), click anywhere on the layer, and you will have selected either all the black or all the white pixels.

Next, in your layers palette, turn this top layer off, and go to your middle (pattern) layer. You should still see that every other pixel is selected. Now press delete, or use "cut" from the Edit menu, and you will have deleted every other pixel from your middle tile layer.

Deselect, and you will see the color from the bottom background showing through. Now you can choose to either leave the color as it is, or desaturate it. (In PS, Image: Adjust: Desaturate).

And why not see what it looks like inverted?

Finally, turn off your bottom layer, and save as a .gif, with transparency turned on.

You can see what the resulting tiles turned out like on this page. Want to practice using the same tile I did? Here you go:

Now, go forth and have fun with semi-transparency!

Posted by taz on April 26, 2005 at 05:28 AM in Color, Photoshop, Tips | Permalink | Comments (4) | TrackBack

Mosaic Palette color tip

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 | Comments (5) | TrackBack

Basic Sperm: Essential Tip I

Ha. I was peeking into some of my folders this morning (because I seem to make a lot of things and then forget about them) and I came across a pattern I'm pretty sure I never published that I called (quite appropriately, I think) "basic sperm". This is exactly the kind of filler that often comes in handy for me when putting together certain kinds of pattern combos (it gets along swimmingly here, for example, with another wayward couple), so I thought I might as well let it spurt out into the big wide world and see who salutes it. But, also, it occurred to me that this might be a good one to use to do a consolidation of certain of the colorizing tips I've offered before, so if you are interested, continue reading. If you just dropped by for the bad puns, it's time to smoke your cigarette and go home, because I'm afraid I've shot the wad. That's it; there's nothing more. Finito. I hate to blow you off, but you'll just have to leave. (But do be sure to come again!)

It's very fun and easy to experiment with colorizing images by using hue and saturation or by playing with Photoshop's "variations", but sometimes you want an exact color, and that not always easy to get. You can use the fill bucket to fill in areas with color, but this technique often tends to result in some sort of ugly jaggies. The following are some good ways to get your exact color on black and white images when using Photoshop or a program with similar options. For these examples, we will say that the exact color you want to use is #006699 blue.

First of all make sure you convert the .gif file to RGB (Image: Mode: RGB color), then:

If you want a solid colored design on a black background, choose the tile with the white design on the black background, make a new top layer, color it in with the the color you want (with color-fill "bucket" tool), then go to Layer: Layer Style: Blending Options: Multiply.

If you want a black design on your color background, choose the tile with the black design on the white background, make a new top layer, color it in with the the color you want, then go to Layer: Layer Style: Blending Options: Multiply.

If you want a solid colored design on a white background, choose the white design on the black background, make a new top layer, and color it in with the inversion of the color you want (to find the inversion make a square of your color choice, and just invert it by using Image: Adjust: Invert.). Then go to Layer: Layer Style: Blending Options: Multiply. Flatten the image by using Layer: Flatten Image, then invert the image (Image: Adjustments: Invert).

If you want a white design on your color background, choose the black design on the white background, make a new top layer, and color it in with the inversion of the color you want. Then go to Layer: Layer Style: Blending Options: Multiply. Flatten the image by using Layer: Flatten Image, then invert the image (Image: Adjustments: Invert).

If you want a two-tone version in the color of your choice, choose the grey design on the white background, make a new top layer, and color it in with the inversion of the color you want. Then go to Layer: Layer Style: Blending Options: Multiply. Flatten the image by using Layer: Flatten Image, then invert the image (Image: Adjustments: Invert).

If you want a two-tone version with the design darker than the background choose the grey design on the white background, make a new top layer, and color it in with the color you want. Then go to Layer: Layer Style: Blending Options: Multiply.

Posted by taz on July 27, 2004 at 04:25 AM in Color, Tips | Permalink | Comments (0) | TrackBack

Site Design and the Color Blind

You know what? I really liked my old link color, it was a great sort of slightly smoky rose color that I love (it's now the hover color). You know what else? It was just about perfectly indistinguishable from the surrounding text to someone with color blindness, and that's estimated to be at least one in 20, or as high as one in 12. If you want to check out your pages to see if they are useable to someone with a color deficiency, or if you want to plan a new site with this consideration in mind, there are some really good tools and tips on the web.

This color vision page will show you how color charts look to people with different types of color blindness, and so does this special colorlab palette. And there's a great 216 color web palette showing an approximation of the hues seen by colour deficient dichromats at Exact Technologies, along with a PDF guide to designing for color-blind users. Really, really helpful is this Vischeck site that allows you to run simulation color checks on web pages or files on your own drive. It also offers downloadable Vischeck plugins. Finally, here's another great page that lets you check pages on the web, with a sticky menu that allows you to toggle between the various types of color problems; here's an applet that lets you enter hex colors for text and background and see how they would be perceived by people in three different groups of color deficiency; and here's a good page about designing with the color blind in mind.

and PS: new tiles! Slightly deco, I think, and kind of yummy... (plus - oh, yes - a box).

Posted by taz on May 7, 2004 at 07:23 AM in Color, Site design | Permalink | Comments (0) | TrackBack

Yummy Barbelith

Ooh! Pretty! I love the color-bar idea on the opening page of Barbelith, and the way the section posts carry through the category color schemes. This looks really interesting... maybe I'll beg for a membership.

Also... I've just uploaded a nice new pattern I made a couple of days ago. Very "Night of the Iguana". Or something.

Posted by taz on April 22, 2004 at 05:36 AM in Color, Site design, Weblogs | Permalink | Comments (4) | TrackBack

Colorspeak

From the indefatigable Joe Jenett, an interesting little web project called Colorspeak that allows you to share your comments and read the thoughts of others related to "how we perceive and associate the colors of the so-called safe palette". Just click any of the colors in the grid to see what others have said or add your bit.

I became rather fascinated by trying to isolate the most universally loathed hues, and then possessed by the idea of combining a few of them in a single pattern. I found that these three: 1, 2, 3, (or variations thereof) were pretty roundly disliked, and so started with this as my single point of inspiration when I made "Wallpaper Hippo". I decided that making a very subdued, demure pattern would be cheating, so - yes - it's a wee bit outrageous, but it turned out to be one of those mouthy, brassy patterns that can be lots of fun when used responsibly. Plus I think it does sort of also show that while there is definitely bad color usage, there really isn't such a thing as a "bad color".

Posted by taz on April 12, 2004 at 04:30 AM in Color, Projects | Permalink | Comments (2) | TrackBack