Wednesday, August 21, 2013

Beautify your blog using free Google tools

Beautify your blog using free Google tools | fraukuech.blogspot.com
My blog has been given renovation. It's a little more than my usual tweak the background, fonts and color. I've been inspired by others' beautiful blogs and have recently found myself scouring Etsy for the perfect template for me. 

I've found a lot of really pretty ones.

My problem is that I really am kind of fickle. I just don't see myself paying money for a premade template that I will probably be bored with in a few months. That $30 could be spent on much better things. Like a Julep Box!

So, I decided to see what I could do on my own.

All the "design" was done in Google Drive using a free Google web font. I use that word design very lightly because there isn't much designing going on. I made a header, an About Me button graphic thing-y, three buttons and a new signature. All of these are about as basic as basic gets.

I also added a Pinterest widget, an Instagram widget, and a Pin-It hover button. I got the Pinterest Widget Code from Code It Pretty and the Instagram widget from SnapWidget. I have no idea how I did the Pin-It hover button. Oops! I do remember it was very easy, though. :) Some Googling will get you there!

Be sure to click on over and check out my handiwork--before it changes. Oh, and let me know if anything looks wonky or messed up?

Okay, so I'm going to do a tutorial on how to make graphic similar to this one:
DIY blog design using free Google tools | http://fraukuech.blogspot.com

I broke it down into a million parts. Sorry for the tedium if you didn't need all the steps. But maybe it will be helpful for somebody?

Beautify your blog using free Google tools | fraukuech.blogspot.com
Go to Google Drive. Click on Create and then click on Drawing.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Pull up the image you want as your focal point by clicking on the little gray and white icon that kinda looks like a photo of mountains.

Also, you can edit the name of your drawing if you want, by clicking on "Untitled Drawing." I named mine "About Me," but it doesn't really matter if you change this.

Beautify your blog using free Google tools | fraukuech.blogspot.com
This will pop up. I uploaded my image from my computer.

Beautify your blog using free Google tools | fraukuech.blogspot.com
I chose a photo of me taking a photo of me in the OB-GYN bathroom at my last appointment. Classy. You can click on the corners or sides to adjust the image to whatever size you see fit.

This is where I tell you how loosey-goosey this whole process is. Google Drive does not give you an option to, say, adjust your image to be exactly 250px. Nor can you crop your image. Keep in mind that Blogger, however, will re-size your image when you drop it into your sidebar. So, if you make it too big, that's okay.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Go back to your toolbar and find the T in the box. Click on this icon.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Then, click anywhere on your workspace to create your text box.

Beautify your blog using free Google tools | fraukuech.blogspot.com
I also like to center everything. If you would like to do this, right click and scroll down to "Center on Page". Then pick horizontally or vertically. Or do each one once to make it completely centered on your workspace. 

Likewise, you can also drag the image (or text box or whatever) until you see the red lines. These either mean that you are centered OR that you are snapping into place along side another object. See, I have a red line because my image is centered and another red line because it is being snapped into place next to the text box.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Put in your text.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Too bad Arial is so boring. Want a new font and don't like any that you see? Click on "More fonts" at the bottom to access a nice array of Google Web Fonts.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Click on the one you want. 

Beautify your blog using free Google tools | fraukuech.blogspot.com
Ah, Josefin Sans. So simple. So pretty.

Beautify your blog using free Google tools | fraukuech.blogspot.com
I want white text on a field of color, so I'm doing the field first.

Highlight your text and click on the icon that looks like a spilling bucket of paint. I know you played in MS Paint when you were a kid and are very familiar with the fill tool.

Beautify your blog using free Google tools | fraukuech.blogspot.com
Next, change your font color. 

Beautify your blog using free Google tools | fraukuech.blogspot.com
Instead of making a whole new text box. I copy and paste then drag the new one to where I need it to go.

I realize that this isn't perfect. I mean, the text boxes are sticking way out past the sides of the images. But I woke up at 5am and couldn't go back to sleep. So, I'm not running on full power.

But you get the idea.

Feel free to adjust yours so it looks nicer than mine.

Beautify your blog using free Google tools | fraukuech.blogspot.com
The colors in my buttons were inconsistent when I saved as JPEG images. Not sure if it was my computer, my eyes, or operator error. But I saved as PNG images and the issue went away.

Beautify your blog using free Google tools | fraukuech.blogspot.com
And here you have the final product. Now you too can make pretties for your blog!

I know you are saying to yourself, "Tiffany, you are a professional photographer. Couldn't  you have used Photoshop or something?" Maybe I could have. I dunno. I am not well versed in Photoshop. Mike has the whole Creative Suite on his computer, so I guess I could have figured it out. But I was at my computer fiddling around and this just happened.
And for my little personal blog, Google Drive works just fine. :)
If you have any questions or comments or notice any egregious error of mine, please feel free to let me know in the comments section!

No comments:

LinkWithin

Related Posts Plugin for WordPress, Blogger...


blogger template by lovebird