In the last 24 hours blogging has become a whole lot easier for me. The reason for this is that I upgraded both my laptop and my blog yesterday evening. The MacBook was taken from OS X Tiger to Leopard and my blog was switched from Blogger to WordPress . The combined Leopard/Wordpress blogging platform makes writing a blog (and embedding images such as screenshots) a breeze. In this post I will show you the steps required to take some screen grabs and then upload them to WordPress.
Take a screenshot
The two main screenshot commands you will most likely use are Command-Shift-3 which takes a grab of the entire screen, or Command-Shift-4 which allows you to select an area of the screen to capture. Both commands will save the the resulting image on your desktop.
Resize an image
Once you have made some screenshots you may want to resize them. Double click on the image and it will open up in the Preview utility. Click on the view menu as shown below.
On the view menu select adjust size, this will open an options window.
For this post I have resized all my images to have a common width of 400 pixels. Leave the scale proportionally and resample image options checked, then click OK.
Save as JPEG
By default, the screen shot function will save your images as PNGs. Sometimes they are quite large files, so I like to save them as JPEGs instead and adjust the quality down a few notches to result in a smaller file size. Just click File > Save As to bring up the saving options.
Uploading to WordPress
Finally, now that the images have been prepared we can upload them to WordPress. On the Write Post page, you will see an upload as shown below.
Simply click browse to select the image you want to upload from your desktop, then give it a title and/or description and press the upload button. Once the image has uploaded you will be given a few options on whether you want to display the full image or a thumbnail, and whether you want the image to have a link. Since I had resized my images to 400 pixels, I wanted to display the full image so I selected full size with no link. Then you just press send to editor and the appropriate image code is sent into the main editing text area.
And that’s it!