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.
Web Design Essentials, by Maria Giudice and Anita Dennis, $36, Adobe Press
Designing Web Graphics.4, by Lynda Weinman, $49.50, New Riders Press.