Cutoul Graphics

Wow. I had no idea. Ever since I put up my new opening page, I have been inundated with e-mail saying “how’d you do that”? So, here it is folks.

First of all, this effect looks best with a fine grained pattern. You can do it with a colored background, but it is not quite as dramatic. Following are examples of a solid color background vs. patterned backgrounds.

    

If you choose to use a solid color background, don’t rely on setting the background color in your html and matching the color. Make a 50×50 tile of the color you are going to use and save that as your background tile.

The first thing you need to do is to come up with your background tile. Following are the two patterns I use. Both are gray and can easily be colorized.

    

The first pattern is fine grained, the second is a little heavier grain. If you like the second pattern, but think the grain is too heavy, try resampling it down (try to 80×80). This smooths out the grains quite a bit.

So you have decided on your tile, but you don’t want it to be gray. Following are some samples of colored tiles and instructions on how to colorize them

To colorize the tile:

1. Make a copy of the original tile and work on the copy.
2. Right click on the layer button and choose “Promote to Layer”. Rename “Grain”
3. Add a new layer and drag it under the “Grain” layer, name it “Background”. Fill with white.
4. Add a new layer to the tile and call it “Color” and make sure it is on top of the “Grain” layer.
5. Flood fill the “Color” layer with a medium color.
6. Lower the Opacity of the “Color” layer with the slider until you get the color you want.
7. Lower the Opacity on the “Grain” layer if necessary.
8. Save this template as a “psp” file so you can change the color without having to recreate the tile. To change the color, just flood fill the color layer with a new color.
9. Save the tile again as a gif or jpg.

For a tutorial on creating an original grained pattern background template using layers, click here.

OK, now you have the tile you like, now the fun begins. Be prepared to spend hours at your computer!

If you haven’t done it already, download the Button/Button Font. Click here to view the font. You can download it below.

Cutout graphics all use the same formula as follows:

1. Create a new graphic large enough to hold your text/font, etc.
2. Flood fill the background layer with your pattern or a solid color.
3. Add three more new layers and call them “Cutout”, “Shadow” and “Text”.
4. On the Cutout layer, place your text with “floating” unchecked (PSP 5) or the Selection box checked under “Create As” (PSP 6) on the text tool. This will place just a selection of the text, not a text color.
5. Apply cutout filter (Image|Effects|Cutout):
   • Fill Interior with Color unchecked
   • Shadow Color Black
   • Opacity 100%
   • Blur 4-8
   • Vertical/Horizontal 2,2 to 4,4

   You now have a black “outline” of the top left part of your text.

6. Don’t deselect text and click on the “Shadow” layer.
7. Apply Drop Shadow (Image|Effects|Drop Shadow):
   • Color White
   • Opacity 100%
   • Blur 0-1
   • Offset 1,1

   You now have a white outline that defines the lower right portion of your text. If you want the cutout effect to show the background, stop at this point. If you want to add a color to your text, proceed to the next step.

8. With the selection still active, click on the “Text” layer. Flood fill the selection with the color you want your text to be.
9. Save your graphic as a “psp” file, then save again as a gif or jpg. By saving the original as a “psp” file (thus preserving the layers), you can redecorate any time you want by just filling the background layer with a new pattern or color. Your cutout always stays the same.

The cutout application in step 6 defines your image and the white drop shadow in step 8 defines the lower portion of the image. Without the white drop shadow, the lower part is not distinct from the background. Sometimes no blur on the white drop shadow works better..experiment! The above settings can, obviously be adjusted to suit your personal taste.

Now, here are some examples:

Header Graphic

This header graphic was created by placing the text in a script font, applying the cutout (in this case, the offset was 2), then the white drop shadow.

Horizontal Rules

The horizontal rule above was created by creating a new graphic 500×10 pixels with the layers outlined above. I then selected an area 495×8 pixels on the cutout layer and applied the cutout filter at offset 1,1 with a blur of 4, then the drop shadow as outlined above.

The nice thing about this horizontal line is that you can stretch it without distorting it. On this page it is stretched to 600 pixels wide.

The two horizontal rules above were created using Davy’s Dingbats “rs” with a space between repeated 6 times, the top is dark gray text the bottom dark blue text (floating checked) with a drop white drop shadow maximum opacity, no blur on both. Place the text on the “Cutout” layer and the shadow on the “Shadow” layer.

Decorations, Bullets, Buttons & Backgrounds

Following are some examples of how you can use dingbat fonts to create decorations and bullets for your pages:

Decorations and Bullets

Davys Dingbats	Davys color fill	Classified	Classified
Food	Food	Pointers	Chancery

You can download these fonts by clicking on the font you want below:

Button Button
Davys Dingbats
Classified
Food
Pointers
Chancery Ornaments

Buttons

Following is an example of how you can create buttons that look great with this background:

The buttons on the left would look great along the left border of a web page. Click here to see an example of the buttons used with the background graphic below.
To create the first button:

1. Create a new graphic with the Background layer, a Fill layer and a Shadow layer.
2. Fill the “Fill” layer with your pattern.
3. On this layer, outline the shape of your button.
4. Choose Selections|Promote to Layer (this will promote just the filled button to a layer of its own).
5. Lower the contrast (Colors|Adjust Brightness & Contrast) to a level you like.
6. Click on the Shadow layer without deselecting.
7. Apply a drop shadow (mine was black, offset 3,3, Blur 6, Opacity 100%). Adjust the opacity to the level you like.
8. Save as a “psp” file and use as a template for future buttons. Just fill the “Fill” layer with a new pattern and save again.

To create the second button:

1. Create a new graphic with a Background, Fill, Cutout and Shadow layer.
2. Fill the “Fill” layer with your pattern.
3. Select your button shape on the Cutout layer.
4. Add the Cutout as outlined above.
5. Click on the Shadow layer and add a drop shadow as outlined above.
6. Save as a “psp” file and use as a template for future buttons. Just fill the “Fill” layer with a new pattern and save again.

The bottom two buttons were created the same as the first two buttons, but using “!” in the Button font and a white drop shadow applied after the cutout on the cutout button.

Backgrounds

The following backgrounds was created using the cutout technique. Click on the graphic to see it tiled as a background.

1. Create a new graphic 200×100.
2. Add new layers for Fill, Cutout and Shadow.
3. Fill the “Fill” layer with pattern.
4. On the cutout layer, at about 130,0 pixels in (look at the coordinates in the lower left corner) draw a rectangular line down the graphic about 5 pixels wide. Add a cutout set to 2,2 as outlined above.
5. On the Shadow layer, add a right drop shadow as outlined above.
6. Now you need to cut out the middle part of this graphic since the cutout and drop shadow effect the edges. Just use the marquee tool to select from about 10 pixels down from the top and up from the bottom.
7. When you have your selection, crop your graphic (Image|Crop to Selection).
8. Save this as a “psp” template.
9. To complete the background tile, flatten all layers (Layers|Merge|Merge All).
10. Add a right border of 900 pixels with background set to white.
11. Select the white portion of the background and fill with pattern.
12. Save as a gif or jpg.