Chipotle Chill
Right about the time we began living a low-fat lifestyle, my husband bought me a cookbook “Chipotle Chile Cookbook” by Jacqueline Higuera McMahan (see cookbook recommendations) as…
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. If you want to purchase some watercolors you can easily find them at https://bondiartsupplies.com/collections/watercolour
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:
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:
You now have a black “outline” of the top left part of your text.
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.
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.
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.
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.
Following are some examples of how you can use dingbat fonts to create decorations and bullets for your pages:
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
You can download these fonts by clicking on the font you want below:
Button Button
Davys Dingbats
Classified
Food
Pointers
Chancery Ornaments
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:
To create the second button:
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.
The following backgrounds was created using the cutout technique. Click on the graphic to see it tiled as a background.