Take this daisy, for example. It’s a nice crisp image with clearly defined detail and bright, saturated color. Nothing much to complain about.

If, however, you decided you wanted to enlarge the image of the daisy to 3 or 4 times its size, you would be dismayed to see that it looks somewhat like the next picture of the daisy. It’s what those used to working with images called “pixelated” or having “jaggy” edges. Not good.

On many occasions I have had frustrated phone calls from clients demanding to know why this happens, thinking I will be able to tell them which key to press on their keyboard to make it look pretty again.

Alas, it’s not so simple, and the answer can end up getting very long-winded and eyes glaze over if I sneak the explanation upon someone without warning. The quickest answer is: You cannot enlarge photographic, or “raster” images without losing resolution. It’s a one-way street. You can only reduce them. But people don’t often like to hear the word “cannot” because they are sure there is a way around if they look hard enough.

Yes, Photoshop does have sharpening tools, but these are really meant for situations where the image is barely out of focus. One of my clients called me in desperation recently wondering why the images she took off the web didn’t look good when printed out poster size. I launched into my explanation and could feel her eyes glazing over.

“But there must be a way to do it,” she pleaded. “There isn’t, unfortunately,” I replied. “Unless you can get a hold of the original images at a high resolution.” She was in a time crunch and seemed to have promised one of her higher-ups that she would deliver nice crisp images on a poster. Alas all she had was low resolution files. What to do?

I ended up helping her get the poster done by using the images at a smaller size and making them part of a larger design on the poster. She was relieved. There is nothing like a hands-on project to get the point across.

Image Resolution

Okay, now for some numbers. I hate memorizing numbers or facts, but in this case it must be done, and the numbers never change. The laws are immutable on this one. I guarantee these will be the only numbers you will have to remember. Commit them to memory.

When it comes to photographic or “raster” images, you are dealing in “pixels” (what you see on your monitor screen), or “dots” if you come from the printing world. First know that “resolution” is explained by how many pixels that can fit into one square inch. When it comes to contemporary monitors, that number is 72. No matter which monitor you are using the number is always 72.

If you were to print this image, which looks great on the monitor (72 pixels per inch), it will look like puke, pucky, shiat, whatever term you like…when printed out. That is because the printer speaks in “dots” now, and these dots look nice and crisp when you have 300 or more per inch. If you only have 72 dots per inch, the image won’t be tight and crisp. Might be acceptable in certain situations just to see what is on the page, but not for anything important.

If you really want to impress your friends, you will create your printed piece with images that are saved at 650 dpi (dots per inch), which is closer to museum quality. The conundrum comes in when you try to do a lot of fancy stuff in Photoshop with a large image saved at 650 dpi. You need quite a bit of RAM to be able to crank that out in any reasonable amount of time.

All right, now repeat after me: images for the web are 72 dpi, and images for print are at least 300 dpi. That’s it. Two numbers. Web, 72. Print, 300. Got it?

File Formats

We’ve already talked about jpeg images. What about the others? For the most part, jpegs will suffice in a myriad of situations. There are, however, times when someone may give you a different format.

Some of the more common file formats are .gif, .jpg, .png, .eps, ai, .pdf, .tif

Why do you need to know this? Well, let’s say you need an image for a project due at the end of the day. Your contact emails you the image, and you don’t get to it until 4 p.m., and then realize that the file won’t open in your image editing software because it’s the wrong kind of file. You call your contact back and he or she has already left for the day!

Here’s a quick rundown of the formats and what they are used for:

• GIF (Graphic Interchange Format): can be a static or animated image, used on the web for basic graphic images when really small image sizes are needed. It doesn’t render gradients or photographic images well.
• JPG/JPEG (Joint Photography Experts Group): most commonly used photographic/raster image format used on the web and in low-end digital photography.
• PNG (Portable Network Graphics): newer image format that allows for transparency in an image on the web.
• EPS (Encapsulated Post Script): image format that contains information useful to printers when outputting high-end graphics.
• AI (Adobe Illustrator): A proprietary document format for vector illustrations and graphics.
• PDF (Portable Document Format): that enables viewing of multi-page documents on a variety of platforms.
• TIF/TIFF (Tagged Image File Format): High-end photographic image format that contains more information for fine-grained editing and printing.

If you are dealing with image files for a logo, you will want to get it in an .eps or .ai or .pdf format, which will enable it to be scaled up or down easily without affecting resolution. If you are having it professionally printed, the printer will want your logo in one of these formats.

For situations where you need a high-resolution photographic image for print or editing, you should ask for a .tiff file. If you are working with smaller size images for the web, a .jpeg will do just fine.

If you need to email a multipage document or series of images, converting it to a PDF file will make it easy to email and also for people to view it. They will not need any particular software to view your content, except for the free Acrobat Reader, which most people have already. More and more printers like to receive materials in PDF format as well.

Unless you are a web designer or developer, you will likely not find yourself dealing much with creating .png files, but if you ever download or print out images from the web you may come across this format. It is used when transparency is needed, but if you print it out on its own you will likely get a plain white background.

Vector Images

You’re heard the term “vector” but aren’t really sure what it means. The quick explanation is this: vector images differ from raster images in that you are not dealing with a field of pixels or dots, but a series of dots and lines. Think of farmland viewed from above. The field of sunflowers is like a raster image, and the fence surrounding them is like a vector image. The posts are the points and the metal wires in between are the lines connecting them and forming the image.

The advantage of vector images over raster images is that file sizes are much smaller, and you can scale them up or down at will without losing any crispness or detail in the image. This is because what happens between the dots and lines is defined by the distance between them, and the angle of the “handles” that you can angle or lengthen or shorten to set curves. When you are enlarging a raster image, for example, the computer has to “guess” how to fill in the pixels based on the colors already existing in in the image, and as of this writing, no one has yet figured out a way to take the guess work out of this process.

The disadvantage of vector images is that photographs are by nature raster images, and to achieve the look of a photograph in a vector format requires many hours of expert work to achieve and lots of practice and patience. If you want to see examples of this, do an online search for “gradient mesh”, which is the tool in Adobe Illustrator that can be used to achieve this effect.

Don’t worry if all this isn’t entirely clear. My goal is to give you a basic idea of what the various image formats do. Next, let’s look at a few image editors.

Image Editors

Okay, so now you know a little about what do to with your images, but what is the best way to edit them? In the not to distant past I might have given you a list of desktop image editing software, but there are now quite a few free of low cost image editors available online these days, so I’ll limit my list to those.

Most of them will require you to register if you want to save or store your images, but several allow you to demo their product anonymously to see which one you feel comfortable with. There are more than what I’ve listed here, but these seem to be the most prominent on the scene right now.

• Adobe Photoshop Express This editing system seems pretty responsive, and the tools are organized into basic categories with more available when you choose what you’d like to do, whether it’s just cropping and resizing, or decorating or emailing.
• Picnik Picnik has a very simple set of tools, but it’s clear and easy to navigate. It even has an “auto-fix” feature for those who don’t want to bother with doing their own fixes. It has basic resizing, rotation, cropping, exposure control, red-eye reduction and sharpening tools. No registration required to use.
• Pixlr A more advanced editor that lets you upload images from your desktop or the web. It also let’s you create an image from scratch with paintbrush, pencil, paintbucket and type tools. Pixlr also has a Firefox plugin and a very basic “Express” version of their editor for those who want fewer options to choose from. I also found it to be very responsive with little wait time for image processing.
• DrPic.com Probably the simplest editor of the group. The page opens up to the editor and give you the option to load a picture and choose the format you want to save it in. Editing tools include resize, crop, rotate, contrast, autofix, text, blur, sharpen, frame, Polaroid, oilpaint and grayscale.
• Sumo Paint This is more of a tool for creating an illustration from scratch, but you can still use it with any type of existing image. It has many more “painting” features than the other editors, and quite a few effects to choose from, including 3D, reflection and lighting filters.
• Aviary Phoenix Very popular editor with live previewing and layers. Could be intimidating for the novice user, but more advanced users will appreciate the thought put into this image editor. Aviary Phoenix is part of a large set of online tools made by Aviary, including a color editor, audio editor, effects editor and a vector editor.
• WebResizer.com If all you want to do is resize an image, this tool is for you. Gives you a side by side comparison when looking to make your web images as lightweight as possible. Also allows for sharpening, rotating, exposure, contrast and saturation.

My advice is to visit them all and see which one seems to be the easiest for you to work with. Have fun and don’t forget to bookmark the one you like best.

They had an outdated logo that was a very detailed drawing of a building crane and wanted something much simpler. They had lots of high quality photographs of men on the job, and the sheer size of the pipes they installed dwarfed the men inside them. If a pipe were to burst under the freeway, this is the company the city calls to fix it.

So I’m thinking: Big. Pipes. Underground. Drilling. Water. Construction.

They tell me the only caveat is that orange should be in the color palette as they already had this color on much of their equipment. The logo should be readable really small and also really big. On the side of the freeway big. I rolled up my sleeves and started drawing.

Here is a selection of some of the designs I presented.

This first design really spells out that this company drills holes in the ground, and makes use of the type itself. The next design is more abstract, and could give the feeling of being either below the surface, in a trench, or in a dugout area.

This design drew heavily on a pattern that I saw on the front of one of the drills I photographed. Though abstract, it conveys a sense of strength and toughness.

This logo takes a bird’s eye view of a pipe, and the outer shape was taken directly from a pipe I saw in one of their photographs. The configuration with the logo in the center of the type gives it a more formal appearance.

This version takes a more illustrative approach, giving a three-quarter view of a pipe. I’ve also utilized gradients, which is a less traditional, but very contemporary approach.

This next logo is my personal favorite, as it is involves simple shapes, but gives a sense of perspective and also of equipment/construction. The client liked it, but wanted something simpler still.

I took it one step further toward simplicity, and gave the orange more priority.

In the end, the client opted for the utmost in simplicity, a drilling down of sorts in their quest for visual representation of their field, and asked for a plain circle. They liked their previous typeface, Bauhaus, but wanted an update, so I chose Utopy, which is very similar to Bauhaus, but has breaks in the letterforms. The lowercase “b” feels somewhat pipelike, and they were very happy with the finished mark.

This is a logo I designed for an iPhone application that would enable the user to reap the same rewards as are offered for paper versions of loyalty cards. The client wanted it to read equally well on its own, and as a small iPhone app icon. We went through several color studies before settling on yellow and blue. This project involved creating a full-color version with a gradient, a flat 4-color version, and a b/w version with and without a gradient. I also provided a PDF styleguide.

You can protect yourself to a certain extent with regular backups of your site; but wouldn’t it be better not to let the bad guys have their way at all? Once your site has malware installed on it, any visitors to your site with PCs will likely get infected, and then Google will slap a big ugly graphic on your site’s homepage.

Anyone searching for you will read a warning message in the search results. Even worse, you infect hundreds of visitors before Google has a chance to notice.

Even if you get your site back up and running in short order, there is still the matter of clearing yourself with Google, which can take up to 2 weeks. At this point, I’d like to remind you of the old adage, “an ounce of prevention is worth a pound of cure.”

I have been a big fan of content management systems, especially Wordpress, but their biggest strength—the modularity of Php—is also their biggest vulnerability. In other words, this moduularity is kind of like having a number of armored plates rather than one large sheet of metal protecting you: in between the plates you can still get stabbed—if your attacker knows where to press his blade.

Everyone who uses Wordpress gets the same set of “plates”, and so this makes the attacker’s job that much easier. He knows where the vulnerabilities are. Larger companies with big budgets likely have devoted some time and money towards web security, and have likely plugged up their holes, or moved their plates around to keep potential attackers guessing. Small to mid-sized companies, however, are more liable to fly by the seat of their pants and hope for the best.

This is what web hackers are counting on, and as a result the largest growing segment of sites getting attacked is in small to mid-sized business websites. This is not good news, but fortunately there are some simple steps you can take to protect yourself. I will list some of the more common measures, but by no means is this a comprehensive list.

1. Use strong passwords.
2. If you are logging into your site from a PC, do regular scans to make sure your machine is clean. If you get keystroke logging software on your system it doesn’t matter how many times you change your password because someone else can see everything you are doing. If possible, limit other online activities that could compromise the computer you use to access your website or web hosting.
3. For wordpress sites, research and utilize the more popular and well-reviewed security plugins.
4. Periodically search the web (or create a Google Alert on this topic) for current threats to content management systems.
5. Hire a programmer to “harden” your Wordpress installation. In other words, to make it hard enough to break in that the attacker will look for an easier target.

It’s just like if you leave your house with doors and windows unlocked: it doesn’t mean that you will get robbed, but if someone with thieving intent happens by, you don’t want to inadvertently roll out the red carpet. So do the right thing and visit the dentist once in awhile and install some security measures. You won’t be sorry.

Here’s a logo I did for a new basketball team in Pittsburgh, PA. They wanted something with an old train and a basketball in it that could be embroidered onto shorts and jerseys and provided me with the color palette.

I’m experimenting with a simple, imperfect style reminiscent of cut paper for this illustration. I think this type of image, and especially architecture, is suited for it. I will be creating more “travel” type illustrations as time allows.

This is a logo for a basketball skills camp in Pittsburgh. The coach wanted something that was reminiscent of all the old factory buildings there, and that would look good on T-shirts.

Krafton Publishing was a start-up company that published wall calendars. I love it when the product and the company name lend themselves so well to each other. I also designed a number of their calendars, but because of their low budget, had to work really hard to get the photography they had to look good. Also, each 18-month calendar had a number of events in it…the calendars were printed in Hong Kong and we had to proof and mark them up and then send back to Hong Kong. It was quite a production. In the end, I liked the logo the best.

Since they didn’t have any complete projects yet, I suggested we use illustration to get the message across, and later they could update new pictures of their work. They wanted a Flash animation for conveying their most important concepts, and a framework they could keep updated themselves without much training, so I suggested Wordpress.

I designed the color palette of the site to go with updated colors on the logo, but after the site was built they decided to revert back to the original colors.

The color palette needed to compliment the existing identity system, and they wanted to incorporate illustrations to quickly convey the complex nature of the company’s product. I came up with several versions for the home page, and they chose the third one in this lineup. The inside page style is underneath.

One of Panpoticon’s Marketing people was interested in seeing a comp with a functional wheel that would engage people coming to the site.

Below is the design direction they chose.

This is the inside page template design.

In addition to designing the pages, I animated several of the illustrations which included links to inside pages. I partnered with Craig Miranda of Miranda Design to build out the site.