How do I make a Checkered Effect?
Have you ever wondered how web designers make those graphics with a checkered overlay? Paint Shop Pro doesn't have brushes, textures, or patterns that can create for you a checkered effect. So how do they do it? This tutorial will teach you how.


Required Programs:
1.Paint Shop Pro (or any other paint program w/ layers)
Step #1: Open a new Transparent Image
Did you know that a blank transparent image in Paint Shop Pro reveals a gray and white checkered background? Well, this is what we shall use to make our checkered effect. First of all, open your picture in Paint Shop Pro. How big is it? Once you figure out it's dimensions, open a blank new transparent image with those same dimensions.

This is the image I'll be placing the checkered effect on. It is 236x178. Therefore, my blank new transparent image would be 236x178.
Step #2: Take a screen shot
With the transparent image in clear view, press Prt Scr on the keyboard. It is located on the right-hand side of the F12 key. Note: Nothing will appear to happen but what you just did was take a screen shot of the entire screen and it is now stored on your clipboard. Next, go to Edit > Paste > Paste As New Image. This is what you should have:



Now what you want to do is, using the Selection tool (), make a selection around the transparent image in the screenshot and then go to Edit > Copy. Next go to Edit > Paste > Paste As New Image. This is what you get:

Note: Be sure NOT to confuse the copy of the transparent image with the original transparent image. Close the original NOW if you haven't already in order to avoid this confusion.
Step #3: Colorize the Checker
If you want, you can go to Adjust > Hue and Saturation > Colorize in order to change the color scheme of the copy. Click here for more on colorizing. I colorized mine so that it looks like this:

Step #4: Paste the Checker over the Image
No lets copy this image again. Bring back up the picture you want to put the checkered effect on. Go to Edit > Paste > Paste As New Layer... The copied checker should cover the image completely. We don't want that. We want to be able to see the picture beneath it. Open the Layers Pallete if it isn't open already. Go to View > Palettes > Layers or press F8 to open it. On the pallete there should be two or more layers if you followed this tutorial correctly. Next to the layer name there is an eye (). Click on an eye and you will notice that it hides the corresponding layer. Click it again and the layer will reappear. Use this to find which layer has the checkered copy. On the layers pallete there is also a 100 next to each eye. For the layer with the checkered image, change that 100 to 50. 100 symbolizes 100% opacity, while 50 represents 50% opacity. Here is the result:

Layers Pallete:
End results
Result (After 40% Opacity):



Result (After 40% Opacity & Erasing Checker covering her face):




Tututorial by: Nika
Last Modified: 07/31/08.




October 18 2008: Added 6 New Transparent PNGs!

October 4 2008: Added One New Div Layout and 2 New Transparent PNGs!
6 New Transparent PNGs

New Div Layout

4 New CSS Templates

Valid HTML 4.01 Strict Valid CSS


eXTReMe Tracker

Users Online
AFFILIATES