Background Tile Tutorial 1:
Making an infinitely tall border tile
(like this page's drop shadows)
Hints demonstrated: exterior-tile, ignore
Requires: SiteGrinder 2 Pro

Introduction

Our goal in this tutorial is to create a Photoshop document from scratch that produces pages with shadowed borders like the ones on the left and right edges of this page.

On the way we'll discuss:

  1. Why use a tile instead of just a big background graphic
  2. Interior versus Exterior tiles and colors
  3. A shortcut for setting the background color
  4. Using Photoshop's Pattern Overlay layer style

What is a tile?

Tiles are rectangular images that are repeated horizontally, vertically, or both, to create a pattern.

You can manually create patterns of smaller tiles in many different ways:

Copy and paste

Obviously you can manually copy and paste to repeat a rectangular image (the tile) over and over you can build up a pattern like this:

Horizontal and vertical gradients

You can produce tiled patterns using gradients.

Can you see the individual tile in the gradient below?

How about in this one?

Here are the two tiles from the previous examples, magnified so you can clearly see their pixels.

This is a blow-up of the one pixel wide tile:

This a blow-up of the one pixel tall tile: .

We didn't use these tiles to make the two graphics, we just used a Photoshop gradient fill set to be exactly vertical or exactly horizontal. It just so happens that such gradients (horizontal or vertical) are made up of identical one pixel wide or tall slices, making them equivalent to tiled patterns.

One pixel tiles are often used on web sites because they are so fast to download. Generally one pixel tiles, as in the previous examples, are only repeated horizontally or vertically.

Constructing a Shadow Tile

Our goal is to create a Photoshop document that will use a one pixel tall tile to create a continuous drop shadow on the left and right sides of our pages. This kind of tile is generally used for pages that are horizontally centered, so that's what we'll design for.

Step 1. Create a new document

This document will be smaller than a normal web page to facilitate screenshots.

  1. Create a new RGB, 8bits per channel document that is 500 pixels wide by 600 tall
  2. Name it "background-ignore". SiteGrinder will initially use this layer to pick the background color for our pages because it is the lowest in the document, but we add the -ignore hint to make tell SiteGrinder not to make an actual graphic from this layer.
  3. Press "M" to select the marquee tool
  4. Select all (control-a or command-a)
  5. Select "Fill" from the edit menu
  6. From the color menu select White
  7. Click OK

Step 2. Design the tile in a new layer

Now we'll add a layer a little narrower than the document and give it a drop shadow. We'll use this to create our one pixel tile. We'll also employ the tile to fill the area between the shadows with a color.

  1. Select "New->Layer" from Photoshop's "Layer" menu
  2. Name the layer "tile source-ignore". We'll use this layer as a work layer to construct the tile but it won't appear in the final build, so we add the -ignore hint.
  3. Select all using command-a(Mac) or control-a (win)
  4. Choose "Transform selection" from the Select menu
  5. Using the handles on the left and the right, drag the sides of the selection about 30 pixels toward the center to shrink the selection horizontally.
  6. Click on the foreground color to choose a new one and pick a light gray shade
  7. Select "Fill" from the edit menu and choose foreground and click Ok
  8. Select "Drop Shadow" from Photoshop's Layer->Style
  9. Adjust the following settings (Angle: 90, Distance:0, Spread: 10, Size:20)\
  10. Click Ok

At this point we have a background graphic with shadowed edges that looks like this:

You may wonder why we need to bother to create a tile since this background graphic looks like it will do what we need.

It's true that if this were a design for a site where every page was the same size with the same border we could stop work on the background now. But we would miss the two chief advantages of tiles:

  • Creating this effect with a tile rather than a large graphic will download much faster
  • A tile can fill different areas as required, while a static graphic is always the same size

Step 3. Create the tile using "Define Pattern"

Notice that except at the very top and bottom where the shadow falls off, the shadows look a lot like vertical gradients similar the the brown-green gradient shown in "What is a tile?" above. We can use this fact to create a one pixel tall tile that is as wide as the document.

  1. Select the rectangular marquee tool
  2. Drag to create a selection across the middle of the shadow that is as wide as the document but only one pixel tall
  3. Select "Define Pattern" from Photoshop's "Edit" menu
  4. Name the pattern "Edge shadows"
  5. Click Ok

We have now added a new pattern to the list of patterns available to Photoshop's "Pattern Overlay" layer style. Since "Define Pattern" picks up pixels from all visible layers we have the white background from the first layer and the drop shadow and grey background from the second layer.

Step 4. Add a new layer and apply our tile to it

  1. Create a new layer and name it "exterior-tile". (This is a special SiteGrinder 2 Pro hint. Unlike some hints that are only at the end of layer names, this hint needs to be the full name of the layer. All three tile hints are like this.)
  2. Select all with the rectangular marquee tool and fill the whole layer with any color you like. The pattern we select will replace the color.
  3. Select "Pattern Overlay" from Photoshop's Layer->Layer Styles menu.
  4. Click on the "Pattern menu" and find the pattern you defined above. it will appear at the end of the list.

  5. Click Ok
  6. Hide the "Tile source-ignore" layer in the layers palette. You could delete this layer or now or keep it around in case you want to alter it later and rebuild the tile.

The document should now look the same, but the new layer with the Pattern Applied is on top and looks like the layer we copied the tile from:

Step 5. Add some content and build

Now we just need to add some actual content to the page and build it to see how our tile works.

  1. Select the text tool
  2. Click and hold down the button near the top left of the grey content area
  3. Drag to the right side of the grey content area and about 30 pixels above the bottom of the document to create a new text layer like this one:

  4. Type or paste some text into this layer
  5. Name this layer "some content-text"
  6. Save the document and open SiteGrinder 2 from the File->Automate menu
  7. Make sure there are no errors in the report. If there are, close SiteGrinder, fix them, and return
  8. Select the "Pages" tab
  9. Set the exterior tile to "repeat-y" so it repeats vertically but not horizontally
  10. Click the build button to build a preview

When the preview opens notice that the tile extends to the bottom of you browser window no matter how tall you make it. This is because we used an exterior-tile. If we had instead used an interior-tile then the tile would only extend to cover an area the size of our Photoshop document.