Join Jan Kabili for an in-depth discussion in this video Understanding the web photo workflow, part of Photoshop CS5 for the Web.
- View Offline
Even if you know Photoshop pretty well, you may not have a clear sense of what order to do things in when you are preparing images for online viewing. In this chapter, I'll help you with that by suggesting a workflow for you to follow when you are working on photographs destined for the web. The first step in this workflow is to find and open a photograph to work on. That can be difficult to do based on the original numbered file names from your camera. You could use the separate file browsing application, Adobe Bridge CS5, that comes with Photoshop, to browse thumbnails of photos. But in CS5, you don't have to bother exiting Photoshop and going into another program to do that.
Instead, you can use a new feature, the Mini Bridge panel, to do that from right here in Photoshop. You can open Mini Bridge from this panel icon or from the same icon up here in the Application bar. I am going to start Mini Bridge by clicking Browse Files. I'll make the Mini Bridge panel bigger by going to the bottom-right corner and dragging down and the left border and dragging to the left. In the Navigation pane, I'll navigate to the area of my computer where I have the files that I want to view. In this case, I'll go to Favorites and then to Desktop. Here in the Content pane, I can see what's on my desktop.
If I double-click a folder there, I can see the subfolders that it contains, and I can scroll down to the chapter07_photos folder. I'll double-click that, and I can see its subfolders. I'm going to double-click the 07_01_workflow folder. And now I can see a thumbnail preview of each file in that subfolder. I can drag this slider to the left to make those thumbnail previews smaller or bigger. One nice thing about Mini Bridge is that it displays thumbnails for lots of different kinds of photos and other web assets, everything from JPEGs or RAW files, to layered PSD files, GIFs, PDF files, Adobe Illustrator files and more.
And I can use these thumbnails to select and open the file that I want to work on. If I wanted to open a JPEG in Photoshop for editing, I could just double-click its thumbnail here in the Content pane. But you know these days I prefer to start my photo workflow by shooting not JPEGs but rather, RAW files. There are a number of reasons for that. For one thing, a RAW file consists of the raw uncompressed image data from a camera's sensor. Now that memory cards are cheap, I don't have any reason to skimp on shooting RAW files. The advantages of RAW files over JPEGs are that they give you more image data to work with, they give you the creative freedom to process a photo from scratch so it looks the way you envisioned it, and RAW files are not permanently changed by your edits.
This RAW file has a .nef extension, which means that it's a RAW file for a Nikon camera. But you'll see different extensions on RAW files, depending which brand of camera they were shot with. If I double-click this thumbnail preview of this RAW file, it opens not in Photoshop proper, but rather, in Adobe Camera Raw, a separate plug-in for Photoshop. You can learn lots about the Adobe Camera Raw interface in other courses in the lynda.com Online Training Library. For now, I'll just give you a quick summary of what I might do with a RAW file for the web.
I'd start here in the Basic controls, where I can do things like set the white point by dragging the Exposure slider, set the black point by dragging the Black slider, change the overall brightness of the photo with the Brightness slider. And I often will increase the clarity of an image to make it a little crisper and the vibrance to add some saturation. When I'm done making all of my adjustments, I'll come down to this blue line of type and click it to open Workflow Options, which I'll set specifically for the web. These options determine how the image will be when it opens in Photoshop for further editing.
I'll change the Color Space of the image to sRGB, which is the recommended color space for images destined for the web, as explained in an earlier movie on color management. And I'll set the Bit Depth of the image to 8 Bit, because a 16-bit photo can't be displayed in a web browser. And I don't plan to do extreme edits to the photo when it opens in Photoshop. If I want to make a print as well as a web copy of the image, I'll leave the size as it is. But if I'm going to be preparing the image only for the web in Photoshop, I'll reduce the pixel dimensions of the file here so that I have a smaller image to work with in Photoshop.
I won't bother changing the Resolution field because when I am preparing an image for the web, I'm interested only in the pixel dimensions, and not in the number of pixels that are assigned to every inch. I'll explain more about the concept of resolution in the next movie on resizing a photo in Photoshop. I'll set the Sharpen menu for Screen sharpening, since this image will be displayed on the screen. And I'll leave the other settings as you see them here, and I'll click OK. Next I'm going to open this image into Photoshop to apply some edits that I can't accomplish here in the Adobe Camera Raw window.
Those might include adding filters, layer styles, layer comps or editable text, doing more advanced retouching than I can do here, or working with some additional photo adjustments like shadows and highlights. To open the RAW file with these settings in Photoshop, I'll click Open Image. I am going to collapse my Mini Bridge panel here, so that I can see my photo in Photoshop. As you can see, it's still a .nef file. One thing to keep in mind about Adobe Camera Raw is that the adjustments that I made to the image there haven't directly changed the original RAW file; instead, those changes are retained in re-editable XMP instructions that are embedded in, or accompany, the Raw photo.
Here in Photoshop, I like to try to continue a nondestructive workflow by doing things like making adjustments on adjustment layers, rather than directly on the Photo layer. Or if I want to apply a Filter, I'll apply it as a Smart re-editable filter that doesn't directly change the photo. To do that, I'll make sure that I have Photo layer selected in the Layers panel. I'll go up to Filter menu, and I'll choose Convert for Smart Filters. I'll click OK, and then I'll go back to the Filter menu, and I'll choose a dilter. I am going to choose a Stylize > Wind Filter.
I'll click OK to apply that Filter. And if you look at the Layers panel, you can see that that Filter is on a separate sublayer. And that means that I can delete it or edit it as I wish without disturbing the original image. If I want, I can apply another filter, going up to the Filter menu > Blur, and I'll choose Gaussian Blur, and I'll OK. I can also make use of the layer Mask that comes with Smart Filters by clicking on it in the Layers panel and then getting a Brush tool, making sure my foreground color is set to black.
And I am going to paint over parts of this image to hide the Smart Filter from those parts. And that's just one example of nondestructive editing here in Photoshop. When I'm all done with this and any other edits that I might make in Photoshop, an important part of my workflow is to save the master file, with all of its layers and edits, as my source file. To do that, I'll go to the File menu, and I'll choose Save. I'll navigate to my desktop. I am going to give this file a more meaningful name. I'll call it flowers.
I'll make sure that Layers is checked, and that Embed Color Profile is checked. And I'll click Save, and then I'll click OK. If I go out to my Desktop, I can see that .psd format source file. I'm going to keep this source file safe because it's the file that I'll come back to later if I need to make changes to the image that I am making for the web. That's better than optimizing the file as a JPEG and then going back and making changes to that optimized JPEG, because each time I make changes to a JPEG and resave it, I lose a little bit of image data.
There are two more steps that I recommend in this photo workflow, before opening the photo from Photoshop, into the Save for Web & Devices window to generate a JPEG copy for the web. The first step is to make a copy of this master file and resize that copy at the size I want to use it on the web. That will keep my source file large for other uses. And the second step is to sharpen the resized copy of the photo because the size of an image affects how much sharpening is needed. I'll show you how to do both those steps in the next two movies in this chapter.
- Customizing a web workspace
- Coloring web graphics
- Optimizing images as JPEG, GIF, or PNG files
- Creating background graphics for sites
- Working with transparency
- Building navigation bars, buttons, and rollover graphics
- Designing web page mock-ups
- Adding animation
- Automating web-related tasks in Photoshop
- Integrating with the rest of the Adobe Creative Suite