Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business! » Graphics

2 Time Savers When Working with Images

AdminP — Mon, 14 Nov 2011 20:25:15 +0000

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.

How to Get Pictures with White Backgrounds

AdminP — Mon, 19 Sep 2011 19:22:49 +0000

With most people the primary goal of having a website is to make money. That being said, how you present your product is important, i.e, having good, quality pictures. While we’d all like to have catalog type pictures – you know the kind….no shadows and nice white background – getting this type of picture is not easily accomplished for the amateur photographer who is using basically ‘off the shelf’ equipment and software. However, there is a way you can maximize your picture quality using the equipment you have to get a comparable ‘catalog’ image. OK – maybe not as good… but totally acceptable for not having to spend any extra cash.

Getting Started

This procedure can be done pretty much using any good graphics program that allows you to manipulate the image’s color. And, we’re assuming you are taking pictures with a standard digital camera. If you happen to have a light box then this makes the process even easier as it will help eliminate shadows. Even if you’re not using a light box, you want to have the objects placed on a snow white background. Depending on the size of the item this might be a sheet of paper, poster board or a white bed sheet. The less texture the background has, the better and easier it will be to get a good quality image.

Graphics Program

If you’ve used any graphics program, you know about adjusting the color,brightness and contrast of an image; however, you may not be familiar with using Curves to brighten the background. The curves function is typically available through the program’s Color icon.

A good graphics program will allow you to use the curves function to edit all color channels (RGB) at once or individual channels as needed. My experience has been that I’ve found using all three channels results in getting the best catalog picture for individual items.

For our sample, we’re using the picture of a tile, taking it through the process we needed to get the background we wanted. In the picture bar, we’ve used a black background for the dual images to highlight the white background from the post background. The white (or non-white) you see around the tile is what would appear if we were using it on a web page. Also, the original picture below was taken inside, on a white sheet of cardboard with no special lighting or flash. Not what we’d ever want on a webpage.

Steps:

The steps below are the basic steps to follow to accomplish a white background. The only step you would most likely skip would be step 4 – otherwise you will need to go through the whole process.

1. Take picture on white background with as little shadows as possible.

2. Size the image and save

3. Open the ‘Curves’ function and adjust the brightness to your satisfaction and save (If you are satisfied with the results you can skip Step 4 and go to Step 5, however, if you want to enhance the contrast of the item(s), then continue with Step 4)

4. Use the ‘color adjust’ to further brighten the background and adjust the item colors/contrast as needed and save

5. Use the ‘magic wand’ selection tool to select the product item including the image’s edges. When this is done you should have both the item and the edges of the image selected, ie., each major piece of the image will be selected… this will vary depending on how many product items you have in the picture. You may also find that setting the feathering to 3-5 will give a better result when you fill in the background eliminating any hard edges.

6. Once you have the different portions of the image selected, use the color fill tool to fill in the background with white and save.

The left picture above is Step 3; the right picture is Step 6.

Conclusion

Note in the sample image on the right, there is a slight increase in the white background from the left image (note light ‘yellow’ to left side of left image). While this may seem a multi-step process just to get one ‘catalog-style’ picture, if you’re looking for a way to get images that have white backgrounds without having to hire a pricey professional graphics person or spend money on fancy software and equipment - then investing a little time is not a bad trade-off in my opinion.

How to Get Professional Looking Headers

AdminP — Tue, 06 Sep 2011 20:28:09 +0000

If you’re designing a website, you’ve probably given a little, if not a lot of thought to the header.

How big?
How busy?
How much information should it include?

In years past when monitors were much smaller, the maximum width was pretty much set at either 800 or 1024 pixels. However, today there are some very wide monitors allowing you a lot of flexibility. A few things to keep in mind when planning the size of your header are:

Where you place the navigation bars (across or down the page)
Length of text lines
Size of images you want to use

All of these things should be taken into account when considering a header. Another consideration is whether or not you want to have AdSense or some other advertising medium on the page. If this is the case, you will want to have a bit wider site with room on either the left or right to display your ads. This type of site would do well at 900-950 pixels. Anything wider than this can be distracting because part of the page may be off the screen, the text lines may be too long to read easily and overall it is distracting for the viewer trying to ‘put it all together’.

Most of the top websites including Twitter and eBay fall within the 750-950 pixel range. A good rule of thumb might be to use 750 for single column websites and 950 for those websites where you want to use either a navigation menu or advertising to the left or right.

If you’re artistic you probably won’t have any trouble putting together a good header, but for those that have trouble with design or perhaps don’t have a graphics program, then you need to take a look at xHeader. This is a program that comes with pre-designed headers where all you do is select the one you want and fill in the name and slogan. You can get a free version of this program with 500 headers by visiting this link.

Once you’ve downloaded it be sure to take a few minutes and watch the tutorials. It is very easy to understand and when you’re through you’ll have a header you’ll be proud to call your own. BTW – the images used on this post are from the free version I downloaded.

Using a Color Wheel

AdminP — Tue, 24 May 2011 21:01:08 +0000

Most things in life seem to follow an order or pattern of some sort. Colors are no different. There is a definite order to colors and for those out there that may be artistically challenged or unfamiliar with the types of colors, we’re going to cover a few color basics here.

Order of colors – primary, secondary, etc.
Combination of colors – what you get when you combine primary colors or primary with secondary colors
Complimentary colors – opposites; what colors you can use together or what colors compliment each other

When building a web page, blog or creating graphics, the first thing thought is usually which color or colors to use. How you choose to use these colors can be as simple a process as following the groups of colors labeled on the color wheel below.

Types of Colors

Primary colors: red, blue, yellow – these colors stand on their own

Secondary colors: orange, green violet are created by the combination of 2 primary colors, i.e, red + blue = violet; blue + yellow = green; red + yellow = orange

Intermediate colors: created by the addition of a primary color to a secondary color

Using Colors

Using multiple colors may mean you use the same family of colors, i.e, colors that would fall into the blue-violet range or it can mean that you use complimentary colors. Complimentary colors are colors that are opposite one another on the color wheel. The complimentary colors for the three (3) primary colors are

red → green

blue → orange

yellow → violet

Note: The complimentary color for each primary color is the secondary color you would get if you were to combine the remaining two primary colors !

Color Wheel

Use this color wheel to help create your own color schemes. For more color help visit the posts below.

Color Tools – http://powertoearnmoney.com/graphics/color-tools/

Hexadecimal colors – http://powertoearnmoney.com/general-information/using-colors-hexadecimal-and-rgb/

Don’t forget to watch for our 6-part Report on Niche Marketing – coming soon and …..

we’ll be taking next week off for vacation. Enjoy your Memorial Day weekend and take time to thank a Veteran for their selfless, honorable service to our country!

Using Image Backgrounds: Transparent and White

AdminP — Mon, 21 Mar 2011 20:45:49 +0000

Using transparent images on your web pages can often create a more interesting layout allowing the background to ‘shine’ through.

Graphics programs such as Photo Shop or Paint Shop Pro allow you to create transparent images that can be saved as either GIF or PNG files. Never as JPEGs.

Creating a Transparency

Transparency in an image is created when you select an area to be non-viewable. This can either be the background or a part of an object.

If you are starting with a complete picture, graphic or scan, you will need to select the area you want to keep and the area you want to make transparent. If the area you are keeping is a collection of objects, i.e., building, people and cars, you can capture the images using the graphics program’s tool designed to perform this task. In Paint Shop Pro this tool is the ‘Magic Wand’. In addition, most graphics programs also have ‘optimizers’ that allow you to make portions of an image transparent. For our purposes of discussion, we’re going to base our post on having captured an image.

Once you have the image captured, you can paste it as a new image giving it a transparent background and then saving it as a PNG file. (Saving it as a GIF file will make the background white.) Once you’ve saved your file, you can use it as a transparency or layer it with other images.

If creating your own transparent graphics from the start, you may want to use a non-common color for the background. Once you’ve completed the image, you will need to designate that color as being transparent before saving the file. This works like the ‘green screens’ used on TV.

Note the difference in the backgrounds behind our two blue ball images. The gray-checkered background in the PNG image above will not be visible; the green background below will display if you do not designate the color to be transparent. In both samples, we’ve used white for the background, however, the ball would display as a transparent image on any background.

Tip: When creating graphics with many different components, i.e., multiple images, text, various effects, colored or transparent background, etc. , it is best to use the ‘layer’ feature of your graphics program for ease in making any changes or additions later. Also, we recommend keeping two copies of these image files: the original layered image and the finished PNG, GIF or JPG file.

Implied Transparency

An easier way to achieve a ‘simulated’ or implied transparency can be accomplished by assigning the same background color to the graphic as on the page where it will display.

This only works well if you are using a solid color for the background. Any texture, shading or gradient to the background on the page makes it difficult to have the image blend in and look like it is part of the background.

White background

While you could simply use the ‘implied’ background method for getting a white background - like commonly seen in product catalogs - there is a program that allows you to accomplish this – ArcSoft Photo Studio.

To use this program you outline the portion of the image you want to retain (we’ve only outlined the left portion of the left ball to show the difference), then follow the program prompts. When you finish, you will have an image of the object on a white background you can save as a PNG or GIF.

Note: In this case the background will be white – not transparent even if saved as a PNG, although it could be used as a transparency on a page with a white background. (Some details and clarity have been lost due to sizing.)

ArcSoft Photo Studio is very useful in not only does it have this ‘magic cut’ function but also it comes with a 3D Factory for inserting 3-dimensional text that you can position, rotate and/or animate (12 different animations). This feature is very helpful in grabbing the viewer’s attention.