Quick Summary

Step # 1:          Grab any image displayed on    your screen
Step # 2:          Crop Image – to leave only the parts you want to keep
Step # 3:          Add text to Customise Your Image
Step # 4:          Save your new Instant Web Image to disk ready to use on a website

Read on to see how to do this is seconds …

Step # 1: Grab a Picture

Use Steve’s Instant Image Grabber to create an image from any part of your PC Screen

Check your grabbed image includes the parts you want

Check your Grabbed Image

Copy part of your screen to an Image file

Step # 2: Crop Image

Use Steve’s Image Resizer to create the final web image any size

Crop Image using Steve's Image Resizer

Crop Image – to leave wanted portion

Step # 3: Add Text

Add text, set font type, size and colour then position – discreetly,  or to stand out

Add text to Customise Your Image

Step # 4: Save Your Image

Save your new instant web image to disk ready to use on any website

Save Your New Unique, Customized Web Image

Tips

• Large images take a long time to load – so keep them as small as possible
• Reduce the image quality of your file, using Steve’s Image Resizer, so that it still looks OK but loads faster
• Check you have the right to use other peoples images

Surf to any website and the first thing you will notice is the graphics.
You can find images from your website with costs ranging from free to VERY expensive custom designs.

Like most things online, the trick is to find what you want that works at a cost you can afford.
Wherever you get images for your site, make sure you check the terms of use carefully.
You will probably find that you have one of the following rights to an image:

• Full ownership and copyright – allowing you to use an image as you please
• Rights to use an image on one or more website for either commercial or personal use
• Rights to use an image on one or more websites ONLY for personal, non-commerial use
• Rights to use an image for either personal or commercial use ONLy if you add an attribution to the owner

Finding free Images

One of the best sites for free images is stock.xchng

This has a great range of pictures arranged by categories with easy search options

A great site to find free pulic domain clip-art is Clker

Clkr Website

Clicker has both vector (resizable without losing quality) and raster / phot images
They also have a tool that allows you to convert bitmap / jpeg images to a vector format

If you find an image you like – on a website or on a site for sale – there are two ways to check if the image, or something similar is available for free:

• Use Google Images and search by dragging and dropping the image you want to find into the search box.
• Go ton tineye – which will search the web to see if your chosen image is available for free. This may not produce as many search results as Google, but it should help you find any free versions available more easily.

Tineye website

Paid for Images

One of the biggest and best known sites to purchase photo images from is istockphoto where you can find some of the best images available on web.

Istock Photo website

The only problem is that the images can be very expensive. First you have to open an account and add credit – more than the cost of one small photo.

Then when you find a photo, the price will vary depending on the size of image you want to use – even small images cost from a couple of $ upwards.

Exchange Sites

A great siteto find photo and clipart images as well as illustrations, animations and sounds is Microsofts Bing
Anybody can upload their own images here – but you should really contatct the owner of any images you want to use.
Sample images displayed when you visit the site are usually very high quality.

Microsoft Bing Images Website

Preparing Images for Your Website

Once you have found one or more images you want to use, you will probably need to edit the size or shape and maybe add text to provide extra information to anyone viewing the image on your site.

A great tool for this is Steve’s Image Resizer – an easy to use software program that allows you to instantly rotate, crop resize and add text to images one at a time or in bulk, without the complication of learning how to use complex image editing applications.

Steve's Image Resizer

In one click you can drag your mouse to select any part of the screen you want to grab an image from.

Your image area is immediately highlighted allowing you to check or change your selection – with a copy saved to your clipboard, ready to paste into any document.

To save ayour chosen image as a file, simply right click – and voila! you have a copy of your image for ever.

Its even easier to create Instant Web Images!

One of the many setup option allows you to predifine the size of image you want to capture from your screen.

Choosing this option with an image size means all you need to do is click anywhere on your screen to select the top left position of an image – and an image of your chosen size will be selected.

Steve's Image Grabber showing optional settings

Other Features

You can choose the folder Screen Images are saved to as well as one filename.

Each file saved will have the next unused number added to the end “-1, -2, -3 …” etc

Files can be saved as either bitmaps, to create exact copies of the screen, or compressed as jpeg files with selectable quality levels allowing reduced file sizes (at the expense of image quality)

By default, every time you save an image to a file, it is displayed in your Windows default Image Viewer

Image editing has not been included to keep the application as simple as possible.

If you need to edit your image sizes or add text, why not check out Steve’s Image Resizer

Where can I get a copy of Steve’s Instant Image Grabber?

The software is complete, and fully tested but I need to complete some of the documentation – but check back here later today.

Images can be saved as files in lots of different formats.

It’s handy to understand the differences between the most common formats:

• Bitmaps: saved as imagefilename.bmp
• Jpegs: saved as imagefilename.jpg
• Gif: saved as imagefilename.gif
• Png: imagefilename.png

Bitmaps contain data that identifies the colour content of each pixel that makes up an image.
Displayed on your computer screen, an image usually consists of 72 or 96 pixels every inch horizontally and vertically.
One byte of data is needed for each primary colour – Red, Green and Blue with an extra A or ‘alpha’ channel byte used to define transparency.
So every square inch of screen image needs 72 (one inch wide) x 72 (1 inch high) x 4 (Red, Green, Blue, Alpha) = 20736 bytes = approx 20 kBytes

For a 6 x 4 image = 20k x 6 x 4 = approximately 500kBytes
Printing uses colors Cyan, Yellow, Magenta and Black, again needing 4 bytes per dot.
High quality printing needs at least 300 dots per inch and preferably 600 dots per inch.
This requires (300 x 6) x (300 x 4) x 4 = approx 13Mbytes
Or 4 x 13 = 52Mbytes printing at 600 dots per inch

Camera companies often refer to bitmap data as ‘Raw’ data.

 JPEGs allow image data to be compressed in a way that keeps the image looking like the original bitmap.

JPEG stands for Joint Photographic Experts Group who did a fantastic job of creating an algorithm that allows images to be saved using as little as 5% of the data needed for a bitmap.
The downside of transforming a bitmap to a JPEG is that data is lost and can never be recovered – so it is possible for fine detail to be missing. This may be a problem for high quality photography but not usually for images used on website.

An additional feature of JPEGs is that the transformation allows quality to be defined over a range 0 to 100
File size does not linearly correspond with the quality parameter, but it does allow images to be saved to extremely small files yet remain recognisable.

JPEG files do not include ‘Alpha’ channel data and so cannot be used to include transparent areas.

 GIF files are stored in a Graphics Interchange Format that not only compresses bitmap data but uses just one byte to represent colour data.

This allows files of only a third the size JPEGs to be created using colour palattes of just 256 rather that 16million colours.
It is also possible to define one ‘colour’ as transparent – allowing areas to be fully tranparent.

An additional feature of GIF files is that they allow more than one image to be added to ‘layers’.
Websites can display GIF image layers one after the other – creating the illusion of animation – this remains the main use of GIF images online.

PNG files are Portable Network Graphic files.

PNG files compress original bitmap data in a completely lossless way meaning it is possible to recover the original bitmap exactly.

The amount of compression a PNG file can achieve depends very much on the bitmap image. For example large areas of a single colour can be very highly compressed, but images with lots of fine detail may result in a file size not much smaller than the original bitmap.

PNG files also store ‘Alpha’ channel data – allowing every pixel of an image to be shown anywhere from fully transparent to fully opaque.

In summary

• Bitmap files are very large – but contain exact information about any image.
• JPEG files are lossy versions of bitmaps that ‘look right’ using much less storage data
• GIF files are smaller lossy versions of bitmaps than JPEGS, because they only use 256 colours to be used per image. Multiple images can be saved in GIF files then displayed one after the other on websites to create the illusion of animation.
• PNG files provide a lossless compression version of original bitmaps including the ‘Alpha’ channel allowing transparent or semi-transparent images to be stored. Compression varies widely depending on the content of original bitmaps resulting in file sizes much larger than JPEGs but usually still smaller than orginial bitmaps

Best Choice of Image strage Formats

• Use JPEGs for most images unless you need to recover original bitmaps exactly or need transparency or animation.
• Use GIF files for website animation
• Use PNG files to save smaller but recoverable copies of bitmaps that can include any transparency level