How did I make this site?

Creating your new site.

This site was actually very simple to make. I started with by creating a new Google Site. I left everything as default, even the theme "Ski" which is the easiest one to personalize (in my opinion).

Changing the site layout.

I went to More > Edit site layout.

  • Here I clicked on Header and Sidebar to remove them.
  • I clicked on Horizontal navigation to add it to my site. 
    •  Here I also added some fake links to my navigation so there would be more than the home page as an option.
  • I also changed the Site width: to 100%.

Finding a background image to use.

I had already found the background image on the website: Unsplash.com. They have some great free hi-resolution photographs. I chose the one below and downloaded it. I have added it to this page as an attachment.

Finding the Icons to use

The icons I used can  be found in the freebie section on Noupe.com. They were offered by Freepik.com on June 3, 2013. Here is a preview image of the icon set. You can visit the website to download you own copy of Freepik's 200 Beautiful Flat Icons.

Changing the background and adding the icons to the home page.

I went to More > Manage Site > Themes, Colors and Fonts.
Under the Entire page > Background section I selected None for Color and Wrapper image. I uploaded the background image I selected. Under Options I set Repeat to none and clicked on the checkbox to Stretch to cover.

Under the Site header > Background section I selected None for Color and then I uploaded a semi transparent .png file that I created in Photo Shop (I have added this file to the page as an attachment as well. You can also use the website SumoPaint.com to create similar images if you do not have access to Photo Shop.

I left the Options the default ones. That has the background repeat both horizontally and vertically.
The last thing I did for the design part was selecting center Alignment under Horizontal navigation > Layout

Finishing up the home page.

The last thing I did was add the icons that I had downloaded to the homepage. I did this using the basic Insert > Image option. After inserting the images you can change their links to wherever you want.

I hope this was helpful. I plan on adding more to these sites and maybe even turning this one into a template.

ą
17Qu7fK.jpg
(2433k)
Chad Griffiths,
Oct 24, 2013, 2:34 AM
ą
Chad Griffiths,
Oct 24, 2013, 3:05 AM
Comments