Introduction
SiteGrinder Basic supports customizable page background colors only.
SiteGrinder 2 Pro adds robust support for background graphics and tiles.
A tile is just a repeating pattern. They are very common on websites, including very narrow tiles repeated either horizontally or vertically. SiteGrinder 2 Pro supports both.
Tiles can create a variety of dramatic effects, including a border around content and strong visual column separations. SiteGrinder 2 Pro created the drop shadow effect seen on the left and right of this page using a vertically repeating tile. There are a number of demo files accessible from SiteGrinder's report pane that demonstrate various tile techniques.
SiteGrinder 2 Pro also supports "fixed" background tiles, allowing the contents of pages to scroll while the background image stays locked in place. This is a popular and dramatic effect.
SiteGrinder 2 Pro supports setting an "interior" tile to fill the background of the content area as represented by the dimensions of the Photoshop file. This tile can grow vertically as much as is needed in growing documents. (See Expandable Pages)
SiteGrinder 2 Pro also supports an "exterior" tile to fill the area between the edge of the content and the edge of the browser window when the window is open larger than the content area. Many sites use this sort of effect to place drop shadows and other visual separators between the content and browser window edge.
Because SiteGrinder 2 Pro uses the "Pattern Overlay" layer style to identify the tile, user-definable patterns are fully supported.
Select a link below for more details about these features:
- Setting a Background Color
- Setting a Background Tile
- Exterior and Interior Colors & Tiles
- Controlling How Tiles Repeat
- Tiles That Don't Scroll With Content
- Tiles That Grow with -grow Layers
Tutorial:Click here for a step-by-step tutorial about constructing an exterior-tile background
Tutorial:Click here for a step-by-step tutorial about using -grow and two tiles (exterior-tile and interiorgrow-tile)
Setting a Background Color
For sites with just a single background color behind all parts of the page you don't need to use a hint. The background color is set using the "Exterior Color" control in the "Pages" pane of the SiteGrinder window.
Tip: As a shortcut, if you have a visible single color layer filling the background of your document then SiteGrinder will assign that layer's color as the background color, but you can still change the color in the "Pages" pane if you like. To keep this layer from covering up background tile images use the -ignore hint with it.
For sites with just a background color, this is all you need to know.
If you wish to have one background color behind the your page content and a different color to fill the area between the edges of the content and the edges of the browser window, you need to use both the "Interior Color" and the "Exterior Color" controls. (See Exterior and Interior Colors & Tiles below.)
Setting a Background Tile
To create a tile that appears behind your other visual elements everywhere in the browser window, and also in the space between your content and browser windows that are larger than your content, you need to use the exterior-tile hint.
Here are the steps to create a basic background tile:
- Create a new image layer and fill it with any color.
- Change the full name of the layer to "exterior-tile"
- Apply Photoshop's "Pattern Overlay" layer style to the layer and select the pattern you wish to use. (You can create your own patterns using Photoshop's Edit->Define Pattern command.)
- Build your file
SiteGrinder defaults to repeating the tile horzontally and vertically, so your tile should be filling the entire browser window behind your other layers.
Exterior and Interior Colors & Tiles
SiteGrinder 2 Pro supports a large number of background color and tile options by defining two basic areas: exterior and interior.
The exterior is the entire background of the browser window, no matter how large the user has made it. The exterior tile and exterior color will always fill the browser window while remaining behind all of the other elements of your page design. There is always an exterior color, otherwise you'd see through empty areas to windows behind your browser! An exterior tile is optional. Opaque parts of the exterior tile will block the exterior color. If you use a pattern with transparent areas and you use gif or png for export then the exterior color will show through the transparent pixels.
The interior is essentially the "content" area as defined by the canvas size of your Photoshop document. It rests "above" the exterior color and tile the way Photoshop layers rest above other layers. An interior color will block the exterior tile and color over an area corresponding to the canvas size of the Photoshop document. Opaque parts of the interior tile will block the exterior elements and the interior color. If you use a pattern with transparent areas and you use gif or png for export then those elements will show through the transparent pixels.
Controlling How Tiles Repeat
The Pattern Overlay layer style in Photoshop always repeats tiles both horizontally and vertically, but web pages have more options.
In the Pages pane of the SiteGrinder window you can tell SiteGrinder to repeat your tiles only horizontally ("x-only") or only vertically ("y-only"), or not to repeat at all. (The primary use of non-repeating tiles is with fixed backgrounds, desribed in a section below.)
Using a one pixel tile you can quickly create dramatic effects on web pages such as the gradient margins shown below:
That effect was created using a tile that is only one pixel tall. It contains the gray gradients you see on the left and right above, and the blue background color in the middle. It looks like this:
Here it is repeated vertically a few times so you can see it more clearly:
Tiles That Don't Scroll With Content
A tile that stays in locked in place underneath and doesn't scroll with your content even as the user scrolls the browser window is called a "fixed" tile.
Click here and scroll in the window that opens to see a fixed tile in action.
Click here for the same example with the tile NOT fixed.
Use the background options in the Pages pane of the SiteGrinder window to set an exterior-tile to be fixed in place. Both repeating and non repeating backgrounds can be fixed.
Fixed tiles are created from exterior-tile layers because they are fixed relative to the entire contents of the browser window, both the interior, representing the Photoshop document, and the exterior, representing the area between the edges of the document and the edges of the browser window.
Tiles That Grow with -grow Layers
SiteGrinder 2 Pro introduced the -grow hint which allows certain kinds of layers to expand or shrink based on their content - even if that content changes in size after building the HTML and graphics.
In order to support tiled areas that expand correctly to fill these exapandable areas, SiteGrinder 2 Pro added the interiorgrow-tile hint. This is a special version of interior-tile that only appears in the vertical area of the page defined by the vertical extent of the -grow layer. Because -grow layers only grow vertically (not horizontally), the interiorgrow-tile must be the full width of the document in order to work properly.
