LESSON 7 – Preparing Files: Formats, Resolution, & Color Modes

Read about

1. Image Essentials
2. Image Size and Resolution
3. How to set Image Size and Resolution (video)
4. Color Modes

Graphics Formats

Bitmap vs. Vector Graphics: There are two types of computer graphics: bitmaps and vectors. All computer images can be classified into one of these two categories.

Bitmap  graphics are made up of tiny squares called pixels. If you enlarge a small area of a bitmap image, you can see the pixels; at the original size, the individual pixels seem to merge together to create a photo-realistic image. Bitmap images are sometimes referred to as pixel-based or raster images. Scanners and digital cameras always capture images in pixels. Photographs must be displayed as bitmap images. Gradients and blends are also displayed as bitmaps.

Vector  graphics are actually a series of objects that can be defined by mathematical formulas and coordinates on the computer screen. Vector graphics may include lines, rectangles, squares, circles, ellipses, arcs, and curves. The paths (or outlines) that define these shapes can be filled with color.

Advantages of Each Format: The biggest advantage of using vector graphics is that they can be scaled up or down without losing details or quality. Vector graphics always print at the best resolution of the printer, regardless of what size you make them. The primary advantage of bitmap graphics is the ability to display the wide range of colors and shades in complex images.

Popular Graphics Software Rules of Thumb:

• Adobe Photoshop is the best choice for editing bitmap photos and scanned images.
• Adobe Illustrator is ideal for creating line art, logos, and stylized text that may need to be resized frequently as vector objects.
• Photoshop also has some vector capability, but it has to create vectors by the use of layer masks. If you expect to create a lot of logos or line drawings, you probably want to use a native vector application like Illustrator.

File Types & Color Modes For Different Purposes

The file type you save your Photoshop image as will depend on what the intended use will be. Will you be using it in a printed document or will you be using it on the web or digital device? Color modes are not necessarily tied directly with file types but there is a strong association with best practices depending on how  you are publishing the file.

Note: You should always save a copy of your .PSD document with all layers intact in case you need to edit or save as another file type later on.

For Web

When preparing bitmap graphics for use on the web, you will use bitmap –  GIF, PNG or  JPG formats.  Photographs and graphics with gradients should always be saved as JPG and Graphics without gradients, with areas of consistent color, can be saved as GIF or PNG.

GIF and PNG are formats that support transparency. Meaning, if you publish an image with transparency on a webpage with a background color or image, the transparent pixels will allow the background to show through.

RGB: (Red, Green, Blue) This is the color space that you use for graphics and images presented on screen.

For Print

In general,  the best format for saving bitmap images for print is TIFF.  The best format for vector images for print is EPS (keep in mind that EPS images will only print properly on a PostScript printer). Neither TIFF nor EPS will display on web browsers. TIFF is a lossless formats (compression algorithm that allows for perfect reconstruction of image data).  TIFF and EPS files can be imported into layout programs like InDesign and can be edited in Photoshop.

PDF is the standard and universal format that you would use to submit your final product to a commercial printer.

CMYK:  (Cyan, Magenta, Yellow, Key [black]) If you are having work printed on an offset printer, you must prepare your files using CMYK color space.

This video is a fun and basic overview of CMYK vs RGB:

This video is a bit long and overly detailed but the producer is giving a ton of important information you should know about if you will be doing much offset-type printing jobs:

Resolution For Different Purposes

For Web

Images intended for use on the web are normally saved at screen resolution, 72 ppi (pixels per inch).  Digital cameras normally capture images at 72 ppi but with large height/width dimensions depending on the megapixel of the camera.

Using images on the web that are optimized and compressed for screen display is essential to reduce the web page file size and load time. You’ve already been using Photoshop’s export for web function that helps us do this efficiently.  The width and height of the image (in pixels) will correspond and depend  on the website you are publishing your image to.

For Print

• Images that will be printed should be saved at twice the linescreen of the output device.
• Laser Printers: In most cases, print graphics should be at least 150 ppi.
• Offset printers (commercial printing generally for large quantity print-jobs):  graphics need to be at least  300 ppi–always check with your printer for the proper resolution before you start working on a project that will be printed offset.)
• Photos printed on an ink jet printer should have a resolution of at least 200 ppi.

Resizing Images

You can resize images in Photoshop by choosing Image -> Image Size and choosing new dimensions or new resolution but what happens when you do this? If you choose a higher resolution or image size than the original image, Photoshop will interpolate the information presented in the original image to create new pixels  based on surrounding color pixel information. The interpolation algorithms that Photoshop uses are only so good.  You can get away with doing this to some extent but drastically increasing the number of pixels in an image will produce a poor image quality – there are only so many original pixels to work with in any given image.

ASSIGNMENT #7

Advertisements for digital cameras prominently feature the number of megapixels the camera is capable of recording. Consumer grade cameras come in resolutions around 10 or more megapixels. But what does this mean in practical terms? How many megapixels do you really need? The answer depends on how you intend to output your photos. Depending upon your computer monitor’s resolution (usually 72ppi), the image above should appear to be about 4 x 6 inches. In actuality, it measures 288 x 432 pixels (4*72, 6*72). It’s probably as large an image as you’d use on a web page, and all it requires is just under an eighth of one megapixel (288 x 432 = 124,416 pixels).

What if you wanted to use this photo in a high quality glossy brochure printed   at a professional printer? You would want the best quality possible. Professional printers typically recommend a minimum resolution of 300ppi at the printed dimensions for all digital images for high quality output. If you simply used the image above in the high quality brochure, it would look like you took it from the Internet and would be jagged with low-resolution jpg artifacts and have an unprofessional appearance.

Scenario:   You have been given the task of creating a high quality glossy brochure. The brochure will be printed at a professional printers who require at least 300ppi on 17″ x 11″ paper and folded in half (8.5″ x 11″).   The client wants you to use a single photo that spans the full area of 17″ x 11″ of the layout. You have been given a 12 megapixel camera by your company and are required to take a photo that will fit this space on the brochure, is it enough?

1. Calculate how many megapixels your camera must be capable of recording in order to print an 17″ x 11″ photo at the minimum quality suggested by the printing company.
2. Write a brief description of how you arrived at your answer.
3. Also answer these questions:
   1. What file type is the photo  you will use in your brochure layout?
   2. What file type do you give to the printer?
   3. What color mode will the images and the final file be in? Why?
4. Log into Blackboard  and submit your answer by going to Quizzes & Uploads -> Assignment #7. Enter your answer in the text box provided there.

Log into Blackboard and take Quiz #7 – File Types, Resolution, & Color Modes

This week you  will be doing a peer review (critique) of one of your classmate’s Gnome projects  from Lesson 6.

Constructive criticism is essential for getting another point of view on any project you work on. It is always a good idea to ask for feedback (both positive feedback and also how  it could be improved) from others before moving to final production on a design or presentation.

Please review  critique basics for ideas of what to look for and an example.

While the Gnome project was all about masking, which takes some time to master, we have also covered a number of techniques for improving images in general as well as addressing things like composition. The focus was not necessarily on a final Gnome product so much but now you  can help each other take their Gnomes  to the next level.  The challenge for this critique is to offer suggestions on how the image as a whole could be improved based on techniques or information learned from any lesson.

Post your critique in the comment section of another student’s Gnome post.