Homeschool Posts

Friday, March 15, 2013

Windows Live Writer Tutorial: Snazzy Pictures

livewriter tutorials for bloggers at Homeschooling Hearts & MindsSince I sometimes find myself answering questions from fellow bloggers on the ins and outs of using Windows Live Writer, I’ve decided to put together a few simple tutorials on some of my favorite features.  This first one will be on the part of a blog post that convey so much meaning without a single word:  pictures!

When I started Homeschooling Hearts & Minds 4-1/2 years ago, one of the things that really, REALLY bugged me about Blogger’s editing platform was the lack of control over what my post would end up looking like.  I’m a very visual person and I wanted to know what my post would look like before I hit “publish.” With Blogger (at that time), even with the preview feature, that couldn’t happen.  The preview never looked like the published post (to this day it’s still iffy).  And it drove me nuts that sometimes bullet points would disappear behind pictures.  Thankfully, I eventually found Windows Live Writer and formatting my blog posts got a whole easier.  LW has the added bonus that I can work on a blog post without being online (great for my wandering eyes) and it’s compatible with a number of blogging platforms, including Wordpress.   

When I saw what I could do with pictures in Live Writer, there was no going back to Blogger’s editor.  Now Blogger’s editor has changed a lot in the past 4 years, yes, but it is still limited. 

WARNING:  I am not a computer guru or a LW expert, I learn by doing and simply like to share what I learn.

Adding a Picture to Your Post from Your Computer

Let’s take a look at how to add a picture to your post in Live Writer. 

Open up a new post in LW and make sure you are in the “Home” tab.  livewriter home toolbar

  1. Look to the right side of the toolbar for the “Picture” icon.livewriter home toolbar closeup picture
  2. Click on it and you will see a number of options.livewriter home toolbar closeup picture options
  3. This time, let’s select “From your computer” (we’ll check out the other options at some point in the future). 
  4. A window will pop up where you can locate the picture you want to use on your computer.livewriter home toolbar closeup picture options window
  5. Find your picture, double click and here it is!

013

Oh, yum!  S’Mores!

 

Cropping and Resizing Your Pictures

Now that we have our picture, we can format it just the way we want.  You’ll notice that you when you have a picture selected, a “Format” tab appears at the top of your toolbar.  If it’s not already selected, click on that tab now.

livewriter picture format toolbar

On the far left, you will see cropping and sizing options.  Just for fun, let’s try the crop feature.

livewriter picture format toolbar

Click on the “Crop” icon and a little window open will pop up with your picture.

livewriter picture format toolbar crop window

You can rotate the frame in this window (that can also be done straight from the toolbar), but you have a number of cropping options.  If you want to use the “rule of thirds,” select “show grid.” 

livewriter picture format toolbar crop window optionsClick the “Custom” button for various cropping sizes, or simply click and drag on the corners until you have the crop you want.

livewriter picture format toolbar crop window crop

Ooey, gooey-ness.  Yep, that’s what we want.  Click “OK.”  NOW!

013

I don’t know about you, but I think that size isn’t getting the ooey-gooey-ness across, do you?

livewriter picture format toolbar

Right next to the “Crop” icon, you’ll find sizing, width and height in pixels.  Notice the “Lock aspect ratio” button?  This will keep you from accidentally distorting your picture by disproportionally changing the width to the height (I keep mine locked).

You also have the option of choosing from preset sizes and can even change what the default sizes are (options, I love options!).

livewriter picture format sizing

Many bloggers have a few set sizes they will use for most of the pictures they use in posts, so once you find some sizes you are happy with, you may want to preset them.  Let’s make our S’Mores BIG.

013

Yes!  That’s it!  Hmmm, they’re a little off-center.  That’s easy to fix.

 

Aligning Your Pictures

Back towards the left of your picture format toolbar, you’ll see this doo-hicky  for alignment (yes, that’s a technical term).

livewriter picture format toolbar

Click on that and play around a bit, there are options for making your picture inline with text (this is handy for lining up a row of pictures, we’ll get to that in a future tutorial, maybe), right or left alignment and centering.  Let’s go ahead and center this one.

013

After the alignment doo-hickey, you’ll see options for “margins.” 

 

Adding “White Space” Around Your Pictures So They Pop

Margins are the amount of  white space around the picture. 

009The default for margins on all pictures in Live Writer is zero (it is in Blogger, too). 

  • A “zero” margin on all sides looks like this when you have a picture left-aligned.  
  • It’s OK, but the picture tends to look like it’s practically on top of the words. 
  • And what would you say if I told that these few paragraphs were actually bulleted, but you can’t see the bullet points because they are behind the picture?

Doesn’t look very professional, does it?  You can easily use the “margins” in Live Writer to add the necessary white space that will make your pictures pop and unmask your bullet points. 

livewriter picture format toolbar

 

009This is something you can play with until you get the look you want. 

  • The numbers are pixels, start clicking and see how it looks. 
  • This is the same picture with a 30px right margin and a 5 px bottom margin. 
  • Without the bullet points next to it, a much narrower margin would be sufficient.  If it was right-aligned instead of left-aligned, a smaller margin would also work.

 

038After a while, you will probably come up with some “go-to” settings that you use for particular situations. 

For most left or right-aligned pictures, I find that a 5px-15px margin is enough.  For centered pictures, you’ll only need to adjust the top and bottom margins.

This picture is set with a 15px right margin and 5px top and bottom margins.

You can see that text frames it without encroaching, which is exactly what you want. 

So…you are noticing some other doodads on that picture formatting toolbar…what are they all about?

livewriter picture format toolbar

 

Rotating and Other Picture Edits

You can rotate or even tilt an image in Live Writer.  And try different picture styles.

038009

You can also do some minor editing (brightness/contrast, some effects).  I tend to do any editing in a separate program (better control) but you can play with the effects.

009009

And you can add watermarks.  Take some time to play around with those features on your own.  There’s just a couple more things I want to show you before we go. 

 

First, let’s hyperlink a picture. 

  1. First copy the url you want to link to.
  2. Click on the picture.
  3. Click the “Home” tab.
  4. Click the “Hyperlink” icon and a little window will pop up.

livewriter home toolbar

livewriter hyperlink window

And, voila!, the url will already be in the web address field.  If it’s not there, you can paste it in.  You’ll see that the “text to be displayed” is blank and that’s because you are linking a photo. 

I set all my hyperlinks to open in another window and that’s simply because I don’t want to force my readers away.  When the link opens in a separate window or tab, they can continue reading without losing their place and still follow the link.  We don’t need to get into the more advanced options for now (more in a later tutorial!).

 

One last thing.  Let’s Make Your Pics Google and Pinterest Friendly.

For SEO and sharing reasons, set the“alt text” for your photos, especially those you hope will be pinned. 

Here’s why: 

  1. Google bots don’t crawl photos, but they do crawl alt text!  The bots will not even “see” your photo, but you can tell them that it’s relevant to a search by describing it in the alt text.
  2. When you name and alt text your photos, when someone goes to pin them, their pin button will automatically pick up that info and put it into the pin description.  It makes it easier for them to pin and you have some influence in how it’s described.

Here’s how to do it:

  1. Go to your photo format toolbar.
  2. Select “alt text.”livewriter picture format toolbar
  3. This window will pop up.  Live Writer will automatically fill in the “title” and “alt text” with the name of the your photo.  livewriter alt text windowNaming photos well will make your life easier!  But if it’s something generic like img023, you can type in a new descriptive title and include relevant key words.

I hope you enjoyed this tutorial for making the most of your pictures in Windows Live Writer.  Stay tuned for more posts in this series.

You might also like:

Homeschool for Free:  Computer Programming

Tutorial:  Create a Fort Kit

 


Let’s connect:

11 comments:

  1. So Awesome! I've never looked at the Small/Med/Large size on photos. I can't tell you how many thousand times I've typed in 300 or 540, the two sizes I use. THANKS!

    ReplyDelete
  2. You know, Angie, I think the first time I actually tried the set sizes was while putting together this tutorial, lol. I've got a couple of set widths I use, too, so this makes life easier!

    ReplyDelete
  3. Thanks, I just started using LW, but haven't had extra time to mess with it.

    ReplyDelete
  4. I read your post and thought you might like this on the topic of image editing and Windows Live Writer. It's how to use your own image editor with Windows Live Writer, getting even better results.

    http://lehsys.blogspot.com/2013/03/windows-live-writer-2012-fast-and-easy.html

    I hope this helps...
    Nice post.

    Later,
    Larry


    ReplyDelete
  5. Thanks, Larry. ;)

    The program Larry is referring to is a free plug-in and from the description, it looks like it allows you to use the functionality of graphics editors you already have from within Live Writer. I haven't used this and it really goes beyond the scope of my original post, but I may investigate it in the future.

    ReplyDelete
  6. Susan can I just give you a virtual (((hug))). I know this took time and I appreciate you doing this. Another (((hug))) ;)
    Blessings,
    Linda<><

    ReplyDelete
  7. This is awesome Susan! I can't wait to try it out. I am taking an online digital scrapbook class that I hope will help me with my pictures in Photoshop Elements, but until then I will try your tips in Live Writer! Thanks for all your hard work.

    ReplyDelete
  8. I have always wondered how to get my bullet points to show up beside a picture. Thanks for the information.

    ReplyDelete
  9. Thank you! I had never figured out how to put margins around the pictures, so mine are always squished against the text!

    ReplyDelete
  10. Hi! This is great - thanks! Do you know if you can format multiple pictures at once (same margins, size, etc)? Thank you!

    ReplyDelete

Thank you for joining the conversation!

Please note: Comments on posts older than 16 days are moderated (this cuts down on SPAM). All other comments post immediately.