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.
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.
Well yes, yet again I have to admit I love me (is that so wrong?). And these warm, warm feelings because I made this new pattern, which is quite simply wonderlicious. Here's a .gif of a page layout idea using the lighter version (though I think the darker is my favorite). In case you want the colors on that, the background of the text area is #DDDDCC; the border between the background area and the text area is #776677; the bottom bar is #666666; the main page heading is #886611; the section headling is #888888; the text is #777799, and the menu text links are #DDDDDD. I would probably use #889999 or #888899 as the background color behind the pattern.
For lots more page layout ideas and actual templates you can use (because not everybody is as lazy as I am), go dip into the delicious stuff at Kitty's Fullmoon Graphics, then have a look-see at all the fun things from Liz at Migraine Designs, a site I found via the kind and lovely Ethereal Code.
Update: You can have a look at that example page laid out in CSS by our dear headsfromspace here.
Happy Sunday, bunnies. I have three new pattern sets for you - 11 designs altogether, here, here and here, and I've thrown one of each of them into a brand new example box that I think looks pretty sweet (and yes, it's all CSS!).
I also wanted to point you at a rather amazing site that I stumbled across: The Art Millennium has "more than 15,000 pictures and overviews of about 1000 artists" put together in various interesting ways, along with other information, like a dictionary, glossary and history of art. Looking at the site map will give you some idea of all the nooks and crannies here, and it is sort of labyrinthine. Don't go in expecting a superefficient whip-it-out database, this is really better approached as surprise invitation to an exploration of a hidden-away, private museum where you can wander the halls at will, peeking into any of the rooms that interest you. I was just waiting for someone to offer me a cup of tea at the end.
I've been dallying just a little bit more with our faux i-frames in order to show you some quickie examples of using an image on the side, instead of a repeating pattern, then the same idea expanded to fill the horizontal space, and, finally, this same stretched layout with a pattern on the background.
Looking for something to while away a little of your Saturday? You could go view a whole bunch of cool Flash animations from Russian artists. My favorite so far is "Los dias sin dias" from Scary Dolls. And I've been having a great time checking out Little Dead Gyrl's Shelter for Misfit Dolls (linked from Scary Dolls); don't miss the paper dolls and the links, and, well... just everything.
Okay! I finally had the chance to get around to playing with Beforethedog's CSS I-frame Mimic technique. It looks and acts like an I-frame (which, as we know, is just fun, fun, fun), but all your content is right there on your page. I wanted to experiment with BTD's background idea, which I did here and, with a touch more color, here. If you want to fiddle around with this layout, you'll just need to experiment with the parameters a bit to see how it works, but be sure to view your pages in as many browsers as possible, because IE and Mozilla, for example, handle things just a bit differently, and I needed to adjust here and there to make it look good in both. Unfortunately, I don't have a mac, so I haven't been able to see it in Safari, and the iCapture screenshot service is disabled at the moment, but I will check back there later. Also, I really need to download Opera... Ah, well.
I designed the tiles specifically for this layout (though just about any background, if it is small enough, will work); you can get them here.
Update: It turns out you can learn a lot from a head from space. This one let me know about an alternative Safari screenshot service, and this faux i-frame layout looks fine, it appears. Thank the Head.
Go have a look at the fabulous block print illustrations of Walter Anderson (1903 - 1965), an artist who was born in New Orleans and lived in Ocean Springs, Mississippi. When I lived in New Orleans I travelled to Ocean Springs to visit the Walter Anderson Museum and Shearwater Pottery, the outlet for the work of the three Anderson brothers, where I bought several wondrous items - only two of which have survived the years and helterskelter moves that have passed since then. The whole Walter Anderson site (with even more artwork) starts here.
And on our menu today, the blue plate special is Cloudsign, a group of three nice patterns that actually share exactly the same design, but with different, interesting shading variations. I think these are fun to stack together, and I've made an example square that doesn't do anything but show how the tiles sort of "nest" together. And guess what - instead of just making a big ole .gif to show the example, I finally took the two minutes to set it up in CSS. From now on, I'm going to try to present most of the example squares this way. So, if you count this, in addition to the fact that all my dishes are washed and all my clothes laundered at the moment, it proves I'm not a total slug, right? ...Right?
I found a great site for West African "Adinkra symbols" and their meanings. You can browse the index to see all the symbols, or use the search field to find icons related to "love" (the site's most popular search term), for example, or "death", which, quite interestingly, is in the form of a ladder.
Not Adinkra, but maybe a little reminiscent of stamp/fabric patterns are some nice little backgrounds I made last night (whilst staying up much, much too late - like "here comes the sun"-late).
Where does the time go? It would probably take me at least a couple of weeks of posting every day to catch up on all my backlog - and that's just the patterns... The fun bookmarks are whole 'nother story. Yet, still I continue to make more - and I love this new one so much I just had to go ahead and trot it out: my slightly eerie Sunday Garden, with an example layout .gif here, and a deliciously smoky, ashy version, Dark Sunday (and the .gif example).
And to dig into that feast of bookmarks just a bit, snack on these yummy collage-style images by Darryl Baird at the fantastic Photo-Eye photographer showcase - a site that you can really sink your pointy little teeth into, you ravenous, raving linkmonster you.
Yes, I've been playing hooky for most of this week, but it's been a weather-inspired phenomenon. It's been miserably, suffocatingly hot lately, but this week has been absolutely beautiful - coolish and breezy and unbelievably bright and glittering, and Mr. CitrusMoon has been curiously unbusy, so we've been having fun barbecuing and walking out and about. Also, I have war wounds. The handle of my stovetop espresso maker decided to fall off just as I was pouring a cup of boiling hot black stuff, and now I have burns on my leg, my ankle and my wrist. Ouchy. I always knew the caffeine would get me in the end.
But, I haven't forgotten you! Not at all. I have something kind of fun in my goodybag just for you: css buttons with backgrounds. You control the height by increasing or decreasing padding; over here you see same buttons with a different background, a wider width, and more vertical padding. And here's another idea for little box buttons with backgrounds. Control the size by increasing or decreasing the font size and the padding in the css .button parameters. Kinda cute, huh?