Thoughts on Design

What type of image should I use online, JPG, GIF, or PNG? Simple question, but the obvious reply is another question. How are you going to use the image? One of my favorite quotations is Horatio Greenough’s “form follows function”. The function of an image should control the image’s file type. A few things to consider:

• Is it a large image?
• Is it a photograph, logo, line drawing, or simple graphic?
• Are there file size requirements?
• What color profile is required?
• Do you need to match image colors with any other object on the site?
• Are there subtle gradations of color?
• Are there large blocks of a single solid color
• Is transparency required?

Once these questions are answered, the file type required is much easier to determine. Some tasks can be accomplished by all three common web image file types, others by only one or two. The need for subtle color transitions for instance would rule out GIFs, while the need for transparency would rule out JPG. If you need both of those things together, a PNG file is the only real option. Look at the function required, and use that to control the file type choice.

JPG files are the best web solution for photographs, images with subtle variations of color, and images with large blocks of a single solid color. They also compress well, allowing for larger images to still have reasonable load times. They do not however, allow for transparency. This format also uses lossy compression, which means compression of the file causes loss of detail. The more compression, the more loss.

GIF files are very good for logos, allow transparency, and use a non-lossy form of compression. They also allow for animation of images. The downside of this is that they only allow for 256 colors, so color matching can be awkward. Due to the color limitations, GIFs also do not reflect subtle gradations of color well.

PNG files are a nice compromise between the two. They allow transparency, and can use up to 24-bit color. This allows them to use both the subtle color range of of the JPG, and the transparency of the GIF. In practice, I’ve actually had more luck with using PNGs for transparency than GIFs. Just as PNGs are better at subtle color gradations than GIFs, they also seem to be better at subtle gradations of transparency.

The key here is to look at the purpose of the image. File type follows function. 

I’ve been a fan of the PhotoShop Pattern Maker, but after that tutorial, I might have to give it a try. The use of it with the photo was interesting, but I loved the text pattern they created. I can see using some variation of this in print work.

I came across 53 Ultimate Tips For Better Photoshopping the other day. A very good list of PhotoShop shortcuts, both commonly known and not so well known. It is one of the more comprehensive lists like this that I’ve seen.

Scott Kelby has a great post about Photoshop vs. My Camera.

“Can’t you just take them out in Photoshop?” Yup, I could but I really hate doing that, so I just moved my camera to a spot where I could compose the frame without the wires being visible. That was much faster and easier—getting it right in the camera.”

People constantly underestimate the amount of work it takes to fix a photo in PhotoShop. Getting the photo right the first time is often much easier, and almost always gives you a better final product.

Creating a Stunning Old-World Look in Photoshop

Here are 30 Photoshop Secret Shortcuts.

“Well, what I mean by “secret” is that these shortcuts are not documented in the menus.”

h/t Adobe Photoshop Daily Tutorials

Have people you need removed? From photos that is. Here’s and interesting technique for doing just that. It requires some planning when you’re shotting the photos, but isn’t too technically difficult. Seems to me that it would work both ways too. Need more people in a photo? Bring people from multiple photos into the same photo. Some interesting double exposure type images could be done this way too.

I always like to link to lists of resources for prodcuts and tools that I use. Here’s some lists of PhotoShop resources that are pretty good.

• The best photoshop resources & more! « VCC Graphics Technology
• John Nack on Adobe: Great Photoshop CS3 beta resources

How often do you visit a website and find that it isn’t functioning properly?

Lack of functionality is a very common problem that I see. A site needs to function reliably and consistently, regardless of the platform and browser choices of the viewer. Too many designers seem willing to sacrifice functionality in exchange for one web gimmick or another. Building a website is more than just slapping the pieces together and praying. Test, test test, and then do it again. Here is a short list of things that need to be checked. It is by no means complete.

• Have you checked Mac and PC? How about Linux?
• Does it work in IE7? Firefox? Opera? Safari? Did you forget IE6?
• Have you checked all of the pages, even the obscure ones?
• If it’s a blog, have you verified that the RSS feeds are working?
• Are all of the images loading? Even those called by the CSS?
• Could any of those images be made to load faster? Dial-up viewers would appreciate it.

Don’t let minor problems with your site cause major problems with your viewers and your clients. Good design is great, but if you can’t make it work, it’s useless. Make sure that your functionality is as good as your design.

This is far an away the best list of PhotoShop tutorials I’ve seen.

Today (actually it has taken me about a week) I have put together a huge list of Adobe Photoshop tutorial resources as well as Photoshop directories & search engines. Since Adobe Photoshop is the premiere Image Editing software that almost all graphic designers and web designers use, I feel it is important to make a list of the Adobe Photoshop sites where you can find quality Photoshop tutorials, tips, and techniques. - Graphics N Graphic Design Blog