GRAPHIC TIPS & NEWS

Enhance visual impact with these tips and tricks for getting more out of imagery in electronic environments.
by Rita Amladi
August/September 2005

Most of us have spent our careers focused on design and production for print. But we’ve reached a point where we’re routinely asked to create or share artwork in other media that we might not be completely familiar with. You may be asked to send design comps to a client by e-mail, or to “throw the images on a CD,” create a quick slide show or PDF document that can be viewed by clients on any platform. Or maybe you’d like to create an online portfolio of your best pieces to be e-mailed or posted to a website for potential clients or employers.

In each of these cases, you’ll have to process your artwork in different ways than you would for prepress. In this article, I’ll share some ideas on how to prepare and present your visuals in electronic form.

Familiar … but different
When prepping files for digital media, you’ll be performing some familiar production tasks such as cropping and resizing, contrast and color correction, sharpening, and choosing a file format—although the kind of correction and sharpening you’ll do here is different from processing images for print.

You can perform these functions in any image-editing program such as Adobe Photoshop, Adobe Photoshop Elements, etc. I’ll be showing these techniques using Adobe Photoshop CS2.

File size trade-offs
First, a few notes on file sizes: Digital media offer an unexpected bonus. When the viewing is to be done online, final file sizes are miniscule compared to what’s required for high-quality printing. This is to match the resolution of monitors, which tend to be around 72 dpi, and to ensure that artwork can be speedily e-mailed and uploaded/downloaded from websites. Happily, this also translates to smaller archived projects.

On the flip side, you’ll need to master the art of balancing image quality with file size. Improved quality inevitably means a larger file size, which can be a no-no. Unfortunately, there are no simple rules for determining optimal file size. Optimal size depends on the purpose, resolution, and dimension of the final piece. For example, a comp for a DVD menu might feature a full-screen image at 72 dpi, with only a few selected colors. In another case, a rich-color photograph shot on location and e-mailed to a client might need to be proofed on a color printer, requiring a larger file size. Each situation has unique requirements based on factors like the transfer medium, appearance of colors, final resolution, storage, etc.

Work on a duplicate
It’s very important that you edit a copy of your original artwork, which may have been created for a different purpose. You can either duplicate the file on the hard drive, or choose Duplicate from the Image Menu in Photoshop and save it with another name.

Crop and resize
The goal for resizing an image is to end up with the “ideal” file size—that is, the smallest possible file size on disk and the best image quality at an appropriate viewing size. Unless your resulting image will need to be printed as well (or you’re aiming to stay inside of a standard printable size such as 8x10 in.), you should be thinking in terms of pixels. (Standard units such as inches, cms and points aren’t relevant to this medium, which uses pixels as building blocks).
Prepping Images for On-screen Viewing (cont'd)



Before resizing your image, try to anticipate how it will be viewed. If you plan to e-mail the image, it should fit into a standard browser window. In this case, make the image no wider than 600 pixels (the height does not matter here), and set the image resolution at 72 ppi, since this is the most resolution a computer monitor will display. But if your client will need to print the art to, say, a desktop color printer, set the resolution to roughly 150 ppi.

Crop your image to keep the best parts, rotate creatively, straighten crooked lines, or simply set the final size. The Crop tool in Photoshop will do all of these tasks very effectively.

Alternatively, you can crop the image and then use the Image Size dialog (Image>Image Size) to specify the final dimensions and resolution. Use the Bicubic Sharper option (available in Adobe Photoshop CS and higher) to keep the image looking sharp despite the (sometimes drastically) reduced size. Tip: Save yourself some time by creating an Action to replay these settings on every image that will be saved for this medium.

Size and slice
If you are prepping a high-resolution file for uploading online, learn how to slice an image. Slicing is a way to make a large image load as many smaller ones, making it appear to load faster. You can also use the slicing feature in these programs to optimize some parts of the artwork differently from the rest. For example, a part of an image that contains photographic imagery might compress better as JPEG slices, while a text-heavy part of the image can be optimized as GIF slices. A slice can also contain hotspots and links.

Select a color standard
Images that are to be viewed on screen still need to be edited for contrast and color flaws. The first order of business is to set up some basic parameters for the display of colors in the image. This is because there isn’t any “standard viewing environment” on the web, nor will e-mail applications and browsers color-manage your artwork to your satisfaction. A common approach is to convert the colors in the artwork into a smaller color space that will display colors in a somewhat muted, albeit consistent fashion to all viewers.

Choose Convert to Profile from the Edit menu in Photoshop CS2 (in previous versions, choose it from the Image>Mode menu), and choose the sRGB IEC61966-2.1 profile as the destination color space. This color model represents all the colors available on any standard monitor, which makes it a suitable “one-size-fits-all” choice for this purpose.

Correct tone and color
This is where you can let your artistic talents shine. Unlike in correcting print images, you need not set up highlight/shadow endpoints, as these images will not interact with ink and paper. You can use your favorite tools to create pleasing exposure and color balance in your images.

One of my favorite techniques for creating professional-looking art under a deadline is to use the automatic color correction options available in the Levels/Curves dialog in Photoshop. Click the Options button in either of these dialogs and experiment with each of the three settings in the dialog. I’ve found that most images are enhanced by using one of the last two items (Enhance per Channel Contrast or Find Dark & Light Colors), especially when combined with the Snap Neutral Midtones setting.

Photoshop CS2 gives us a nifty feature called Exposure, which lets you make minute changes to the exposure and mid-tone scale of an image. Choose Exposure from the Image>Adjustments menu.

Sharpen
Whenever you reduce the size of an image, you’ll need to add some sharpening to enhance the details in the image. In Photoshop CS2, you can use the new Smart Sharpen Filter to add prodigious amounts of sharpening to your images, while minimizing sharpening artifacts and halos. As in earlier versions of Photoshop, you can use the Unsharp Mask filter to enhance contrast along the color transitions in the image. Tip: Apply sharpening to a duplicate layer for greater flexibility, and view the main subject at a 100 percent zoom to verify that it is not over-sharpened.
Prepping Images for On-screen Viewing (cont'd)

Choose a file format
As a rule, JPEG is the best format for photographic images, whether intended for e-mail, websites, or PDF documents. The GIF format handles solid color art, vector illustrations, and type-heavy artwork better than JPEG. I like to use the Save for Web dialog in the File Menu for saving files. This dialog lets you to choose a file format by previewing and comparing the effect using large thumbnails. You can also make some quick decisions by checking image download times on a standard dial-up modem.


PDF is rapidly becoming the format of choice for sending comps and proofs via e-mail. The format allows you to present your artwork in a variety of professional ways while creating a file that can download speedily. The viewer will need to use Acrobat Reader, available free on Adobe’s website. Designers and photographers can present layouts and comps with sharp-looking type, single or multi-page documents, even slide shows with transitions. In other words, you can make your art as fancy as you want.

With PDF you can also create documents with some security measures such as password protection and built-in print permissions. This is a good way to safeguard your artwork from being copied or printed.

If you follow this general workflow, you’ll produce good-looking and professional images for on-screen viewing. You’ll win your client’s gratitude for creating art that travels well as e-mail attachments, and is ready to post to a website with minimal download times on your client’s web browser.



Type on the web
Specify appropriate, legible typefaces. Sans serif for body type and sans or slab serifs for display type work best. For more on selecting type for the internet environment, see Allan Haley’s article “Type Rules for Web”.
When choosing a type color, check the Only Web Colors checkbox in the color picker. This will keep the type from dithering or shifting in a browser on an 8-bit display.
Use anti-aliasing on display type, which will minimize the jaggies on low-resolution displays. Don’t use anti-aliasing on type that’s smaller than 10 pt. Also don’t use anti-aliased type on patterned or transparent/fuzzy backgrounds, which make the type hard to read.
If your artwork is text-heavy, optimize using the GIF format with enough colors to represent anti-aliased edges smoothly.
If you’re creating a mockup of a web page, set the HTML text to be aliased so the viewer has a good idea of what the page will look like if a visitor’s browser does not show font smoothing.


Showing (off) your art on screen
It’s important to display your images professionally, whether you’re e-mailing one image or a set of comps. Experiment with these techniques to wow viewers as they download your art.

Instead of sending artwork as a plain e-mail attachment, take time to prep it first. Create a colored canvas or background that make the colors in the image ‘pop’ while keeping the viewer’s attention focused on the art. Many photographers like to set their images against a black background for this purpose.
Frame your artwork to give instant “distinction.” Add a simple black keyline, use rules or white space to border artwork and create a “poster” appearance. Use creative edge effects to make art stand out.
Create a PDF slide show from Photoshop or Adobe Bridge CS2. This sets up in a snap and can provide pizzaz to your presentation.
Quickly create a customized online portfolio using the Web Photo Gallery feature in Adobe Bridge or Photoshop. Photoshop CS2 provides many well-designed Web Photo Gallery templates that you can use to create attractive portfolios (also useful for collaborating with clients online). Two new Flash-based templates can make dramatic presentations, and you can gild the lily by adding a background audio track for your client’s listening pleasure. Just rename any mp3 file to “useraudio.mp3” and drop it into the template folder. Avoid audio, however, if you’re creating a permanent professional portfolio–see “www.MeMeMe.com” for the reasons why.