Basic information about digital art formats.

 

Fundamentals: bitmap vs. vector

Bitmap or Raster:

This is literally a grid of boxes (pixels), so many pixels wide by so many pixels tall. Most digital formats are a variation on the raster bitmap.

If you think about it, you may deduce that it is simply impossible to do something like draw a circle or diagonal line that's smooth when the basic element, the pixel, is a square shape. Indeed, if you worked in a one bit color (just black or white) bitmap mode in Photoshop or a similar program - you'll have small 'steps' everywhere a line isn't perfectly horizontal or vertical.

Anti-aliasing is how a bitmap can display a curve or diagonal line that SEEMS smooth, it is a process of subtly 'blurring' the edges of shapes with intermediate colored pixels. This is also why many 'transparent' images have a 'halo' (surrounded by pixels [often light colored] that are anti-aliased to the original background color).

Raster files, because the pixels can be very small and independently colored, are ideal for all kinds of images, especially photographs. But there is a catch. Once the image is created it is pretty much locked into the original size and resolution permanently. You can always make a bitmap smaller, but if you make it bigger you may simply make what was once small pixels invisible to the naked eye into huge blocks of color that are more like an eyesore.

That's why many professional graphic designers require very powerful computers with lots of RAM, they must work with bitmaps large enough to print well on the side of a bus or billboard if that's the ultimate purpose of a project - and that's an awful lot of pixels for a computer to keep track of.

 

Vector:

Vector format art is completely different from bitmaps, there are NO PIXELS. Vector format uses math to precisely define curves and angles of shapes, and the color or gradient the shape is filled with. Programs like Adobe Illustrator and CorelDraw specialize in vector graphics, but even Photoshop features a few vector tools.

If you are entirely new to vector art, think back to grade school where you cut out shapes of colored construction paper and pasted it in layers to make an image, illustrator works similarly.

The advantage of vector art is that there is no resolution, the image can be scaled up to be very large or scaled to be very small, and the image quality remains the same. This is why graphic designers always design things like logos as vector graphics, that way the image is flexible enough for anything from a rubber stamp to a billboard.

Vector drawing tools are excellent for line art that uses flat color or gradients - fits the needs of silkscreen production perfectly too. It's very hard to create anything resembling a painting in Illustrator, but Illustrator's 'gradient mesh' tool can allow for good results if the artist has far more patience than I. It's also common to mix vector and raster image elements (which is how I'd personally deliver a painting in Illustrator).

Flash animation delivers sophisticated animation online, at a small file size, by exploiting vector technology. The vector math yields a far smaller file size than many frames of raster files (which is standard for more traditional digital animation).

 

Raster File Size:

Inexperienced, sometimes even experienced, users of raster graphic applications sometimes have trouble wrapping their head around digital file size. That's because if we are used to paper, the transition to thinking in pixels involves new ways of thinking about things.

In Photoshop, when you adjust file dimensions, you have the option to lock in the file size or not.

If you lock in the file size, this means your image data is not going to be messed with, if you make the image smaller, it's because the pixels themselves are being made smaller - so more pixels fit in the space of one inch, if you enlarge the image, the pixels grow larger....

If you decide to allow the file size to change, you are telling photoshop to add or subtract pixels and/or to make pixels bigger or smaller. This is where confusion can ensue. If you make the physical dimensions of the image height and width smaller or larger, this will add or subtract pixels accordingly. If you maintain the image height and width, and change just the resolution, this will add or subtract pixels while the physical dimensions stay the same.

If you add resolution to an image it doesn't improve the image quality at all, what happens in photoshop is it simulates making the pixels larger (one original pixel becomes four of the same color, for example) - and then antialises them. It becomes an awful mess if you over do it. That's why graphic designers work with master images larger than is needed, frequently. You can't add fine detail that was never there to begin with, which is the purpose of a high resolution master. If you reduce the file size of a high resolution Photoshop master for web, the end result will often suggest more detail than an image of the same size created at that size or from an artwork at a lower master resolution.

Web Formats:

Because some people use dial up, and because high resolution raster images can choke even broadband, special formats that compress the file size to make it smaller are critical for online presentation. Here's the main formats, roughly what they do and why you'd want to use them.

The first thing to realize about a web graphic, is that it is meant primarily for looking at on a computer monitor, not printing. The standard web resolution is 72 pixels per inch, which is exactly the standard physical native resolution of a pixel based computer monitor - it is also a very very low resolution for purposes of looking good in print. This is why it's a poor idea to use web optimized graphics for any purpose other than posting online.

The images provided in this article are sized for the web. Here's the very best quality file, full color png 24, scaled to be larger than intended. See the pixelization, the 'stepping', chewed up type, lack of detail? With raster art, it looks as good as the pixels are small enough to not notice.

GIF:

This is an 8 bit raster format, that means no more than 256 different colors. It works by interpreting a raster image as blocks of the same color, so instead of saving information for every pixel, it saves the information that from position 'a' to position 'b' the colors are all 'white'. This format works very well with flat color cartoons. With photographs the pixels need to be 'dithered' (spread out to mix visually and imply more than 256 colors) and very often the pixels are visible to the naked eye, there's also less opportunity to map areas of the same color, photographic GIFs tend to not reduce very well in file size.

One cool curiosity relating to GIF is that the format has been designed to allow animation, this has been exploited frequently for online advertisements and sometimes annoying 'fun' flashing animations.

Gif also allows for virtual transparency, but anti-alias 'halos' are an issue as only one specific pixel color can be defined as 'transparent'.

Here's a gif sample, it is mildly destructive, defaulting to a web color palette, 55k.

JPEG:

This is a peculiar file format, specialized for photographs. It is a highly destructive format, you pay a high price in image quality to get the file size small. The format retains essential grayscale information, but wreaks havoc with the colors. Most of us that have been online for a while know what a 'jpeg artifact' is.

With JPEG, images that are blurry will compress to a smaller file size than images with sharp contrasts, the opposite of gif.

This format is very popular with digital cameras because it allows a user to take and store more images. I have mixed feelings about this as jpeg always destroys some image quality, and the commonality of the format in digital cameras is fooling many novices into believing it's a reputable master quality format when it's anything but.

Here's a jpeg sample, with moderate jpeg artefacting, 15 k - the smallest file size for this photo.

 

PNG (8 and 24,32):

This is a newer web format, created to address the limitations of the traditional formats. The main features of .png are that it compresses the file size of an image while retaining all of the original image quality, it also features a real alpha channel for transparency. I don't claim to understand exactly how it works, but it involves somehow using vector math techniques to define the raster image.

PNG8bit is comparable to Gif, which is also an 8 bit color format. If your original image is full color, making it 8bit will eliminate much of the image quality. My experience of PNG8 when contrasted with gif is that the file size over all clocks in a little bigger for png8, but png8 has better detail quality. I even sometimes use png8 for photos, judging the 8bit color a lesser image quality sacrifice than jpeg artefacting in some cases (jpeg has better color than 8bit, png8 has better detail preservation than jpeg).

Png24 and 32 are full color formats, the difference between 24bit and 32bit color may be tough for the naked eye to distinguish, so don't feel you're missing out if your application doesn't support PNG32. These full color formats are the only way to go to present full color quality images online, and the file size compression doesn't damage image quality at all. The alpha channel transparency allows for something unique in a web format: anti-aliasing to transparency! No more halos!

Large 24 bit color images, even compressed as png24, are going to be very large files compared to the jpegs and 8 bit formats online. So use in moderation. The smaller logo that will be used frequently and needs to be transparent over any color background should be a png24, otherwise there will be a visible halo around the logo over some colors (that it's used repeatedly suggests it could be loaded in a browsers cache, so it's only loaded once).

If you are using the 'Design your own shirt' designer program, you are limited to web formats. I strongly recommend using png24 as the file format for your full color photos and original art - the designer program will accept it, and it will print far better than any other web format if the original art is high resolution and full color.

Here's a png8 sample, similar to gif being 8bit, but the color and pixel placement is truer to the original, 49k.


this is png24, no artefacts, no visible pixels, perfect color, 137k It looks a LOT better small, doesn't it?

 

Master Art formats:

The native program format for an art file, retains all of the meta-data required by that program and is often ideal when both you and the recipient of the file use the same software. Sometimes your program may be newer than the program the person you are sending the file to uses, in which case it is usually possible to save as, or export as, the format used by an earlier version of your program. Current versions of software almost always open files created in earlier versions of the same software.

Here at NYCtshirtfactory.com, we use Adobe Creative suite CS3, including the latest IllustratorCS3 and PhotoshopCS3. Files in Illustrator or Photoshop format are good if your are submitting to our Artists Program. For master art we prefer full size art (up to 14" x 17" for the largest shirts) at a pixel resolution of 200 pixels per inch or greater. If the art is less than 200 pixels per inch we may not be able to use it (the artist designed shirts are meant to be of the highest quality).

If you want to save a digital art master in an open file format that many different programs can work with, there are two main file formats and the pdf.

TIFF, this is a master raster file format, it optionally includes minor file compression (avoid the jpeg compression option), and accepts and retains photoshop layers and alpha channels.

EPS, this is a master vector format (postscript printing code even), excellent for saving vector files that need to be opened in a wide variety of applications (Illustrator to Coreldraw, for example). It also is a very good master format for raster graphics, but tiffs are more broadly accepted as the raster format of choice.

PDF, This is the portable document format and is terrific in that it allows a person to view and print a high res master art document, without any graphics program at all, just the free acrobat reader. As the format is from Adobe, it also is a way to save vector files. Some printers prefer to receive master documents in Adobe Acrobat format as it is currently very advanced and excellent for production purposes.

I've found I can save an Illustrator file as a PDF (checking a box to allow the file to be editable), and it is still fully editable as if it were a native illustrator format.

PDF is a hybrid of a web format and a master format, With the Adobe acrobat program you can customize the pdf to compress or not compress art, include web hyperlinks or even embed video.

 

TROUBLESHOOTING:

When saving a master file and preparing to upload it, if you are linking external files to your master file - they will need to be embedded into your file, or included with the master file (Illustrator designs frequently feature embedded raster art). Type in Photoshop will need to be rasterized, or you must include the font you use with your file. Type in Illustrator must be 'expanded' or else you must upload the font used with the Illustrator document. We likely do not have the same fonts you do. Making sure all the fonts and images are included is called 'preflighting'.

If for web purposes you are using JPEG format, make sure the color format is RGB. ALL WEB FORMATS SHOULD BE IN RGB before saving as or exporting as a web format. If you make a JPEG out of art in CMYK or any color format other than RGB, you may generate a broken file that cannot be opened or viewed by any graphics application.