2 Time Savers When Working with Images

We’ve been putting a lot of time into building a cart on line and during the process have been using a couple of short-cuts that have really sped the process along – in addition to using the new LED Fancier 500 light  and the ‘curves’ function to get those white backgrounds. Even if you’re not putting up a cart,  these two tips may save you some valuable time on constructing your next web page when it comes to images.

Re-sizing an Image

In most cases when laying out a web page, you have an idea of the size of the images you want to use depending on

  • Location – header logo, above the fold, side bar links, etc.
  • Importance – company logo, client advertising, etc.
  • How detailed you need it to be – simple geometric shape? or small details?

In some instances, you may want to use some of these same images else where on the site – but in a different size for links, page headings, etc.

If this is the case, create the original image in the largest size you’ll  need and save it.   Then when you insert the image into the document, you can use it ‘as-is’ or re-assign new height/width – based on correct ratio – to accommodate the other locations without having to create another image.  This eliminates a lot of extra work and saves file space.

For our sample pictures below, we have an image of a traffic light where the largest image is 112 x 112, however, if we want to use the same image in another place but need it smaller – rather than create another image of the traffic light at 85 x 85 – we just replace the width / height in the HTML code with the desired size.  Same image – just different code.

For example:

Sample 1.

Sample 2.

From JPG to PNG

You have a JPG picture of an object but you want it to be a PNG image so the background is transparent.   You might need this for layering images or for using by itself in an application where the background needs to be transparent – for example, maybe your web page has a patterned background

This can usually be accomplished by using the ‘Magic Wand’ or ‘Magnet’ tool in your graphics program. After selecting the tool, you can capture the part of the image you want to use and save. In some cases you may need to adjust the tolerance more than once as you go through the process of selecting what is to be copied. I have found that it’s not very often I get the complete object selected first time with ‘one click’. Once you’ve selected the portion you want, copy and paste it as a new image on to a transparent background saving it as a PNG image.

If you find that you are having a problem selecting the portion of the original image you want because it has a busy background, try making the background white or some other solid color,   if your object is primarily white or light colored. Basically what you’re looking for is a contrast in colors to make selection easier. Once you’ve got the solid background, you should find it farily easy to select the object, copy/paste on to a transparent background and then save as a PNG.

Comments are closed.