Checkerboard Background

(like the one used on this page)

I claim the copyright to this tutorial.  You are free to do whatever you please with what you make, but please do not take my tutorial.  Do not send the tutorial through email.  Only share my link.

This tutorial is intended for a beginner to learn about filling selections.  If you have any questions, please feel free to email me.

To do this tutorial you will also need Photoshop.  I used Photoshop CS, but I'm sure you could do this in Photoshop 7 with a few modifications.  You may download a free trial at Adobe.

Remember to save as a .psd file often!

1.    On the tool menu, choose 2 colors, one to be your foreground, one to be the background.  I chose blue and white.  If you click on the square (which is blue in the picture below), you get a color window where you can pick what color you want to use.  The blue square below is the foreground color and the white square is the background color.

2.  Open a new image, by clicking File > New.  The box below comes up.  I gave mine a name (but that is optional).  Choose your size.  Set the width and height to 200 pixels.,  Resolution = 72 pixels/inch, Color mode, RGB Color, 8 or 16 bit, Background Contents= transparent.

3.  In the top menu, click Edit > Fill

4.  In the fill box, set the use drop-down to background color.  Click Ok.  The square should be filled with your background color choice.

5.  Now we need to setup our rulers.  We will be using pixels so let's set our preferences.  In the top menu, click Edit > Preferences > Units & Rulers

6.  The preference box below comes up.  Set the Rulers to pixels.  Click OK

7.  Now you need to turn on your Ruler.  In the top menu, Click View > Rulers.  That will place a check next to rulers.  Now you should have a ruler across the top of your image and the left side of the image.

8.  Ok,  Now we need to choose the selection tool from the tool menu.  In the tool menu at the top, make sure it is set to rectangle.  To do this, right-click on the selection tool and choose Rectangle  On the right side you should see the Info tab.  Place your cursor at x=100, y=100.  I have circled where you will see this in the information tab.  This should be the exact center of our image.

9.  At 100, 100, left click on the mouse, hold the left button down, and drag out a selection rectangle by dragging up and left (past the top left corner). This has made a square that is in the top fourth of our image

10.  Now, in the top menu, click Edit > Fill.  Set this to Foreground Color.  The top left fourth should now be filled with your foreground color.  The selection ants are still there.

11.  Left click and hold somewhere in the center of that selection, and then drag down to the lower right corner (see pic below).  Notice only the selection ants are moving.  When you are sure you have the selection placed in the bottom right corner, release the mouse button.

12.  Now, in the top menu, click Edit > Fill.  Set this to Foreground Color.  The top left fourth should now be filled with your foreground color.  The selection ants are still there.

13.  In top menu, click Select > Deselect.  This removes the selection ants from the image.

14.  Now save this as a .psd image.  You can always use this image again to make another checkerboard by only changing the colors this time.  Some notes on how to do this will follow the tutorial at the bottom.  File > Save As.  Give a name to your file, and make sure the Save As menu is set to save as .psd or .pdd.

15.  Now if you are satisfied with your tile being a size 200 x 200.  You can save this as a jpeg file.  File > Save As.  Give a name to your file, and make sure the Save As menu is set to save as .jpg or .jpeg

16.  I f you want your checkerboard to be smaller, then you must resize.  In top menu, click Image > Resize.

17.  The Image Size box comes up.  Change to pixels and set width and height to same number, I used 120, but you could go smaller if you like.  Click Ok

18.  Now save this as a jpeg  file to be used as a background for a webpage or other graphic tutorial.

How to change the colors of your checkerboard tile without redoing it:

1.  Open your .psd checkerboard file that you saved in Step #14

2.  In top menu, click Image > Duplicate.  This duplicates your image.  Close the original.  Hint:  never work off an original.  That way you don't mess up your original.

3.  Choose the magic wand tool from the tool menu.  In the top tool options bar, set the tolerance = 0.

4.  Hold the Shift key down, and click on the two blue squares.  Holding the Shift Key, lets you select two areas at once.

5.  Set your foreground and background colors to the new colors that you want to use for your checkerboard.

6.  In the top menu, click Edit > Fill.  In the Fill box, choose foreground.  Now your blue has changed to the new foreground color.

7.  Repeat Step 4, and click on the two WHITE squares.

8.  Repeat Step 6, choosing Background.  Now your white has changed to the new background color.

9.  In the top menu, Click Selection > Deselect

10.  Resize (optional) and save this as a jpeg to be used as a background for webpage or another graphic.


 


Email

Tutorial Index

Home

 Please do not remove this tutorial from my site.  Share my url.