Google Sites Tip - Designing a Nice Background

Many sites, you will start to notice, have a main area with the navigation, body, etc, and a nice background that compliments the site. If you're designing in Photoshop I suggest using a page size of 1286x900.

This gives you ample room to work with a site thats going to be center in the screen. Try saving at least 150 px, equal on both sides to allow yourself a good amount of space for a real creative background. Or you can try designing your main area with no more than a 700 px width. Anything more and you may want to increase that 900 px width to maybe 1200px. Just remember try and keep a min. of 150 px on both sides.

So lets say that with your Side Menu and Main Content Area, you have a width of 900px. With your background being 150 on each side, you will make your over all image size 1200px wide.

Just remember to add guide lines that are 900px apart to keep you from designing over your set area.

You can use anything you like to make a really eye-catching background, there are plenty of stock images out there for free, see this post.

Try and use a Layer Mask of your finished background design. This will help get rid of the hard edges and make a design flow into the page. try using solid background colors that you are sure most browsers support. for some good color guides check out
they offer tons of browser friendly colors.


  1. Thanks for targeting the Photoshop crowd with this article. I really like that watch background example you made. Just goes to show that graphic can make or break a website.


Post a Comment

Popular posts from this blog

Tip - Using Social Media Buttons

RSS Feed for Google Sites!

New Google Sites Templates for 2023