Font Fun: What Font Tool

I've been a little absent here {okay, maybe a lot! But we've been super busy at Clover & Violet}, but thought I'd drop in and share one of my favorite new tools.  It's called "What Font" and it allows you to see what font is being used on a website (as long as the font isn't on an image, of course).

All you have to do is drag the "What Font" button to your bookmark bar {similar to the "Pin It" button on Pinterest}, then when you run across a font you're curious about, just click the "What Font" and then hover over the text. Here's an example from the Clover & Violet blog:

And one more from Rhonda, Quilter in the Gap {since I recently set her blog up on Genesis, I thought I'd show it too!}:

I really love this little tool to help find some great fonts that can be used in titles, and not just on images.  Remember how I posted about Google Web Fonts? Well, here's a chance to discover some great fonts and use them in your titles!

using google web fonts in a blog post

I just discovered Google Web Fonts...who knew one could integrate fun, free fonts in a blog post?  Curious what I mean?  The pink words above are a picture, but the words below are actually typed into this post {both are the font Satisfy}:

Testing, testing, testing...

Pretty neat huh? I started with this tutorial.  Then, after adding the font to your blog, if you want to use it in a post add the following code right above the ]]></b:skin>

}h1 { font-family: 'Satisfy', cursive; font-weight: 400; }

But substitute the name for the font you're using!  Then, when typing a post, add this bit of code around the words that should be the web font:

<div style="font-family: 'Satisfy',cursive;">Text Here</div>

Then adjust the size of the font just as for any other text!

And voilà, custom text within a post!

Fun, huh?

how to make a transparent image {tutorial}

As a precursor to my watermark post, I'm going to show you how to make a transparent image to use as a watermark or signature!  I'll be using GIMP, a Photoshop-like-program that allows working with transparencies and layers.

First, open a new, transparent, image {I like to adjust mine to 300 px/in}:

Then chose the "Font Tool" and select a font {I'm using Sketch Rockwell}:

Type your text and adjust size and color if desired {since I'm making a watermark, I'm choosing white}:

Add other images/doodles {I'm using the letter "I" from Pea Betsy's Doodles font, then choosing "Flip Horizontal" to change the orientation}

Adjust positioning by using the "Move Tool" {I also freehanded a dotted line using a brush I made with adjusted spacing}:

When all layers are in position, crop image to selected size:

Then, this is where the newest GIMP is a little odd, choose "Export" to save the file as a ".png", this will allow you to keep the transparent background:

Type the name for the file followed by ".png" to save the image and you're done!

I'll be back tomorrow with how to add your new watermark to your images!

a bit about blogger, flickr, and photos

I've been blogging for a while now, and even though C&V is only a few years old, there are a lot of new {fabulous} blogs popping up all over the place.  After an e-mail conversation with one such newer, lovely blogger {hi Jenelle!}, there are a few things I wanted to share with you about blogging your pictures on blogger.

• You can post photos from your Flickr to your blog, it's super easy!  However, those pictures must link back to their Flickr page {read more here}.  So, you cannot use Flickr to host images like blog buttons.
• You can host images directly on your blog for buttons!  The easiest way to do this is to start a new blog post, upload the image, then grab the image code from the HTML of that post {the link that follows "img src="}.  Once the image is uploaded it will stay in your Picasa Web Albums until you delete it, even if you delete the blog post.
• Picasa, and therefore your blog, have an upload limit of 1024MB...if you use a newer digital camera, it won't take long to fill this.  However, if you join Google+, you can upload unlimited photos smaller than 2048px x 2048px {more here}.

I hope this helps clear a few things up.  I'll have some more photo tutorials soon, including great free programs to help you enhance your photos!  And, because every post needs a picture, here's my cute Norah:

I made a new watermark to go with the new blog design...would you like a tutorial on that?, you can find that tutorial here!