This tutorial shows how to create your first screen shot based article and publish it on a WordPress blog in less than 5 minutes.

Requirements:
1. You need an active WordPress blog, where you have permission to post articles. If you don’t have one, you can sign up for a free WordPress.com hosted blog (btw, they provide 3Gb of space for uploads now.)
2. You need to download and install UseShots Editor (only Windows version at this moment).

BTW, this whole tutorial has been created and published using UseShots Editor.

Launch UseShots Editor and click the Start new article link.

To create a new artcle, all you need to do is give it a descriptive title (it will be used as a title of your blog post)

If this is the first time you use UseShots Editor, you don’t have any site profiles yet, so just leave the “Undefined” profile for now. We’ll have a chance to configure the site profile later.

Note that in the “undefined” site profile, a maximum width of screen shots is 480 pixels, which means that larger images will be automatically resized to fit the blog’s column width ( 480 pixels is the width that fits many WordPress themes).

You might want to create a site profile straight away if your blog’s column width is narrower than 480 pixels and you don’t want larger screen shots to break your site layout. Or if the column width is significantly wider and you want screen shots that are wider than 480 pixels but still fit the column’s width to be saved without resizing to preserve the best quality of screen shots.

To create a new site profile, click the “Add New” button. Creating site profiles is covered in the step 10 of this tutorial.

In UseShots Editor, you write your articles screen after screen.

Each screen consists of
1. Caption - a short description of the screen. It will be displayed as a sub header in your blog.
2. Screen shot - the picture itself
3. Annotation - a textual description of the screen. Write your instructions, reviews, anything else here - you are the author.

The first thing you might want to do is take a screen shot. Just click the Take screen shot button in the center of the screen.

You will see the UseShots camera - a window with a transparent area inside the red frame.

It works the same way as your digital camera. You can click-and-drag it all over your screen and everything inside the red frame will be captured when you hit [Enter] on your keyboard or press the “Shoot” button.

You can resize the camera window as any other window - just click-and-drag its boarders and corners. This way you can capture an arbitrary area of the screen.

And you don’t have to worry about the size of the screen shot. It will be automatically resized to fit your blog’s layout.

At the upper left corner of the camera window, you will see the dimensions (width x height) of the captured area.

Once the screen shot is taken it will appear in the center of the UseShots Editor.

Give it a descriptive caption. (These captions will also be used as alt parameters of img tags when the article is published. )

Add a textual description of the screen in the Annotation edit box.

Although it is recommended that you enter captions and annotations, they are optional. Even screen shots are optional.

To add a new screen to your article click the Add Screen >> button at the lower right corner of the editor.

Anytime you want to preview the whole article (not just one screen at a time), click the preview link at the upper right corner of the editor.

In the preview mode, you will see how your article will look on a web page.

Note: the actual look of the published article will depend on your blog’s theme settings.

To close the preview mode, click the hide preview link at the upper right corner.

When you are ready to publish your article, click the Publish link at ther upper right corner.

If you are publishing an article for the first time, you’ll need to enter some information about your blog, so that UseShots Editor could publish your articles.

Site Type - only WordPress blog at this point.
Profile Title - title that will help you identify the profile among other available profiles.
Home Page - your blog’s homepage (e.g. http://myblog.wordpress.com)
Max Width - maximum width of screen shots that will fit your blog’s column without resizing. Wider screen shots will be automatically resized.
XML-RPC end point - you can leave this field blank (recommended) unless your blog has a non-standard endpoint.

You can leave out the login details at this point, you will be promted for username/password when you publish the article.

If the “Save username and password” option is checked, the login details will be saved, and you won’t need to specify username/password next time you open UseShots Editor.

Before you publish the article, verify that the title is correct and you are posting the artcle under the correct account.

Add some descriptive tags to your article. Separate tags with commas.

If you check the draft option, the article will not appear on your site. It will be saved as a draft. You will need to specificaly publish it in the admin area of your blog.

Click Post >> when ready.

Once the article is published you can click the links to open it in a web browser. You can also copy the URL of the published article to clipboard.

Note: UseShots Editor provides you with WordPress default URLs that should work for any blog regardless of permalink style. You can get the real URL in the browser’s address bar when you open the link in a web browser.

Here is the fresh new, just-published article in a web browser.
The whole process took less than 5 minutes.

You are ready to create and publish your own screen shot based articles - UseShots.

UseShots Editor is in its very early stages and I need your feedback to make it really useful for many bloggers.

Please let me know what you think about UseShots Editor. Leave your comments here or use this form to contact me directly.

And I’d like to see your articles created with UseShots Editor - send me the links.

Thanks!

Download UseShots Editor