‡‡‡‡‡‡‡‡‡
Dragon
and lion family crest flags
- drawn with Illustrator.
See tutorial on Veerle's blog on creating
a coat of arms.
Understanding Different File Formats for the Web and Print
Working with the various websites, I have become aware of some of the important differences between print media and web, especially the differences between file formats for both print and web. Many times web designers and print designers must use the same files or images to create something for both media. One of the most important distinctions in creating files for print versus for web usage is to have the proper file format and resolution/size. For print, the resolution must be at least 150 dpi, and preferably 300 dpi for images and text and line art. In contrast, the web uses two - three types of image formats which are compressed and low-resolution so that they can be downloaded or cached easily by browsers on the viewer's computer. These images are: .jpeg, .gif and .png. In addition the web uses some other types of files like video and flash files which are larger and contain their own embedded images, and have different requirements in how they are created. PDF files too may contain images and need to be optimized for proper web size in MB or KB. However, for the most part the images you see online are either .jpegs or .gifs on a website. Knowing when to use which one, is important. The name .jpeg stands for “Joint Photographic Experts Group.” This is another name for a bitmap image, which is an image comprised of pixels, or small squares of different colors that combined, make up an entire image like a photograph. The pixels are translated from your camera, whether it is digital, or from a scanned image like a printed photograph, into a .jpeg file on your computer when you save it there. If you have a high resolution image from your digital camera of at least 180 dpi, then you can create a .psd or Photoshop file from that which is a higher resolution file that can be resized to a smaller size. If you start with a low resolution image like 72 dpi which might already be a .jpeg, then you cannot remake that into a high resolution file that would be larger in size or used in another format, without losing some of the picture quality and pixels, because the pixels cannot be stretched to make up for the lack of dots per inch or (dpi) or readable data in the images. Once a .jpeg has been sized to a certain size and resolution and saved with the .jpeg extension, you cannot make it into a bigger image, as it is fixed at that resolution. However, a photoshop file generally can be resized and resampled to alter its resolution. It is best to start big and work down to small than the other way around.
The other type of common file format on the web is a .gif image. Gifs are supposed to be reserved for images that are not photographs or bitmaps, and contain only things like flat color, text and line art; for example, logos and other kinds of illustrations commonly created with Illustrator. When you save a file for the web from one of the programs like Photoshop and Illustrator, and it is comprised mostly of text and artwork like logo art, then you should save it as a .gif image, and you will notice that the colors brighten up when you do so through the program's “save for web” option. The .gif image can be saved with a transparent background so they can be placed on top of another background color in your web layout, if you select the same matt color, in the “save for web” option. It is a compressed file that is designed to minimize file size for the web. Because it identifies color in an image this is the reason it is good for line art. A .jpeg image saves the color but discards other picture data when it compresses a .psd file for the web, so that file size becomes smaller.
If you were to save a .psd file that is a photograph or a bitmap as a .gif image, you will see a deterioriation in the image sharpness and clarity. The image will become less clear, and the pixel data will not appear accurately. This is because the .gif format is not the right format for a photographic image.
Example of a photograph saved as a .jpeg and incorrectly, as .gif file:
|
JPEG The photo saved as a .jpeg file, with a light feathering effect on the background (so that there is not a distinct edge on the image). This image is not as clear as it could be, probably because the original .jpeg was resized at some point, and then saved for the web. This is where the original high-resolution .psd file would come in handy, so that a .jpeg could be optimized to be as clear as possible at the smaller size necessary for the web. However, there will always be some pixel data loss when saving .jpeg images for the web so they never look as good as the original .psd file. |
GIF #1 This
is the same photo saved as .gif image. Notice that there is a deterioration
in the pixels around the edge of the image that appear as wavy lines.
This is known as “color banding.” In Photoshop, you can
avoid this by choosing to apply a dither option to the image when
saving it as a .gif for the web, but the image color and sharpness
will never be as good as if they were saved as a .jpeg See next frame |
GIF #2 In this second .gif image, the dithering effect was applied, and while it reduces the banding effect somewhat, the image quality is still fuzzy and has a lot of dots in it, not as smooth or clear as the .jpeg. Some detail in the dragon does not show up as well as it does on the .jpeg image. This is the reason why photos should be saved as .jpegs. Conversely, the opposite is true for line art that is improperly saved as a .jpeg rather than a .gif image. |
Another
example of a .jpeg image saved as a .gif. Notice the color banding that occurs
in the photograph on the right,
and there is also some loss of color.
|
.JPEG |
.GIF |
A .gif image of Illustrator artwork, saved/optimized for the web with a white matte.
This image was created solely with Illustrator using vector art, and the pen tool. Vector art can be resized and moved or have its color changed without losing the quality of the graphic. Here is the same graphic scaled to a larger and a smaller size, and both saved out as a .gif image. This image can also be saved as a .jpeg image effectively, even though it is line art, but without transparency capabilities. As a .gif image it can have different color matte backgrounds.
|
|
The same .gif image saved with a black matt instead, and placed on a black background in Dreamweaver.
|
JPEG file |
GIF file |
While it may be hard to discern at first, this logo file which is both line art and text, when saved as a .jpeg image as seen on the left the text wavy lines and G-clef all become fuzzy and less crisp. On the right, the text appears brighter and clearer. Illustrator will automatically recognize and save this type of file as a .gif file, which is the correct file format for flat color and artwork.
Text images
with scroll ornaments, as in the example above, can also be created with InDesign
CS2/3 and saved as a PDF file,
then be imported into Photoshop to turn into a .gif image for web use.
Other Illustrator examples showing outline, fill and art brush strokes applied to traced objects:
Photoshop
techniques: photo reflections with black background layer underneath of
a gradient mask on reflection layer, on left.
On the right, with a filter effect, on a white background layer. This can
also be done with image text.
See photo relfection tutorial: http://www.planetphotoshop.com/photo-reflection-effect.html
PRINT DESIGN, .EPS AND .TIFF FORMATS:
For print design you need to work with a much higher resolution like 300 or at least 150 dpi, depending on the size of your document, but for the web, the standards are 96 or 72 dpi, for standard images like .jpegs and .gifs. Print media also uses other file formats known as .eps and .tiff. The EPS file format can be much larger in size and can be scaled as well as transferred between applications or sent to another computer, with all of the editing capabilities still intact. A designer might create a layout with artwork as well as bitmap images, and save the entire file as an .eps file that a printer can make adjustments to. When opened up in Photoshop, the vector artwork in the file is rastereized and converted to pixels, but if opened in Illustrator, the vector artwork is preserved with its editing capabilities. This is important because Illustrator mostly supports vector or line artwork that can be streteched or resized and altered with the pen tool, while Photoshop supports mostly pixels and bitmap images.
A .tiff image is another format that is used to exchange files between applications like Photoshop and Illustrator, as well as from computer to computer. The .tiff image is a bitmap image format that is supported by most image editing programs and scanners. When saving out an image that has both line art and photographs, programs like InDesign can save this as a .tiff image which is also similar to an .eps, so that someone else can open it in Photoshop to resize it, without losing the original quality of the photograph or the line art. It is generally a large file size, and used to save large files of photographic images that can be opened and scaled, and resaved as a .psd file or .jpeg file. You cannot create a .tiff file effectively from a jpeg file, unless the .jpeg is a very large size and high resolution. You also cannot use the .tiff format in a webpage layout. It is only usable as a downloadable linked file, but cannot be displayed on the Internet.
If you have an image created with Illustrator that uses both line art and photographs, then it is okay to save this as a.jpeg if saving it for the web, to preserve the photographic pixel quality in the picture part of the image. The line art does not suffer. However, there are cases where line and text art alone when saved as a .jpeg is reduced in quality, especially when it is a larger size and does not have the sharp, crisp appearance of a .gif.
If a designer creates a logo, and the web manager needs to place that image on the website in various sizes, then the file can be saved as a.tiff image, which is similar to an .eps file, because it can be resized according to the web designer's needs. If the print designer were to just save the logo or artwork to an exact size through Illustrator as a .gif, it makes for some limitations for the web designer, so that the image may not work in the layout the web designer is preparing, unless it fits to the exact pixel size of the layout. Both the .tiff and .eps formats preserve some editing capabilities of the original artwork so artwork or size can be changed, for example, and can be scaled down to meet the requirements of a website layout, without losing its original shape or quality. The .tiff format is primarily used for bitmap images, not artwork, though, so if your file contains artwork it should be saved as an .eps for print. If for web, then it can be saved as a .tiff and resized and saved as a.gif or .jpeg. If a web designer were to take a logo saved as a.gif file, however, and resize it, it would lose its shape and quality, becoming distorted and pixelated, and the same with the .jpeg. Also, a .jpeg or .gif image cannot really be made into a .tiff for the same reasons - it is a fixed size and resolution already.