(NOTE: THIS IS BETA DOCUMENTATION AND IS THEREFORE INCOMPLETE AND SUBJECT TO CHANGE. PLEASE NOTIFY HELP@MEDIALAB.COM OF ERRORS OR SUGGESTIONS)
A tile is a repeating graphic pattern that fills some designated area, almost exactly like Photoshop's Pattern Overlay layer style. Tiles are primarily useful for two things:
- Creating big visual effects with small, fast-downloading graphics
- Filling areas that change in size based on the size of the web browser window
Using tiles 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 gradient and the blue background color. It looks like this:
We'll repeat it vertically a few times so you can see it more clearly:
Adding Tiles to Pages
You tell SiteGrinder Pro what tiles you want to use with the Pattern Overlay layer style, and the appropriate hint.
There are three tiling hints for the three different types of tiles SiteGrinder Pro supports:
- interior-tile
- exterior-tile
- interiorgrow-tile
The basic steps for adding a web tile to a page are as follows:
- Define a pattern in Photoshop (unless you wish to use an existing pattern)
- Create a new image layer any size and name it after the type of tile you wish to create
- Add the "Pattern Overlay" style to the layer and choose your pattern from the Pattern menu
- Open SiteGrinder Pro and optionally choose the repeat style in the Pages panel. The Photoshop Pattern Overlay style always repeats the pattern both horizontally and vertically. On web pages you can choose to repeat horizontally (x), vertically (y), or both (x & y), so SiteGrinder Pro allows you this choice.
- Optionally select a compression preset for the tile in SiteGrinder's Compression panel
- Build your site
Keep in mind that tile layers can be any shape or size. Unlike most layers, SiteGrinder is only using the -tile layer layer to find out what kind of tile you want and what pattern it should be, NOT where it goes or how big it is. Location of the tile on the final page is based on the type of tile and the settings you give it.
It is often useful to size and position the layer so that it looks exactly as it will on the built web pages, but it isn't necessary.
There can only be one kind of interior-tile per page and only one exterior-tile layer per page.
Interior vs. Exterior
SiteGrinder allows you to define two basic tile types, interior and exterior. It is important to understand the difference.
An exterior tile works similarly to the web page background color. It fills the entire web page background behind everything. It is covered wherever there are other elements, including other kinds of tiles, but it appears everywhere else.
An interior tile fils the "content area" of your page and is behind everything but the exterior tile.
If your page is centered then SiteGrinder Pro automatically determines the content area to be the rectangle that contains all the visible layers on your page.
If your page is not centered then SiteGrinder Pro considers the content area to be the size of the Photoshop document.
Galleries and Pages