Introduction
In this tutorial we will show how to use SiteGrinder's interiorgrow-tile and exterior-tile hints together to create a popular "Web 2.0" look, with a gradient background and a centered content area with drop shadow on both side.
Here is what the final result will look like:
Step 1: Create a pattern for the exterior
Open a new document. I recommend using a document size of 1024 x 768px for web pages.
The first step is to create a new layer and give it a vertical gradient whatever color you like. For best results, you want to keep your gradient in a relatively narrow area near the top of the page. This is so later, when we make another tile for the drop shadow, the two won't interfere with each other.
Use your Single Column Marquee Tool to select a 1px vertical slice of the gradient. Go to Edit>Define Pattern and name the pattern to save it. Give the pattern any name you want, ideally something easy to remember.
Note: Your tile can be as wide as you like. If it is wider than one pixel, just use the standard marquee tool to make a selection as wide as the tile you are using.
You don't want the work layer you just created to appear in the final build, so you should hide it or delete it. Another option is to give work layers you want to keep around the "-ignore" hint. That way SiteGrinder won't build anything from it even if it is visible.
Step 2: Create the exterior-tile layer
Create a new layer and fill it with a color. It doesn't matter what color as it will be hidden by the Pattern Overlay.
Expert tip: SiteGrinder doesn't care how much of a tile layer you fill, it only cares what pattern you select for the Pattern Overlay style. It is helpful to fill enough of the layer to preview in the Photoshop doc what the final page will look like. This will come in handy with the interiorgrow-tile layer.
Name the layer "exterior-tile", which is a SiteGrinder hint.
Double click the layer to open the layer style dialog.
Turn on the Pattern Overlay style and select the pattern you just created. (It will be the last pattern in the list.)
The result should look identical to the original work layer you used to make the pattern.
Step 3: Design the interior
Now we're going to create the "interior" pattern that should repeat vertically behind the expandable part of our page.
We are going to draw a white box with the shape tool taking up most of the middle of the page about 750px wide or so (or however wide you need your content area to be - careful though, you don't want viewers with smaller screens to have to scroll). You can leave some vertical space between the top and bottom of your box and the top and bottom of the document as we did, or you can make the box top and bottom flush with the document top and bottom depending on the visual effect you want to achieve.
Apply a Drop Shadow layer style to your new layer and manipulate the settings until you have an even Drop Shadow on both sides of the shape. In this example I've also used a faint Inner Shadow to give more depth.
Think of this layer as having three areas. The header, the footer, and the content in between. (We'll be splitting the background into three separate layers eventually.)
The content is the section where every row of pixels (as wide as the whole document) is identical to the previous row. That's why it can be filled with a repeating one pixel tall tile without changing in appearance.
The header is the area above the content and the footer is the area below the content. The header is much taller than the footer in this document because it needs to include the top gradient. Why? Because the tile that will repeat in the content area is as wide as the document, not just the content area. That means it would draw over the gradient if the content area included some of the gradient backed area. If there were no top gradient the header could be as short as you like.
The footer can be as tall or short as you want as long as it is at least tall enough to contain the layers that should get pushed down by the expanding content. In the example above it is very short because it only needs to contain the bottom of the box. We will add a logo to the footer that will cause it to be taller.
Except for the -grow layer with your expanding text content you can put whatever you want in the header and footer areas.
We added logos and images, as you'll see in the next screenshot.
Step 4: Make the interiorgrow-tile layer from your pattern
This time use the Single Row Marquee Tool to take a 1px horizontal selection across the entire document. Be sure that you make your selection in the content area as described above.
Go to Edit>Define Pattern and name the pattern whatever you like and save it.
Give the work layer you created in the the previous step the -ignore hint or delete it as with the exterior-tile work layer you created before.
Create a new layer, fill it, and give it a Pattern Overlay, applying the horizontal pattern you just created. Name this new layer "interiorgrow-tile", another SiteGrinder hint.
Optional: At this point the document will build right, but won't look quite right in Photoshop. The reason is that your interiorgrow-tile layer is covering up your exterior-tile layer where it shouldn't be. For an accurate reflection of the build, just use the marquee tool to crop the top and bottom off of your interiorgrow-tile layer until the filled area is only over the content section.
Step 5: Add the expandable content layer
We're just about done. All that's left to do is add a content layer and give it the -grow hint. When SiteGrinder builds, it will automatically tile our interiorgrow-tile vertically to fill the vertical section of the document between the top and bottom of the -grow layer.
Important Note: This -grow layer must be the lower-most content layer. In other words, in the layers palette it should be below all layers except your interiorgrow-tile and exterior-tile layers.
Another Important Note: If you want to have "floating footer" elements (that move up and down as the page changes length) you need to make sure that in the document window the top edge of those layers are below (y-axis) the bottom edge of your grow layer. I also added some "Space Before" to the first paragraph so that I can drag the top of the -grow layer to meet up with my header, while not having the text butt right up against it.
I've set up some guides so you can see what I mean. Turning on "show transform controls" and selecting your header and footer layers one by one with the move tool make it easy to verify they don't jut into the content layer.
Step 6: Set the tile repeat,set the page background color, and build!
Open SiteGrinder and select the "Pages" panel.
Set the Exterior Background Color to match the bottom solid color of the gradient. This will fill the area between the bottom of the tile and the bottom of the browser window.
Select "repeat-x" from the "Exterior Background Area" Tile menu. (see below)
And that's it! Your page is now set up as a kind of template that will accept whatever amount of content you put into it. I've put in some dummy Lorem Ipsum text, so my page is all set up for some real fun, and the topic of my next tutorial... using the Page Cloning feature and adding content with the -xmedia hint.
If you have DreamWeaver, open up the file in Design mode and notice how as you type into the content area the footer dynamically moves and the tile works perfectly.
Tune in next week...
