|
******************************
*** DesignGeek ***
******************************
Tips and techniques for the digital designer
In this issue:
-- Tips for Managing Web Color in Photoshop
-- Cool Technique: Self-Contained InDesign Files
-- Who Should Not Upgrade to QuarkXPress 7.01
-- Key Questions to Ask Designers Applying for a Job
Issue 56, 9/14/06
Written by Anne-Marie "HerGeekness" Concepcion
... for her clients, colleagues, random contacts and interested subscribers
(c) 2006 Seneca Design & Training, Inc.
==========================
Tips for Managing Web Color in Photoshop
==========================
You spend hours in Photoshop creating the perfect background image (or button, or photograph) for a client's web site. From the native .psd file, which you were careful to keep in RGB mode, you use Save for Web (from the File menu) to create a .jpeg, .gif or .png version of it.
But when you view your saved-for-web artwork in a browser, ack! A significant color shift washed out the intensity of your colors and reduced the contrast overall. But when you open that .gif or .jpeg or .png in Photoshop, the colors shift back to what the original .psd file looked like. Dang!
Sound familiar? If you've driven yourself crazy trying to figure out what's going on here, this story's for you.
-----
What's Going On Here
-----
The most common cause is that you're using Photoshop in a way that's meant for print work, not web work. You're probably using Photoshop for both, right? And figured, since all web artwork is RGB, as long as you keep the Photoshop file as an RGB image, what you see in Photoshop will be what you get when you open the RGB image in a browser.
But there are actually two types of RGB you can use in Photoshop. The one for print is called "Adobe RGB (1998)" and is what you're using if your Color Settings (in the Edit menu) are using any Presets with "Prepress" in the title. Look at the first dropdown menu called RGB Working Space and you'll see that Adobe RGB (1998) is active.
The other type of RGB is called "sRGB [bunch of numbers here]" and is the default color space of every web browser known to mankind. If your Color Settings are using a Preset with "Internet" in the title, that's what your Working Space RGB is set to -- sRGB. But if it was, then you wouldn't be reading this article.
The key here is that when you choose Save for Web, Photoshop automatically converts your image to sRGB. Or to put it more accurately perhaps, it's stripping the Adobe RGB (1998) profile attached to the image, since GIFs and PNGs don't support profiles.
Browsers ignore profiles too and assume every image is in sRGB, which is what Save for Web is showing you. (JPEGs can optionally embed a color profile, but only Safari recognizes them. If you want a JPEG with an Adobe RGB profile, you have to use Save As, not Save for Web. And hope all your site visitors are using Safari.)
You can see the sRGB color shift happen right there in the Save for Web dialog box, but it's easy to fool yourself into thinking it's just a "crappy preview in a dialog box" thing. Nope, it's actually showing you the image as it will be seen in a browser, without a profile, a naked sRGB image. You can click the little globe icon at the bottom of the dialog box to open a preview of the artwork in a real browser and confirm it.
So why, when you open that sRGB web artwork in Photoshop, does the image look almost exactly like the original PSD file -- no color shift? Probably because Photoshop defaults to assigning your current RGB Working Space -- Adobe RGB (1998) -- to images with a different or missing profile while you have it open. This can happen without you even being aware of it if you've turned off the "Missing Profiles: Ask When Opening" option in your Color Settings.
-----
How to See What You'll Get
-----
There are two parts to achieving a "no surprises" Photoshop-to-web-image workflow.
First, pre-empt Save for Web's color shenanigans by converting your image to sRGB before it gets there. If you change Photoshop's color management settings (Edit > Color Settings) to the Web/Internet preset, or just choose sRGB as your RGB Working Space, all new files you create will use sRGB from the start. It's a good habit to get into before sitting down to a web graphics session in Photoshop. (Don't forget to switch back to a print-centric preset, or switch back to Adobe RGB, when you're done.)
The new color settings will not affect existing images with embedded Adobe RGB profiles. To change an existing image, open it and then go to Edit > Convert to Profile (not Assign to Profile). Choose sRGB for the image's Destination Space and click OK. If you open the Convert to Profile dialog box again, you'll see that both the Source and the Destination spaces have changed to sRGB.
The best part about converting to sRGB in the main program (instead of letting Save for Web do it for you) is that the colors are actually mapped to the new color space while maintaining the existing colors as much as possible. It's often difficult to detect any significant color shift at all in the move from Adobe RGB to sRGB. But they are most definitely sRGB, so when you use Save for Web, the colors are maintained, within the limits of the file format you choose.
The second task of the no-surprises workflow is especially important for Mac designers. You probably know that monitor settings in Windows have a higher gamma (2.2) than Macs (1.8) . . . and if you don't know nothin' 'bout gamma numbers, Miz Scarlett, just know that all monitor colors are darker on Windows. Since web images are viewed on a monitor, all your web images will appear significantly darker to the vast majority (like, 90%) of people viewing the web site on a PC than they do on your Mac.
It's surprisingly easy to set up Photoshop on either platform so that images appear as they would in the other's browser. If you're on a Mac, first go to the View > Proof Setup fly-out menu and choose Windows RGB. Second, press Command-Y (Ctrl-Y on a PC). Third ... there is no third. Command/Ctrl-Y toggles View > Proof Colors on and off. When it's on, the image in Photoshop looks just as it would in a PC browser.
And of course if you're a PC-based web designer and you want to see how something will look to a Mac user, set the Proof Setup fly-out menu to Macintosh RGB before turning on Proof Colors.
-----
Web Features in the Info Palette
-----
You may already know that if you choose Palette Options from Photoshop's Info palette menu, you can choose two color readouts that the Info palette dynamically updates as you move your cursor around the image.
Savvy print designers like to set the first color readout to RGB (because they're working in RGB, the most flexible color space) and the second color readout to CMYK, because when they're done with the image they'll be converting it to CMYK from the Image > Mode menu. So as they work on the RGB image they can get an inkling of how various areas will translate to CMYK mixes without actually converting it.
If you're creating an image for an existing web site and you have to match colors there -- which are usually supplied to you in Hex code, like C6C6C6 -- you might want to choose Web Color as your second readout in the palette. Web color shows you the Hex code for RGB colors in the right side of the palette. That way you can hover over any part of your image and confirm that it's the exact color you want to match.
More web-friendly goodies are hiding in the Info Palette Options dialog box. When I'm working on a web project in Photoshop, I like to change the Mouse Coordinates to Pixels -- it's all about the pixels, baby. And in Status Information, I turn on Document Profile (you know why) and Document Dimensions, which saves me from having to obsessively check Image > Image Size to assure myself yes, I specced my file correctly to so the button I'm working is exactly the size I need.
|| top ||
==========================
Cool Technique: Self-Contained InDesign Files
==========================
Designers moving from QuarkXPress to InDesign tend to overlook some useful features in InDesign because they never existed in XPress. They're not on their "I did [x] in Quark, how do I do [x] in InDesign" radar.
One of the most-frequently overlooked InDesign features is the ability to embed linked files, such as images, right inside the layout file. If you've ever imported a Photoshop file into an Illustrator document, or any image into a Microsoft Word document, you've seen this feature more overtly. You're given the choice of embedding the art into the file or linking to it right in the Import dialog box.
InDesign doesn't have that option in its Place dialog box; all imported images are linked by default, just as in QuarkXPress. You can see which files are linked to your layout by looking at the Links palette. Designers have to be careful of those original files, as the layout won't print properly if InDesign can't find them, just like XPress.
But as I said, you can choose to embed any or all of these linked files. When a placed image or PDF is embedded, InDesign doesn't need the external native file to print or export to PDF properly. If someone else needs to work on the layout, all they need is the layout file and the fonts, which InDesign can't embed. (That's only an option for PDFs.) But at least you don't have to worry about collecting all the outside files and transferring those too.
As with Illustrator and Word, embedding an imported file is a feature you should use carefully, as it has some downsides. I'll get to that in a minute.
-----
How to Embed
-----
Oh, it's so complicated. Open the Links palette from the Window menu and select the linked file(s) you want to embed. Then from the Links palette menu, choose Embed File. You're done.
You'll see that embedding a linked file doesn't delete its entry from the Links palette, instead it adds a little icon to the right indicating it's an embedded file. You can double-click the entry to see the path to the original image it embedded.
The path that Link Info shows to the embedded image is just there as a sort of historical record, though. You can move, rename, modify or even delete that external file, and nothing changes in your layout or in Link Info. You don't get a "modified" or "missing" alert because InDesign is no longer tracking it. You've captured all the data from the external file at that point in time and saved it in the layout file.
-----
How to Unembed
-----
Change your mind? You can always Unembed, even if the original file is long gone. Select the embedded file entry in the Links palette and choose Unembed File from the Links palette menu. An alert immediately asks if you want to re-link to the original file or have InDesign create a new file.
Relinking to the original during an unembed will only work if the original file still exists at the same location and with the same filename. You can't point InDesign to where you moved it to as you can with a normal Relink. But assuming you haven't moved or renamed the original, once you unembed it via the relink option, the file is no longer embedded and is a normal link again.
Amazingly (to me, at least), is that other choice: InDesign can unembed a file even if the original is nowhere to be found, by creating it anew. If you opt for a new file, the program asks where you want to save it, but not what its name will be, because it automatically uses the same filename as the original. As soon as it's done, the Links palette entry for the file loses its "embedded" icon and is now linked to the new file InDesign just created, same as usual.
The first time I tried this with an embedded raster image (a complicated .psd file which I had scaled and flipped and feathered and done all sorts of abusive things to in InDesign), I opened the InDesign-created file in Photoshop with trepidation. I was ready for some Frankenstein-like version of my original image, an unholy creation complete with stitches and studs. But the image, boringly enough, was simply exactly what I originally placed, same dimensions, even the Photoshop layers and blend modes were intact. I've had InDesign unembed all sorts of files, including PDFs, and have yet to find an instance where it didn't work.
-----
When and When Not to Embed
-----
First, because Edit Original doesn't work on embedded files (it's grayed out) you probably should keep it as a normal linked file until you're certain it's final, and only then embed it. It's no tragedy though if down the road you need to modify an embedded image. Find the original native file (assuming you still have it; if not, see above) and edit it in its native program. Then choose the embedded link in the Links palette and click the Relink icon. In the Relink dialog box you can locate and select the modified file. InDesign replaces the old embedded image with a normal linked image pointing to the new external file. You can re-embed the new one if you want.
Second, embedding files increases the size of the InDesign file proportionally. Common sense holds that the larger the file, the more likely it will go south at some point ... that's why people use the Book feature instead of jamming all 30 chapters into one InDesign file.
So that 80 MB Photoshop cover is probably not a prudent choice, but screen shots are great candidates for embedding, as are little vector icons, newsletter head shots, charts and graphs, things like that.
In truth, though, I would never embed anything in a layout I'm planning to send to an outside vendor for printing. Vendors don't like it, and it could interfere with their own internal production processes. If I'm going to be sending them a press-ready PDF, though, I might embed some files as I'm working on the layout, just to keep the number of links down to a manageable size. After all, the PDF I'll be sending will have *everything* embedded, so what do they care.
Most often I use InDesign's embed feature for "in-house" work (calendars, meeting notes, employee how-to's) and for student and seminar handouts. After laying out the document, I just select all the entries in the Links palette and embed them all in one swoop. I can still scale, crop, add drop shadows, and so on to embedded images, just like linked ones.
It's handy to have one single file containing everything necessary (except for the fonts) to print the document on our office color printer or to archive on the server. It's better than a PDF in this respect because it's an easily editable file. Other people in the office can grab that InDesign file and update the text, add pages, etc. without having to worry about where the original images are.
Give it a try!
|| top ||
==========================
Who Should Not Upgrade to QuarkXPress 7.01
==========================
Quark released QuarkXPress 7.01 a few weeks ago, a free update to version 7.0 that came out in the spring:
http://www.quark.com/products/xpress/701update.html
Careful reading of that update page, though, shows that it's not actually an update. It's simply the Macintosh "universal binary" version of QuarkXPress 7.0. There are no new features or fixed glitches.
A universal binary program is a Macintosh program that runs natively on both the newer Intel-based Macs and the older PowerPC-based Macs (those dusty, old school "normal" Macs, like the G5 towers you spent thousands of dollars on last December. Soooo 2005).
You can run PowerPC-only Mac programs (that is, non-universal binary ones) on the newer Intel-based Macs, but they run in emulation mode, meaning more slowly than in PowerPC-based Macs. All programs in the Adobe Creative Suite fall into this group, no universal binary versions have been released yet.
So, QuarkXPress 7.01 is a Mac OS X-only program, obviously, and since there are no new features in it, there's no Windows version of 7.01. They probably should have called it 7.0UB or something.
-----
7.01 on PowerPC-based Macs?
-----
If you click the QuarkXPress 7.01 System Requirements link on that 7.01 upgrade page I linked to above, you're brought to the same page as the QuarkXPress 7.0 system requirements: Macs require OS X Tiger (10.4x) and a G4 or later. But since Windows requirements are listed here as well (and Windows can't run 7.01), perhaps the task of creating a new page for 7.01 requirements just slipped through the cracks. Easy to do.
Still, since a universal binary program is supposed to run natively on PowerPC-based Macs, just like non-universal ones, as a Mac user of an "older" PowerPC-based Mac you might be tempted to download and install the free 7.01 update on your G4. I know I was about to do so on my iMac G5, until I read Galen Gruman's recent article on the topic at Macworld.com.
Galen said that based on his tests, running 7.01 on an late-model Intel-based Mac "nearly doubled its performance on computation-intensive activities" as compared to running 7.0 on the same Mac Pro. But running 7.01 on a PowerPC-based Mac, like my iMac G5, actually slowed things down, way down. He said his tests showed "about a 31 percent performance hit with XPress 7.01, compared to XPress 7.0 [on a Power Mac G5]."
Yikes! Guess I'll stay with v7.0 until Santa Claus brings my Mac Book. You can read Galen's full article here:
http://www.macworld.com/2006/09/reviews/quarkboost/index.php
==========================
Key Questions to Ask Designers Applying for a Job
==========================
I was enjoying one of my favorite pastimes recently, grousing with a designer friend about how "design schools aren't teaching what designers need in the real world, which must be why so many younger designers don't know a tenth of what they should, and worse, don't even know that they don't know." (Present company excepted of course! Any twenty-something designers who read DesignGeek are obviously highly intelligent and skilled, destined to lead successful and rewarding careers in the design field, if they're not doing so already.)
My partner in this grouse session, Joe, is an accomplished print/web designer who grew his freelance business into a design studio with five full-time designers, all of whom are young to a fault. I think the oldest is nine.
Joe had to look at a ton of resumes and go through scores of interviews before he ended up with five talented designers who knew their stuff. I've seen it for myself, they can calibrate a monitor with one hand while designing a logo with the other. I asked him how he was able to separate the wheat from the chaff, did he give them tests or something?
He said he likes to sprinkle "telling" questions throughout an interview. His favorite is to point at one of the brightly-painted chartreuse walls in the studio and ask, "What would be the CMYK mix for that color, do you think?"
Hah! Good one, no? I asked him how many get the answer right (or close), and he said 90 percent get this stunned look, and say, "CMYK? Ummm ... I'm not sure what you mean." I was shocked, but Joe just gave me a weary grin, he's used to it.
I thought about his "telling question" theory and realized I had a few of my own. For example, when I interview a freelance designer and I'm looking at their book, I like to point at an interesting headline or call-out and say, "Oh, that's nice. What font is that?"
Too much of the time the answer is, "Uh, I don't know ... the client gave me that." But the ones who give it a shot (I don't mind if they can't name it off the top of their heads) with something like, "Hmm, I think that's one of the P22 script fonts I bought for myself for my birthday last year" (yes, this was verbatim response from someone -- woo-hoo!) or even "That's a Garamond italic, actually, but I don't remember which" jump to the head of my list.
Do you have any telling questions you'd like to share? E-mail them to me at amarie [at] senecadesign [dot] com, and in an upcoming issue I'll include a whole slew of 'em, credited to you (or you can remain anonymous, if you don't want anyone to know your sneaky questions) ... heh. Let me know.
|| top ||
*^*^*^*^*^*^*^*^*^*^*^*^*^*^**^*^*^*^*^*^*^*^*^*^*^*^*^*^*
MASTER THE NEW CS2 APPS WITH HERGEEKNESS!
Do you like what you read in DesignGeek? Find anything useful? Bring me or any of my hand-picked Associate Geeks in for a session or two of hands-on training for your workgroup; here in Chicago or any other city near an airport, and you can have this level of expertise all to yourself. All training comes with three years of 24/7 follow-up support for each student by phone or e-mail.
To learn more, or hear what other clients have to say, contact us or fill out the no-obligation "Request a Training Quote' form on Seneca's site:
http://www.senecadesign.com/training/request.html
Recent training clients in Chicago and throughout the U.S. and Canada include Coldwell Banker (InDesign, Bridge); Defense Language Institute (InDesign, InCopy); John Deere & Company (InDesign, InCopy); College of American Pathologists (InDesign); Riverside Publishing (Illustrator); and Panduit Corporation (QuarkXPress).
*^*^*^*^*^*^*^*^*^*^*^*^*^*^**^*^*^*^*^*^*^*^*^*^*^*^*^*^*
|| top ||
--------------------------------
DesignGeek is a free bimonthly publication written by Anne-Marie "HerGeekness" Concepcion, a cross-media designer and authorized Adobe and Quark training provider. She owns Seneca Design & Training, Inc. in Chicago, Illinois (http://www.senecadesign.com/).
To subscribe to DesignGeek or read archived issues, go to its home on Seneca's site:
http://www.senecadesign.com/designgeek/
To unsubscribe, follow the link at the bottom of this page.
Contact Seneca by phone at 312-946-1100 or e-mail at info@senecadesign.com
Copyright 2006 by Seneca Design & Training, Inc.
Please forward without cutting. Please contact Seneca for reprint permissions. We don't guarantee accuracy of articles. Company or product names mentioned in DesignGeek may be registered trademarks, we use the names in an editorial fashion with no intention of infringement.
--------------------------------
If you had received this by e-mail instead of reading it on my web site, your unsubscribe link would appear right here.
|
