Friday 6 October 2017

Make your own Icons and buttons for Google Sites

Use Google Drawings to make your own Google Sites buttons / icons.

This is something that many teachers and staff at IGBIS have been doing in many of our sites and pages. It is pretty easy to do and once you get into a rhythm you can make a new icon (or change an existing one in no time at all)

Icon Template
(you can use this to start straight away)

To create the template I started with a Google Drawing and changed the page setup to a custom setup, to make the image smaller. (This is also useful when using drawings to make A4 or A3 posters, just Google the paper dimensions)

I started with an image and used the mask with a shape (click the little down arrow next to the mask icon) to turn it into a circle (you could use any shape that you like)
Then added text and our icon was made
Then I download the icon as a png file (this keeps the transparency in the background) or a jpeg (if you are happy with a white or coloured background)

You can then drag and drop the icon on to your Google Site to upload it. When you start resizing images Google sites will often crop them for you, which can be annoying. You can use the uncrop button to instantly remove the cropping.

Then link the icon to another page in your site or an external website.

It's as easy as that.

Make your next button / icon

Once you have created your first icon, things start to speed up

You have a template, you can easily change your icon by using the replace image button in Google Drawings

The good thing about using replace image is that it keeps all the dimensions and settings of your original icon. You can then change your text, download your new icon and add it to your Google Site. The workflow is pretty seamless and can be very quick.

start with the template
replace the image
change your text
download the icon
add it to the Google Site
resize and link

You could also add the drawing directly via 'insert from Drive', if you use this option you can't link from the inserted drawing, you would need to add your hyperlink into your Google Drawing and also copy the Google drawing to make more than one icon. 

I think the download as a png is a cleaner workflow.

Have fun playing and making your Google site look

No comments:

Post a Comment