Custom Page Settings in Google Apps

One thing that is often overlooked in the Google Apps suite is the option available to you in the page settings menu option. This is a rundown of your options

In Google Docs:

Click File>Page settings:

• Change the orientation of the document (Portrait or Landscape)
• Change the page size to a preset size for different purposes (tabloid, legal, etc.)
• Change the margins of the document
• This one is really important to me because I prefer narrow margins on all of my docs
• Pro-Tip - Set the page settings that you like as the default and each new doc that opens will follow that default setting!

In Google Drawings:

Click File>Page setup

• Change the size of your canvas to preset sizes
• Customize the size of your canvas using a custom setting:
• This is great for creating headers, website icons, buttons, etc. 
• You can pick whatever size you need for your project

In Google Slides:

Click File>Page Setup

• Change the format of your screens for different projectors (4:3, 16:9, 16:10)
• Customize the size of your slides in custom settings using Inches, centimeters, points, or pixels

Chrome Extension Review - Ruul

Ruul is an extension that acts as ruler and measuring tool for webpages in Chrome. What I love about this extension is that it allows me to measure banners, pictures, and cover photo areas so that if I am working in Google Drawings, Adobe Illustrator, Pixlr Editor, etc., I can find out the exact dimension of the area that I am want to fill with a photo or graphic. 

When you launch the extension, you have a few options to add a "ruul":

• Resizable  - Allows you to create a box to  measure a specific area in inches, centimeters, or in pixels.
• Add a ruler - Select one of the predesigned rulers to put on a web page.  The measurements of the ruler are in pixels.

I have used this in finding the measurements for headers on Google Sites, or cover photos in G+.  I can see the use of this in yearbook and newspaper classes when measuring out sample template ideas, in geometry classes who are blended and working a lot online through Google Docs and Drawings. 

Here's a little .gif to see the functionality:

Shift Button Magic: Drawings

The Secret of the Shift Button:

In Google Drawings, you can resize a shape, text box, or image fairly easily. Just use the points on the outside of the bounding box to resize the object in whatever way you want.  However, if you'd like to keep the item in scale, you can press the shift button while resizing with the corner points. This also works across into Docs and Slides when you are working with text boxes. 

Also, if you are rather OCD like myself, you hate drawing a line and noticing that it isn't quite parallel or perpendicular to the grid.  The shift button also allows you to draw lines that will always give you perfectly parallel line. 

Simply start drawing your line, and hold the shift button as you finish your line. You will notice that the line will only go straight across, not up or down just a little.  This will also work to resize a line, or if you drew a non-parallel line, you can hold shift and adjust it as well. 

Now let's say that you are trying to find the exact same angle every time. As you are holding the shift button and moving a line, it will automatically move in 15 degree increments. You can see my example below (I am holding down the shift button the whole time as I move the line):

Use Drawing as Button on Site

The beauty of Google Sites is that it works seamlessly with the apps in Drive. However, when you insert a drawing, that's all you do: insert a drawing. If you want to add the functionality of linking to another page, then this is the post for you.

The best thing about using Drawings to make buttons for a site is that you can make the buttons in whatever shape, color, doodle, etc. that you want.

Something to keep in mind:  we are going to be making the drawings into .png files, so the checkered background will remain transparent, but it will save as whatever size the canvas is. If you'd like to change the size of the canvas, in the lower right hand corner of the canvas, you'll see some lines that you can drag the canvas to a size you'd like.

When I inserted these buttons on to my Google Site, I kept the canvas at the default size because I felt that it added some spacing in between the buttons that helped it not look too busy.

I am going to demonstrate using the button that I created in my previous blog post about adding shadows. And if you would like to see my finished buttons and site layout, go to www.teacherubow.com

Saving the Drawing as .png

Once you have your button created in Drawings, you need to download it as a .png file:

Once you have the .png file downloaded, now you can work on inserting into your site.

Insert button onto Site

To insert it onto your site, you first need to edit the page you are on (Click the pencil in sites, or keyboard shortcut - e)

From there you you have three options for when you insert an image:

• Click insert image and upload
• Click insert image and provide URL 
• Click on drive, and choose an image in your drive. 
• If you choose an image from your drive, you'll need to make sure that the sharing permissions are set so people can view the image, otherwise it will not show up on your site. 

Design and Sizing of Button

Now here comes the part where you decide how you want things to look. For my site, I had about 7 of the same size buttons that I wanted to link to other things.  If you are going to add more buttons, you'd probably want to change the size. But this is all up to you. 

Just click on the icon, make it a size that you'd like, and position it where you would like.

Creating an Active button with a link

Now you need to direct the button to whatever link you would like. When you click on the image, there is a button for you to change the link. That is where you need to be to redirect when a person clicks the button.

Since this button says email me, we'll create a link to send an email using the command: mailto:insertemail@gmail.com

Don't forget to save your changes in Sites. Unlike Docs, Slides, and Sheets, your changes are not automatically saved. 

Shadows in Google Drawings

Create a Shadow in Drawings

I was recently trying to create some buttons/icons for my Google Site, when I came across a stumbling block. How can I create a little definition for my icons with a shadow?

Here is a very simple way to add a drop shadow to a shape in Google Drawings:

1. Create the shape and choose a fill color. 
2. Copy the shape (Ctrl-c/Cmnd-c)
3. Paste the shape (Ctrl-v/Cmnd-v)
4. Change color of the pasted shape to your desired shadow color
5. Re-order to place it behind the shape
6. Move the shadow shape to the left/right & top/bottom of the shape to create desired shadow
7. Add any words or illustrations that you want for your buttons
8. Voila! You have a shadow. 

Here's an image from my site with the buttons I created using this technique in Google Drawings: