Often you can lift a relatively basic layout substantially using some simple background effects.
We’ll take a look at two simple effects:
Shadows:
The below images show a ‘before and after’ comparison of a simple page.
As you can see, the simple drop-shadow affect applied to this page helps ‘lift’ the page and give it an increased prominence on the screen. This effect is often used to very good effect on sales letter pages.
Instructions:
Step 1 - The simple technique used to create this effect is to use your third-party design package to create a simple page, featuring a header graphic, footer graphic and left/right panels as required.
Here’s an example of a simple design:
Note – the background for your ‘page design’ above should be the exact same color as you will be using for your page layout in XSitePro. In this example a gray color has been used – this gives added emphasis to the page content.
Step 2 - With the design selected, apply a drop shadow effect to the whole page design. Your page will now look something like this:
Step 3 - Now, what you’re going to do is cut out the following ‘pieces’ from your design. Each piece has been labeled to indicate what we’ll be using it for in our page layout design, back in the XSitePro Page Layout Tab.
Note: The left/right panel pieces should be the exact same width, in pixels, as your left/right panels in your XSitePro Page Layout.
Step 4 - Back in the Page Layout tab, in XSitePro, the header and footer can be selected straightforwardly, using the background selector in the Page Layout settings for their respective panels.
Note: Ensure that your Page Footer’s height value is equal to the height (in pixels) of your footer graphic that you created, above.
Step 5 - Select the image ‘pieces’ you created for your panels. The design should now resemble the ‘whole’ page complete with the shadow effect.
That’s it! This is a simple, but very effective technique for improving a basic layout.