Tools for Designing Graphics for Web Sites


In my various lives, I've worn a lot of hats, from teaching to marketing and desktop publishing (back before there were computers for the masses) to writing text and code, and in all those lives, wearing all those hats, I've worked with my share of computer applications. As a teacher, one of the things I told my students was that if you've worked with one Windows application, you can easily transfer those skills to other Windows applications.

I, personally, think this was true for DOS applications, too, although I'm sure many would disagree, and I think this is true of many, if not most, occupations that changed with the advent of the personal computer. For example, many who worked as desktop publishers for print media became Web designers. In many ways, Web design is very much like print design, and many of the design guidelines for print media apply to the Web ... but they also don't. It's hard to explain without an example.

One guideline of print media is the importance of white space. Of course, white space isn't always "white" but rather blank or empty space that has no text or graphics. Flip through any magazine and you'll understand what I mean. The advertisements that grab your attention aren't usually those that have a lot of elements on the page fighting for attention; they are usually the ones that have a few and in many cases one main element surrounded by empty space. There may be just a few words attached to an evocative image, usually something that causes readers to feel some emotion, encouraging them to buy whatever the ad is selling. Newspapers are probably the one form of print media that gets away with using up every inch of spare space with text or images, and most do this very well because they coordinate the different elements on the pages so that they all compliment each other.

On the Internet, white space is still important, but you rarely see Web sites that incorporate huge amounts of it. In fact, the only Web site I know of that truly incorporates white space is Google.com. Most Web sites try to fill up every spare pixel of space. Some do this very well, others very poorly. I would even go so far as to say that either Web sites do it very well or they do it very poorly. There doesn't seem to be a happy medium here. If you look at some of the popular sites, like amazon.com and msn.com, you see sites that are very busy but also very well designed because they coordinate all the elements to create a uniform whole. Even advertising coordinates in color and format with other elements on the page. By the same token, you can probably find exponentially more Web sites that are just as busy but don't coordinate the elements on the page nearly as well. Usually, these pages have multiple flashing ads with several different fonts and a rainbow of conflicting colors. Usually these are the pages that you can't get away from fast enough.

My point is this: many Web designers and Web developers didn't get started as designers. We didn't take classes and get degrees in design. We sort of grew into it as our jobs changed and grew. We designed a few graphics, and everyone ooh'd and ah'd. We designed a few Web pages, and our bosses called us a Web designer. Most of us, no matter how good we are behind a camera, wouldn't publicly admit that we couldn't draw a straight line if our lives depended on it.

That's where graphics applications come in. There are a ton of graphics applications available on the market, many (IMHO) so overpriced that even a veteran graphic designer couldn't use them enough to pay for them. However, there are some really good graphics applications available (some relatively inexpensive) that can make even non-designer developer-types look really good. Here are my favorite.

Paint. Okay, I'll say it again ... Paint. Everyone knows what it is, but many refuse to acknowlege that they use it. Everyone one who has Windows has it, and for the money (free), there are few graphics applications that are better. Okay, so you may not want to create a lot of intensive graphics in Paint, but there are some very cool things that you can do in Paint that you can't do in other graphics applications. For example, let's say you're designing a Web site or developing a Windows application and all you want to do is add a screen shot to a document or modify it just slightly.

Most if not EVERYONE knows that you can press Print Screen to take a screen shot (Alt-Print Screen to get just the active Window or dialog box), and since this copies a bitmap of the screen to the Windows Clipboard, all you need to do is paste the results into any document. But what if you need to edit it? Perhaps you're writing a spec and need to edit out or change some portion of a dialog to create a new look; perhaps you're creating a training handout that describes portions of an application and need to add callouts. There are a million and one reasons why you might want to edit a screen shot, and I don't know of another graphics application (at least not for the cost of Paint) that allows you to edit a bitmap pixel by pixel.

Now some of you are probably thinking right about now that you can't use bitmap images on the Internet, and yes, that is true (or rather you can but they're not as good as GIF or JPEG and not useful across platforms, etc.), and while you can save GIF files in Paint, the color fidelity isn't good, so I'd like to introduce you to another tool that costs just about as much as Paint.

Office Picture Manager. If you have any Office System 2003 application (and if you have FrontPage 2003, you have an Office System 2003 application), you get Office Picture Manager free. Yes, you read that correctly ... gratis. And you can do some pretty nice things with Office Picture Manger. You can save a bitmap as a GIF ... or JPEG ... or PNG ... or TIFF ... or you can save any one of those as any one of the other. You can change the colors, crop, rotate, flip, resize. There is only one thing that you can't do with the current Office Picture Manager that you could do with its predecessor (the one in Office 97, Office 2000, and [I think] Office 2002), and that is specify a transparent color. IMHO this is sad for those of us who work with Web images, but in every other way, the Office Picture Manager included with the Office System is a better application.

The scenario would go something like this: take a screen shot, paste it and save as a BMP in Paint, open it in Office Picture Manager, and export it into the format of my choice, usually gif. I often use Office Picture Manager to convert bitmap graphics and screen shots that I use in my articles to GIF and to resize them as appropriate to meet MSDN guidelines. Although more recently I've been using a different product, Office Picture Manager is a great choice and definitely a great tool to keep in your toolbox for working with graphics of any kind.

PaintShop Pro. This is a non-Microsoft graphics program developed by Jasc (www.jasc.com) that I've worked with, and compared to high-end graphics applications like Adobe PhotoShop, it's a terrific application for creating and manipulating graphics of all kinds. I love to use the different effects on photographs and for the money, this is an awesome application. I especially love that I can see what my image looks like with a proposed change before I make it. If I don't like what I'm seeing, all I have to do is click Cancel and my image remains unchanged. I'm sure I don't use it to its full capabilities, but I definitely like to keep it around for working on Web graphics. (As a side note, I actually preferred PSP 7.0 to PSP 8.0, but I have PSP 8.0 because it was the only one available when I purchased, and although it is good, IMHO 7.0 was better.)

A while ago I found instructions for creating repeating designs, which are great as background images for Web pages, in PSP 7.0. I can't remember if I tried the steps in 8.0, I've since forgotten how, I don't remember the URL, and a quick look at the PSP 8.0 UI doesn't provide any clues, but in 7.0, it was a simple task of selecting part of a larger graphic and selecing a "make repeating graphic" command. I don't see the same command in 8.0, so I don't know if it's possible. However, even with this deficiency (which is relatively minor since I don't use repeating designs on Web pages), PSP 8.0 is an excellent graphics application.

Picture It. For all the things for which I love PSP, I love Microsoft Picture It, but for working with photographs, I've never worked with a simpler, better application. It has some great tools for cleaning up photos, like adjusting the angle on crooked photos to erasing flaws. About a year ago, I had the opportunity to use it on photos for a furniture Web site, and I was amazed at how well it worked. For photos that had too much glare, Picture It allowed me to cut the glare and deepen the colors to a richer tone; for photos that were too dark, I could lighten them without losing definition. I've never gone googoo gaga over a graphic program, but this one gives me hours of enjoyment.

Visio. Recently, I've used Visio more freqently for creating images for articles, especially if the image isn't a screen shot, but Visio has a feature (IMO) that is very important for Web designers and developers beyond the ability to create or save images in Web-compatible formats. With Visio, you can create a map of a proposed Web site (which you can probably do in most graphics applications) and you can also map out the structure of an existing Web site just by providing a URL. If this ability exists in other graphics applications, I admit that I've never seen it. I was first introduced to this feature years ago (perhaps even before Microsoft acquired Visio), and I've found it a very useful tool when working with Web sites. As long as a site has pages that have links, Visio can map the structure of the site. The default is 3 levels deep and 300 links, but you can adjust these settings as you need to. Visio is, admittedly, the pricier of the graphics applications listed here, but if you work with multiple Web sites (perhaps as a consultant) or manage a medium to large web corporate site, this one feature alone makes the cost of Visio worth the expense.

Gif Construction Set. As I said, I've worked with a lot of graphics applications, but this is the only one I've worked with that allows you to create really cool text effects. You can do a lot more with it, like animated gifs (if you've read even a few of my posts, you've figured out how much I "love" animated gifs), but text effects is what I've used it for most. If you've spent any time at all working with Web sites, you know that in order to show special fonts on Web pages, either the visitor needs the font on their local computer or you create graphics to show the font. Gif Construction Set, developed by Alchemy MindWorks (www.mindworkshop.com), allows you to create very cool text effects with any font installed on your computer. You can set shadow effects, create outlined text with fonts that aren't outlined to start with, create scrolling text marquees (okay, yes, an animated gif, but it's text!), and a host of other special effects. For a great price, you get a great tool to add to your toolbox, and if you're unsure whether it will suit you, I think you can still download a demo so that you can try before you buy. (If I'm not mistaken, it's a full working version except that the images have text written across them until you register ... if I'm not mistaken.)

Of course, these are only a few of the graphics applications available, and most are much more expensive than the ones I've included here, but all of these (IMHO) deserve a place in a professional Web designer/developer's graphics toolbox.

Comments (10)

  1. gimp says:

    You missed the Gimp. (Gnu Image Manipulation Program) It’s the best free Image Manipulation program out there. And theres windows binaries available.

    http://www.gimp.org/

  2. Here is a good alternative to Paint: http://www.eecs.wsu.edu/paint.net/. It has been developed with assistance from Microsoft.

  3. Ray D says:

    You should also check out Paint.net (http://www.eecs.wsu.edu/paint.net/), especially if you’re on a tight/no budget. 😉

  4. Mike says:

    I have to agree with the above 2 posters. Paint.NET is awesome.

  5. amit agarwal says:

    Could even provide links to tutorial websites here like w3schools.

  6. Jeff says:

    Another cheer for Paint.NET!

  7. yao says:

    Able Graphic Manager is a program that enables you to easily view, acquire, image process, print, and convert graphic files in normal (file by file), batch (many files at a time), and command line modes.

    http://www.yaodownload.com/video-design/imageviewers/able-graphic-manager_imageviewers.htm

Skip to main content