« Currently drooling... | Main | Justine Cooper | Saved by Science »

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

TrackBack

TrackBack URL for this entry:
https://www.typepad.com/services/trackback/6a00d83420dec753ef00d83485fbd669e2

Listed below are links to weblogs that reference Make your own semi-transparent backgrounds:

Comments

thanks for the handy tutorial - i'm off to have a go :)

Posted by: janine | Jun 3, 2005 1:30:15 AM

Do you know how to use Photoshop or any other program to "swirl" and image. I want to create a swirling checkerboard pattern. Thanks.

Joyce

Posted by: Joyce Hall | Feb 8, 2006 4:13:39 AM

A Very Fine Tut Girl!!!
Thanks For The Good Stuff Once Again... Keep It Up

Posted by: phil | Jun 13, 2006 12:14:04 PM

Great tutorial! Just what I was looking for.

Thank you ever so much!

Posted by: Kitty | Nov 15, 2006 11:57:54 AM