Lesson 8 – About Graphics
About Graphics…
I am often asked something like, “What HTML tag do I use to create a banner?” The answer is simply, “None!”. You don’t create banners, or other graphics, with HTML. You do display graphics with HTML. I am not going to teach you about creating graphics in this course. That is not what this course is all about. However you will probably want to use, and therefore need to know how to include, graphics in your templates.
All of the example images in the previous lesson (the various HTML editors and other program screen shots), the page rings to the left, and the colored pencils and little sailboat above, are simple graphics. We use the HTML image tag (<img … />) to include graphics in our template pages. The image tag is one of those single tags that is “closed” with a trailing slash just before the final pointy bracket. A typical image tag might look something like this:
It may come as a bit of a surprise but in HTML graphics were originally treated as text. It was considered that graphics would be used inline with text, almost like those children’s books that would replace key words with small images to help teach reading skills. For example, the words party and clown are replaced with pictures in this sentence:
I went to the 
and saw a 
.
Obviously this kind of thing, though cute, isn’t going to do it for us in our template designs. But the principle is the same. Graphics are handled a little differently with today’s modern coding and CSS using attributes for floating and positioning and we are going to learn a little about this, however there can be problems with this in templates inserted into other web pages (such as at eBay) so we will mostly deal with graphics in more traditional methods involving tables.
But first let’s look a little more at graphics themselves. Graphics are files. Files are just a way of storing things on computers. Word processing documents are stored in files. Templates and web pages are stored in files. Music or sound files are stored in files.
Files have names. These have two basic parts:
- the name
- the extension
The name part is separated from the extension with a dot or period, like this:
filename.ext
where filename is the name part and ext is the extension. The extension part is usually three or four letters long but it could be more.
In the old days of DOS computers file extensions could only be three characters long and filenames could not have spaces in them. Today, on most computers, you can leave spaces in file names, like this:
file name.ext
It is okay to do this on your own computer but it really isn’t a good idea to do this for Internet files. Graphics and web page files that will be hosted on a web server (see next lesson) should not have any spaces in the file name.
The file extension typically tells us (and some computer programs) what type of file it is. Graphic files are different than word processor files, or sound files, and there are many types of graphic files, each with their own identifying file extension. Here are a few of the graphic file types as indicated by file extensions:
|
|
The good news is that you don’t have to worry about all these file types, though it doesn’t hurt to know that they exist. There are really only three types of graphic files suitable for general Internet use. These are files with .gif, .jpg and .png extensions.
Just a note here: these file extension indicate a specific method of storing the graphic information (the picture) in the file and so you cannot just change the extensions to change the file type. In most cases the easiest way to convert one file type to another is to open it in a suitable graphics program and then save it as the desired alternate type. You can convert .tif files to .jpg, or .pic files to .gif, in this manner.
As was the case with HTML editors, there are lots of choices for creating and working with graphics. I am often asked which program is the best. There really is no single answer to that. The best is the one that does what you need, easily, and effectively. Here are a few examples:
If you are using a Mac or Windows one of the above two programs will likely already be on your computer. Either is suitable for working with template graphics though they are somewhat limited in features. The old adage, adequate is enough applies here.
Paint Shop Pro has been my favorite graphics editor over the years. Perhaps it is because it was one of the first I learned and in part because it is just a great editor. Shown below are version 8, version 4, and version 3.
I continue to use version 3.12 for most all of my template graphics work. It’s the one I first learned on and I guess old dogs really do have trouble learning new tricks. I also have version 5 which has a few extra features I use from time to time and version 8 which I use for some more complex editing and design. Lora, my wife and business partner, uses version 4 for most of her graphics work.
You can get a free, non-expiring, full-featured, demo copy of version 3.12 and 4.12 linked from the course home page. I’ve also provided links to the websites for each of the other programs mentioned here.
Version 10 was the last release of Paint Shop Pro before it was purchased by Corel and added to the Corel Office Suite. Corel Draw (below), now based on Paint Shop Pro, is Corel’s graphics editor. It is powerful software for the purpose:
PhotoShop (below), from Adobe, is probably the most popular and certainly one of the most powerful graphics editor programs available. In fact, it may provide many more features than needed by, and be too expensive for, most template designers. Elements (second below) is a stripped down, but still feature rich, and more affordable version of PhotoShop. I have this and use it sometimes but it is still hard to leave my old favorites behind. I would recommend it for someone just starting out or looking for a seriously better program (both powerful enough and easy to use) than what they may have now.
Gimp (below) is a free graphics program that has most of the features of the more expensive commercial products. I find its organization and design to be a little geeky but that’s probably due to my long time use of PSP. Don’t let my opinion deter you from at least looking at this excellent program.
Open Office is a free suite of programs much like Microsoft Office or Corel Office Suite, but don’t let the price tag fool you. This is quality software that ranks with the best. It is a full suite of programs including word processor, spreadsheet, graphics editor, presentation manager, and a few other goodies. The graphics draw program (below) is based on Corel Draw and is excellent. The neat thing is to get the graphics program you download and install all the other good stuff too.
You will want to find a graphics program that works for you.
I mentioned there are three types of files for general use on the Internet. This includes for use in listing templates. .png (portable network graphics) are a newer file type created just for the purpose of working across a variety of computer types and networks such as found on the Intenet. Most newer graphics editors and web browsers support this type and it is a good graphic file type to use. Here is an example of a .png file:
The .gif file format can provide animation and/or transparancy, but is limited to 256 colors. This can be limiting but is not as bad as you might think for several reasons. Many older browsers can only display a limited number of colours, no matter what your system is capable of, and it is said the human eye can only distinquish about 248 unique colors at any one time. In some cases, even when you don’t want animation or transparency, .gif format files are the best choice as they can often be smaller file sizes for the same image display size. The .gif file format is best used for drawings and cartoon-like images.
  
|
examples of no transparancy, transparancy and animation.
I included a grid background so you can better see how the graphics display. Here is the same thing with a different graphic background:
|
|
examples of no transparancy, transparancy and animation.
And now the same thing again but with a solid color, rather than a graphic, background:
|
|
examples of no transparancy, transparancy and animation.
You may not have realized it but all computer graphics are actually rectangles, even those with backgrounds that don’t show. Once again here are the same three graphics but with single line borders drawn around them to show their edges. These outlines clearly show the actual area taken up by the transparent images:
|
|
examples of no transparancy, transparancy and animation.
When working with transparent graphics it is possible to change the transparent background to a solid color by editing the graphic but this can be a little tricky with animations. They require a special program and careful editing of each of the several frames that make up the animation. You can actually change the background color of transparent background .gif files using HTML. Look at the right two images above and the same two images below. The ones below have had their backgrounds changed to red and blue, respectively, using HTML.
|
|
examples of no transparancy, transparancy and animation.
Choosing whether or not to use solid or transparent backgrounds on your images, whether to have static or animated images, whether to use borders or no borders and which background to use can make considerable differences in how your listing template will look. Only one color can be set as transparent in a .gif format file. Whether this color is actually the picture background or not, it is always referred to as the background color.
I like to see a single line border neatly outlining non-transparent graphics. It’s just my personal taste, but I think it defines the graphic and makes it stand out better. With transparent backgrounds you probably don’t want the outline as it generally defeats the purpose of making the background transparent in the first place.
The .jpg file format does not support animation or transparency, but can have 16 million colors and provide significant reduction in file size through the use of a special process known as compression. Some visual clarity may be lost with compression, but the reduction in actual file size may more than compensate for this, especially if you want larger display sizes or more pictures in your auction. File size is important for listing templates as people may not wait to download larger files. Remember that people don’t surf to your listing on eBay. The listing, including all the graphics (both item pictures and template design graphics) must transfer (download) to the viewer’s computer before their browser can show them the listing! It is, therefore, important to consider the file size.
Consider these two images:
The two pictures above look the same and each display the same viewing size. Nothing has been done to fiddle with their width and height attributes. Both have real dimensions of 250 x 328 pixels, and yet the actual file sizes are different. The one on the left is 67 KB and the one on the right is 11 KB. That is a significant difference which can dramatically affect transfer (download) time and, therefore, the speed with which your listing builds and displays. And it will use less space on your file hosting site. On some sites this is a consideration and will make a difference in how many files you can host simultaneously or how much you will pay for your hosting service.
This size difference is achieved by saving the second picture as a .jpg file with 50 percent compression. There is so little loss in clarity that it is almost not noticable, and yet there is a significant reduction in actual file size. This produces faster transfer speeds and takes less storage space on your host server. Saving your graphics as .jpg files with between 20 and 50 percent should work for most of your images. Note that dots per inch (DPI) settings have nothing to do with graphics saved for your listings and will not affect display, unless your graphics program improperly associates DPI with compression, so you don’t need to worry about that setting.
A good size for graphics on eBay auctions is not more than 65k and the smaller the better. You can size files by reducing pixel dimension (about 350 pixels wide or so), sometimes by decreasing color count, and often by increasing the compression amount. Experiment with all of these features in your graphics program and see which work for you. With some colors, especially reds, there is a bleed effect if you use too much (or sometimes even any) compression. You may need to watch out for this.
Most good graphics programs (all of the ones shown above) have settings for changing things like pixel dimensions, file type and, in .jpg files, the compression ratio. These will be in different places (menus or buttons) and perhaps called different things, in each different program. You will need to explore a little in the program you choose to use.
Here are a few additional important things to consider when working with graphics:
- When sizing graphics, try to work with the originals, before they have been compressed and with the highest color count possible. Keep a separate folder for original graphics and never save edited graphics to that folder. In this way you will always have the orginal there to refer to later.
- Always crop first, then resize the image. To make a smaller square out of a larger rectangular image, crop a square first with the full amount of the image you want to use, then resize smaller to the size you want to display.
- Keep your aspect ratio correct to prevent graphics from becoming skewed when re-sized. There is usually a setting for this when you save or resize/resample an image. For example, if your original image is a rectangle 100×200 pixels and you resize it to a square 90×90 pixels the final image will appear squished. It’s the old you can’t fit a round peg in a square hole situation. The solution is to provide the size for only one dimension, say the width: 90 pixels, and let the program find the right height for the finished image on it’s own. Ticking the maintain aspect ratio (or similar) function will do this sizing automatically.
- On web pages, don’t use the width and/or height attributes in the image tag to resize graphics. This may seem to work but it is not what these attributes where designed for. Best results are obtained when they are used for the purpose of providing the actual pixel size of the image to the browser. Resize your graphics in a graphics editor first and then upload/use the actual sized graphic for your templates.
What Have We Learned…
In this eighth lesson we have learned:
- There are many graphic file types.
- The file extension usually tells us the kind of file it is.
- Generally only .gif, .jpg and .png files are suitable for use in our templates.
- We shouldn’t use spaces in our filenames.
- We need a good graphics editor to work with template graphics.
- .gif file types support transparency and animation.
- .jpg file types allow smaller files sizes through the use of compression.
- When possible work with original graphics.
- Crop then resize!
- Watch your aspect ratio when resizing graphics.
- Don’t use HTML to resize graphics.
Choosing a suitable graphics program is the next big step on the path to coding your own listing templates. You’ll learn all about using graphics in your listing templates in coming lessons. See the Extras section on the home page for links to graphics programs.
Your next lesson will be available whenever you are.
[ top of page ]
