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

A Tip or Two on Making Patterns

This morning I had an email message asking about tips for creating tiles, and I thought it might be useful to publish the information here. These are the main tools I use: Many of Photoshop's regular plugins, but especially the "Distort" set; Sandy Blair's unspeakably useful Simple Filters; VanDerLee's "Unplugged" collection; Cybia's Alphaworks; and a set called "DSB Flux" from a group called "Digital Showbiz" that no longer seems to be with us. You can see the various Flux effects illustrated here, and if you search "DSB Flux download" you should be able to find it on the web (if not, drop me an email). I use other plugins sometimes, but these are my stalwart companions.

I also play around with any and all pattern generators that I find. Several of them are listed on my linkblog. Often I begin with a portion of an image that I like and then try to create some sort of pattern using that; some typical sources for these sorts of images would be botanical prints, illuminated pages, fabric swatches, and vintage illustration. Sometimes I spot some sort of pattern in real life that I try to duplicate digitally, and for fun I will often begin with blobs or strokes of colors that I happen to like together and see if I can make a pattern emerge from that randomness. I also use dingbat fonts as source material; something like "Pict Swirl", for example, (which you can find on this page can be very useful. I play around a great deal with layer transparency, color inversions, and sizing. I will frequently impose one pattern over another using layer transparency or the Alphaworks transparency filters. I often use PhotoShop's difference clouds to try to create a more nuanced effect when I don't want flat colors - this is usually how I get what I think of as the "silk" effect.

To risk being a little too poetic about the whole thing, for me, the process feels very much like I'm trying to "release" the pattern that I can almost see in an image. I have found that if you do it a lot, certain aspects of pattern design become like a second nature and you really don't have to think about it very much. In my early days, I would work very hard to force an image into a repeating concept, while these days it feels more like I just float along with it, following some more natural flow, which is why it's so very relaxing, and, in fact, quite meditative. Kind of "surfing the pattern", really. If I were starting this whole idea up fresh today, I would be tempted to call it something like "ZenPattern". Or something much more clever.

At any rate, if anyone has any specific questions, I will do my best to answer them; I'm sorry that my information so often has to do with Photoshop, but I'm sure just about whatever graphics program you use will have similar functions. If patternmaking intrigues you, I urge you to keep playing until you find your "voice", so to speak. Also, of course, I really want to put together a guest tile gallery, as I've mentioned before, so go on and get to work!

Posted by taz on August 20, 2004 at 02:34 AM in Patterns, Photoshop, Tips | Permalink | Comments (1) | 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

CSS Buttons with Backgrounds

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?

Posted by taz on July 16, 2004 at 05:40 AM in Tips | Permalink | Comments (4) | TrackBack

Ask, and it shall be blogged...

Just a couple of days ago I was trying to add some sort of scratchy, aged effects to an image, and yesterday Anne pointed out Designdojo on the Blogliners "Blog of the Day" section. I found lots of good things at Designdojo, including a great to link to Cameron Moll's tutorial "That Wicked Worn Look". So truly let it be said, "Ask, and it shall be blogged". Amen.

And yes, I played around with making some "itchy and scratchy" patterns... You can see them here. These are really, really big, which is exactly what I wanted for this. Big old monster patterns can work really, really well with some layouts, but unfortunately I didn't have enough time to make an example page today, maybe later. Anyway, speaking of Anne, I found this wonderfully funny link at her joint (Flash/sound alert!). Be sure to click on "music" and follow the bouncing bugs to get the full effect!.

Posted by taz on June 30, 2004 at 03:05 AM in Tips | Permalink | Comments (0) | TrackBack

Color me Illuminated!

Hey, look at this great-looking blog that is using one of my favorite background tiles! Very nice - bravo, Blue Pencil!

Today I have something just a little bit different for you that started with this very interesting site about iconography that I'm having a good time exploring. Most of the images here are from illuminated manuscripts, which I love, and so I decided to borrow a portion of an illustrated border I found here to create a repeating design. Although they will tiles both horizontally and vertically, these patterns are really meant to be used as border tiles. I've made these 120 pixels wide, but they will look great in any border space from 85 to 180 pixels wide (you can go narrower or wider - I just don't like how they look as much). Now, let me explain the tiles that you see on the download page: the first one basically keeps the the original colors of the original manuscript, including background color, the second is an intensity-inverted version, and I gave the third one a typical web-page-white background.

The next two, however, are horses of a different color, which is to say that they these are examples showing how you can key one of the basic tiles to fit in with whatever color you are using on your site. For example, for these last two tiles I imagined that I had a site that was using #336699 as a main color, so, in PhotoShop, I began with the black-background tile, and with my first color on the toolbar set at #336699, I used Image: Adjust: Hue/Saturation, and clicked on the "Colorize" box, then I went to Edit: Fade Colorize, and faded the effect to 54%. Then I did exactly the same thing with the white-background tile. Of course you will need to change the mode of the .gif image first (under "Image") to RGB.

By the way, you may have trouble opening images in the site I linked to using Mozilla - I had to switch to IE to get the nice little drop-down image box (which you can enlarge).

Posted by taz on May 31, 2004 at 04:41 AM in Art, Collections, Patterns, Tips | Permalink | Comments (3) | TrackBack

Great CSS Drop Caps

Posted by taz on May 2, 2004 at 09:55 AM in Tips | Permalink | Comments (4) | TrackBack

We have LinkBlog!

Whew! Well, here's what I've been working on today: a very simple, straightforward link blog so I can keep track of all those tasty sites that I keep losing and coming across again. I know I'm going a little whackadoody here and I'll probably end up with 25 blogs on this site before I'm finished, but this is another one of those things that has been on my wish plate for a long time, and today, just because I had an idea about how to use the patterns, I decided to do it.

This is how it went: I had the idea of putting different patterns into side-by-side strips to create a side border background, meant to be tiled only vertically (or, likewise, with horizontal strips, and tiling only horizontally, as a header or footer). Once I came up with one I liked, of course I wanted to try it out on a page design, so I just started farting around in Photoshop with a page idea for a linkblog... and liked it so much I had to go ahead and try setting it up immediately. If you want to try your hand at putting together a sideborder background, just remember to use tiles that are the same height (or else resize the ones that aren't the proper height, if possible) so that after you get all your strips in place, you can crop it to that height, and each of the patterns will repeat properly. (Of course you can use a tile that is 50 pixels high with tiles that are 100 pixels high, but if you use one that is 75 with one that is 100, the pattern is not going to repeat correctly unless you crop the whole thing to 300 pixels high.) The one I used on the link blog, for example, is 100 pixels high, and less than 4Kb; I used four different patterns that were all 100 picas x 100 picas to piece it together.

Posted by taz on April 27, 2004 at 01:10 PM in Site News, Tips | Permalink | Comments (5) | TrackBack

Pattern Effect on a Portrait

Via Grow A Brain, 26 pages of vintage postcards of "Japanese ladies and geishas" from Japanese Girl. I adore vintage portraiture.

Yesterday's moiré post inspired me to make another moiré-inspired tile, and the Japanese Girl site inspired me to experiment with using it to apply an effect to a portrait. You can see the results on this page. In case you are interested, here's exactly how I did it: First of all, I used the first, purplish tile - not the green tile (this will become clear later). In Photoshop, I saved the tile as a pattern (Edit: Define pattern - you'll need to change the mode of the .gif image to RGB first, under Image: Mode), then I created a new layer over the the photo and, using the paint bucket set to "pattern" I filled in the new layer with the repeating tile. Then I went to Layer: Layer style: Blending options, and selected "multiply". Then I used the eraser, in a large size and set to about 50% opacity, on the top layer to clear some of the pattern from the girl's face. Finally, I flattened the image (Layer: Flatten image) and flipped the color (Image: Adjustments: Hue/Saturation, + or - 180).

Flipping the color has nothing to do with the technique - I just wanted the lady's face more bluish and the pattern greenish.

Updated to say I went back to the pre-color-flip version and fiddled some more, this time using a lighting effect (spotlight) on it, and I think I like this moodier, less-formal one better...

Posted by taz on April 22, 2004 at 11:18 PM in Photography, Tips, Vintage | Permalink | Comments (0) | TrackBack