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.

go here for finish view

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.

GOOD TIP:

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 http://colorschemedesigner.com/

they offer tons of browser friendly colors.

Google Sites Tutorial - Background and Favicon Design

The latest video tutorial for Google Sites web design.  Learn how to design a background using GIMP, a free photoshop-like application that has been of tremendous use to me.  There was so much good information that I had to split this into two parts.  I had some mistakes while working with GIMP because I'm still a novice to be honest, but hey we all learn from mistakes.

Part 1

Part 2

Google Sites Tutorial - Pages and Navigation

I am posting here for your enlightenment a walkthrough tutorial for creating pages and setting up a navigation bar. The video is pretty self-explanatory so I needn't provide much of an introduction.  However, I make reference to this post on designing a background with the 'blank slate' theme.

Please take note of the tips and tricks mentioned in the video, these may things even a Google Sites' users may have overlooked.

Google Sites Tip - Background Layout

When you making a background for your Google Site make sure you use "Blank Slate" as your theme.  This is the only theme I know of that support transparency.

First of all, take note of your header's height in 'Site Layout.'  If it is 125 pixels high, make a header that is exactly 125 pixels high.

Here's a great tip for horizontal navigation: The horizontal navigation bar is 25 pixels high.  So, in this scenario where you have a 125 pixel header, create a background that incorporates your horizontal navigation bar starting at 125 to 160.  That will give you some space above and below your bar.

If you don't want any space above and below make it snug 130 to 155.

Click on and save this background and use on your website.  Just make sure your header height is 125px.

 

Here's what it looks like on your Google Site

Here an example of a finished product using good background layout and design.

Working With Templates - having a problem with a public Google Sites template and you can't locate that pesky rogue logo?

Change Your Sites Logo - are you having a problem with a public template and you can't locate that pesky rogue logo? 

ok.....

there are possibly a few ways the logo or image could be attached to the top of the page

click on more actions > manage site > colours and fonts > scroll down and click on Site header background image and see if that is where the logo is



if the logo is not there ..... click on more actions > manage site > site layout > change logo and see if it is there ......



And last but not least, the template logo could be part of the background image.



If this is the case you will need to click on view, save the image to your pc and then edit the image by placing your logo over the top for example in a program such as photoshop.

Let me know if this sorts out the situation for you.....

B x