Last week I was introduced to online color grabbing tools. Both are simple, fast online programs. You type in a URL of an online image, press submit, and the program delivers a color palette and the hex #s of the colors. These programs are useful tools for creating color families - especially if you have an image or logo that is an inspiration for key component for a design piece.

The first tool comes from http://www.degraeve.com/, The Projects of Steven DeGraeve. His goal is “to provide free, high-quality, web-based tools that are easy to use for all users.” His color palette genertaor can be found here: http://www.degraeve.com/color-palette/. My sample image is my headshot from our About Us page: http://www.rdesignonline.com/images/raffi-thumb2.jpg. I typed the URL of the image in the search bar, clicked  “Color-Palette-ify!”, and my result was this:

A blurry version of my original photo is shown (odd, because the photo itself is perfectly clear) and I get 2 color palettes - “dull” and “vibrant”. I might use the word “muted” or “subtle” instead of dull. It’s almost a CMYK palette vs. an RGB palette, simply because  CMYK colors are naturally more muted than RGB colors. Neither palette picked up on the color of the bricks behind me or suggested white as a color - the image does have a lot of white in the woodwork and silver chair.

The second color grabber I used was http://colourgrab.com/. It has the exact same premise - key in the URL of a photo and receive color swatches in return. Fast, free, easy. I used the same photo and got this:

This tool was able to pull a lot more colors from the photo, and also allows me to download an .aco file (an Adobe Photoshop swatches palette -  Adobe COlor file.) The tool is a bit more robust, and the black background makes the colors pop a bit more, but ironically the Adobe Photoshop swatches palette is incorrectly called an “Adobe Switch”. No bigee, but most designers will notice - and this tool does seem to be meant for designers. Because the results include a pie chart, I hoped it would show which colors are used most by giving them a bigger slice of the pie. In doesn’t, though. They call get the same size “slice”. The downside of this tool is that it does not display the image with the results, which I think would give the user peace of mind knowing the correct image was used to generate the color palette.

I normally play around in PhotoShop to develop color palettes for projects, but if you need some inspiration these tools are a quick fix. Do you have a favorite color grabbing tool? If you think we should design one that combines the best of both worlds, let us know. What features would you like to see added?

Do you ever wonder why you need four different file types of your company logo?
Why are some images a .gif and some a .jpg?
Graphic designers, digital camera owners and most computer users will come into contact with two types of computer image files; raster images and vector images. They may look the same, but upon closer inspection you’ll find that they are different in many ways.

Bitmap artwork is a photo, a scanned image or an image created in an image-editing program like Photoshop. Bitmap images are also called raster images. Raster images are made up of colored pixels. Pixels are small, colored squares that together form a digital image, like tiles creating a mosaic. When there are enough pixels in one space, and they are small enough so as not to be individually seen, a high quality digital image is seen. More on pixels and pixilation can be found in our post entitled, “Seeing Spots: Understanding photo and file resolution”. But you can remember this: any photo file is a bitmap image.

Resolution and size of a bitmap image matter most when the file is going to be printed. Images must be of sufficient resolution in order to print with good results. An image of 72 dots-per-inch (dpi) will look great on a computer monitor or online. 300dpi or higher is recommended for printing. If you are scanning an image to be printed, scan at a minimum of 300 dpi. Common raster file types include: .psd, .jpg, .tif, .bmp, .gif or .png

Vector artwork is prepared in a vector-drawing program and is based on PostScript code. PostScript is the standard language for desktop printers. It translates images on the screen into geometric shapes or objects that will print the same on any printer. This consistency is invaluable to the graphic design world! When you type in a word processor, the letters are drawn with vectors. Notice that you can enlarge the type from 12-point to 72-point and it does not pixilate, or become fuzzy. The ability to resize artwork and not lose any visual clarity or consistency is the feature that makes vector files preferable to raster files in the “print world”.

To create vector artwork (using a program such as Adobe Illustrator, Corel Draw, or Aldus Freehand) a designer “plots” vector points and the points are connected with straight or curved lines. The shapes can then be filled with a color, a gradient, a pattern or nothing at all. If a designer prepares a vector logo or drawing, it can be printed at 1 inch for business cards or 40 inches for a banner and not lose any clarity. Because a vector image uses PostScript code, the image scales perfectly. However, because of the dependency on Postscript, vector images will not print well on printers that are not PostScript enabled. Don’t be concerned. It will print correctly on a postscript laser printer or postscript imagesetter. Common vector file types include: .eps, .ai., .ps

When you are working with images, logos and photos, here are some general rules to help you figure out what type of file you need:

• JPEG files are a good choice when you are working with raster images such as photos, in which every pixel can be one of millions of different colors.
• TIFF files are also raster files, and are flexible when sharing art because they maintain a high resolution and can be opened with almost all computers, scanners and desktop publishing program.
• GIF files are limited to a small number of colors. These are better when you are dealing with vector images and text (unless there’s a lot of blending). GIF files can support animation and transparent backgrounds.