Advanced Panel Backgrounds - XSitePro Website Design

Home Previous  Next

icon_xsp

Brought to you by XSitePro Website Design Software

professional website design made easy      

 

 

 

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.

 

piece_page_without_shadow

 

piece_page_with_shadow

 

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:

 

piece_site_mockup2

 

 

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:

 

piece_site_mockup3

 

 

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.

 

piece_site_mockup4

 

 

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.

Home  Previous  Next