I was discouraged when I found a Squidoo lensmaster taking designs from my Squidoo Graphics lens and selling them on Zazzle, ignoring the Creative Commons license I posted on that lens. I didn’t feel like making new graphics, after that. However, I’ve recently been inspired again.
Recently, a newbie asked if there were Squidoo banners one could download. I started to send him to the official Squidoo banners downloads lens, but I saw that none of those graphics are really banners. So I made some and posted a new Squidoo Banners For You lens.
So what? Is this just a transparent link-drop? No, actually, I want to teach you a little about graphics, so you understand what I’m doing, and more importantly, so you understand what you are doing when you resize, save, or use a graphic.
Disclaimer: The Squidoo logo is a trademark of Squidoo LLC. This blog is not endorsed by/affiliated with Squidoo LLC.
What is a Bitmap Image?
Bitmap is the kind of image you usually see on webpages. The file data tells the computer the location and color of each dot, or pixel, in the image. A bitmap is a a fixed size. If you resize a bitmap, your graphics program has to delete dots to shrink it, or double dots to scale it. This means loss of data when you shrink a bitmap image and a tendency to go fuzzy and jaggy when you make it larger.
Bitmap images are embedded in their backgrounds. If a word sits on a colored background, you can’t simply select the word in a graphics program and move it onto a new background — at least not easily. You have to painstakingly cut it out or use complex Photoshop masking tricks to try to isolate the part of the image you need.
What is a Vector Image?
Vector images are powerful but hard-to-make images. Instead of telling the computer, “This dot is orange, and this one is purple,” vector images give a set of instructions. “Draw a straight line here that’s 50% of the width of the whole graphic. Draw a curve here. Draw an angle here. Paint this area blue.”
Vector graphics can be scaled MUCH more easily, in the same way that a balloon retains it shape as it expands. Vector graphics can be placed on different backgrounds. Unfortunately, vector graphics have a large filesize and usually can’t be read directly by web browsers. When working with vector graphics, you design all the layers, adjust and shape and move the outlines until you’ve got the shapes you want, then save a copy as a GIF, JPG, or PNG.
In order to make the Squidoo graphics and banners, I found I needed Vector graphics. It was too hard to pluck the Squidoo squid graphic off its background. When I copied and pasted the word “Squidoo,” it would have the colored background, and it was hard to extract just the dots I needed. And when I resized them, they looked awful. And I couldn’t move the squid into different positions. So I had to create all-new vector graphics from scratch.
Check this out. This is my own Squid graphic. On the right, it shows all the different shapes, layers, and special effects I used to create a fairly good impersonation of the Squidoo Squid. It took me hours. That’s why I was a little peeved when someone started selling it on Zazzle!
But enough self-praise. What’s in this for you?
Well, when you get a graphic, you can resize and scale it, but remember, resizing a graphic may make it fuzzy. I’m sure that T-shirt she was selling looked awful, since the graphic she took was only 300×300 pixels, and would look horrible blown up to 1600×1600 like T-shirts tend to use.
Vector graphics scale better. IF you can find any.
Incidentally, text fonts are basically vector graphics. That’s why it’s so easy to resize fonts.
Finally, here’s something that’s VERY useful to understand: the three most common file formats used for web graphics.
What is a GIF?
Back before the web, there was an early file format called gif which allowed people on Compuserve, a local network, to share images. The advantage of the gif format is that it has a small filesize, and it records every single pixel accurately. The disadvantage is that it’s limited to just 128 colors, maximum, so it’s better for computer logos and web graphics than photos with subtle gradations. If you save a picture with more colors than 128 as a gif, the computer will average out the various shades to the 128 most common colors.
Gif has two more special advantages. It can be animated — save a sequence of pictures and show them one after another — or it can have transparency, in which you designate one color as a “transparent color”, meaning it doesn’t show in the finished version, but lets the color of whatever’s beneath show through. It’s like greenscreen or bluescreen in moviemaking.
What is a JPEG?
When the web began, we realized (yes, we!) that we needed a new format for photos. I was on a project called Perseus that saved its graphics in jpg (or jpeg) format. This file format also didn’t use too much memory, and in complex images, the filesize was even less than gif! The problem with jpg is that it cheats. It approximates. It uses various tricks to save as much memory as possible, like saying, “this dot and 100 dots after it are white”, instead of listing the color of each and every dot. Depending on the compression setting you use, it loses some detail.
This is especially noticeable in JPG’s descendant, MPEG, which shows a sequence of frames so as to display movies. It sacrifices some detail so that the file sizes won’t be too big, and your computer will be able to download them in a reasonable amount of time. You see this fuzziness in early YouTube videos, where the compression is high (saving filesize) at the expense of fine detail.
What is a PNG?
Back in the day, I never used PNGs, because they were huge files and took forever to load on dialup. But times have changed. More and more people have broadband. PNG has become my file format of choice.
PNG is deluxe. You can save it in PNG-8 format in Photoshop, and then it does the same thing as a gif: you can select a transparent color (optional), and it whittles the color palette down to — I think it’s 256 colors, which isn’t bad. Every pixel is saved. There is no compression/approximation to keep the file size small. PNG-8 helps keep it from getting too big.
But the real pretty is a full PNG. It may have transparency, and it renders far better than a gif– it can have partial transparency, letting the background show through a bit. This is great for shadows. More importantly, a PNG is “lossless” – there is no loss of data. No compression. No simplification of the color palette. PNGs look great. They just take more memory.
So which graphic format should you use?
For a simple logo or icon, use a gif. It’s tiny. It doen’t have many colors. It’s crisp.
For a photo, usually, jpg is best. It’s quicker to load than a PNG and takes less memory.
But for really fine work, like artwork, try to use PNG.
if you choose “Save For the Web” in Photoshop, you’ll see a box on the left with the original Photoshop document (PSP format), and on the right, a preview of the “web” version. You can toggle between gif, JPG, and PNG and see how big the filesize will be. This will help you choose the best format.
