Setting Slice Options BC39 To do so, select the slice you want to reorder. Then, on the Options bar Bonus (refer to Figure 2-4), click one of the following icons (left to right): Chapter 2 ✓ Bring to Front: Move the selected slice to the top of the stack. Slicing Web Images ✓ Bring Forward: Move the selected slice up one layer in the stack. ✓ Send Backward: Move the selected slice down one layer in the stack. ✓ Send to Back: Move the selected slice to the bottom of the stack. Setting Slice Options Okay, here’s the part you’ve been waiting for: What do you do with these slices, anyway? In the Slice Options dialog box, you can control how a Web browser uses the slices. You can set or view the options for any slice by double-clicking the slice with the Slice Select tool or by clicking the Set Options for Current Slice button on the Options bar. Either command opens the Slice Options dialog box, shown in Figure 2-7. Here are the parameters you can set in this dialog box: ✓ Slice Type: You can select Image (the usual choice), No Image, or Table. Select No Image if you have Figure 2-7: Specify how your browser uses a slice that contains only a solid slices via the Slice Options dialog box. background color or text (meaning text on the HTML page, not in your Photoshop image) because a nonimage slice downloads very quickly. If the slice is part of a larger image and contains no actual image content, you can speed up the download of that portion considerably. If you select No Image, the Slice Options dialog box changes, providing space for you to enter the HTML tags or text you want to appear in the slice. Select Table to get a table cell with the type you specified in it. ✓ Name: In this text box, you can enter a custom name for your image slice (unless you selected No Image as the slice type), usually based on its content. You can name slices automatically by using the Slice Output options, which I describe in the following section. ✓ URL: If you enter a Web address in this text box, clicking anywhere in the slice links to this address. BC40 Saving Your Slices ✓ Target: Briefly, the target is the default frame (if your Web page has frames) that will be accessed in the URL you specified in the URL text box. Describing how to write HTML tags (the language used by Web browsers) is beyond the scope of this book, but if you’re interested in more information, check out HTML, XHTML & CSS For Dummies, by Ed Tittel and Jeff Noble (Wiley). ✓ Message Text: In this text box, type a message you want to appear in the browser’s status bar when the mouse passes over the slice. If you enter nothing, the URL is displayed. ✓ Alt Tag: This is important text that’s too often neglected. Alt text appears in nongraphical browsers (that is, browsers that show only text and not images) and also pops up as sort of a tooltip when the mouse passes over the slice. Many people still use nongraphical browsers, par- ticularly users who are visually impaired and rely on text-to-speech soft- ware to translate Web pages to sound. Alt text allows these folks to “see” a description of your image and serves as a handy explanation for users who have graphical browsers. The Alt text also shows up if users suffer a lengthy wait while images download. ✓ Dimensions: These text boxes show the width and height of the slice and its coordinate location in the image. You generally don’t want to change these settings at this time. ✓ Slice Background Type: Select a color for the transparent portion of an image slice (for example, when you’re using a transparent GIF) or the full area of a No Image slice. Your choices include None, Matte, Black, White, or Other. Click the Background Color swatch to select a specific hue. Saving Your Slices After you define your slices and set all the options, you can save your image with its slices. Use the Save for Web & Devices feature (discussed in Bonus Chapter 1) to optimize your slices. Photoshop then lets you ✓ Select the best parameters for each slice. For example, you can save a slice containing spot illustrations or graphical text as a GIF, or a slice containing many colors as a JPEG. ✓ Optimize each slice for appearance and download speed. Photoshop also saves the HTML code needed to display your slices and link them to the URLs you specify. To preview how your image would look in a browser without having to code it in HTML, save a copy in the JPEG file format. Launch your browser and choose File➪Open (or Open File). Navigate to your desired JPEG, select it, and click Open. Your image appears in the browser window. Saving Your Slices BC41 Putting It Together Bonus Chapter 2 Creating a Splash Page Mockup Slicing Web Images Many designers conceptualize and mock up their Web pages in Photoshop before they compile the components in an HTML editor, such as Dreamweaver. Before you sit down in front of the computer, have an idea of what you’re going to create. I always do some rough sketches of any page I design. That way, I’m not staring at the monitor waiting for my page to magically take form. When you’re ready to work with those ideas onscreen, follow these rough steps to cre- ate a splash page with great images, buttons, and logos: 1. Open all the images you want to use in the page. For example, you can create a splash page (also called a home page in some cir- cles) for a pseudo company called Adventuretrekker.com. For the lowdown on prepping your images for the Web, check out Bonus Chapter 1. Rather than give you a million cross-references in this exercise, let me just provide a blanket caveat that a lot of techniques, such as selecting (Book III), masking, blending, applying effects, and using layers, are covered in detail elsewhere in the book (Books V and VI). 2. Choose File➪New to create the canvas you’ll use to composite your Web page. The New dialog box appears. 3. Specify your dimensions, mode, resolution, and background contents. For the Web, the mode should always be RGB. You can set your background con- tents to any color or to be transparent. The resolution is really irrelevant because the pixel dimensions count for onscreen viewing. However, people often use 72 ppi (pixels per inch) to make it easy. continued BC42 Saving Your Slices continued The dimensions depend on the demographics of your audience. If you want to design a page that anyone in the world can view, even those in less-developed countries who are still cruising on old PCs with small monitors, you may want to stick with 800 x 600 pixels. You need to go even smaller (480 pixels) for the vertical dimension for pages designed for netbooks. The page can be even a tad smaller if you want to take into account the browser menu bar and controls. Otherwise, 1024 x 768 pixels (or larger depending on the audience) may be the ticket. Which- ever you choose, leave space for the browser controls, if needed. I’m sticking with 800 x 600, 72 ppi, and white contents for my splash page. You can also give your file a name in the Name text box. Finally, I’m setting my Color Profile to sRGB, a good standard to use for Web graphics. For more on color profiles, see Book II, Chapter 3. Note that Photoshop also offers Web presets. Select Web from the preset pop-up menu. Then, select your desired size from the Size pop-up menu. You don’t have to create a new blank canvas to composite your multiple images. Instead, you can use an image as your canvas and drag your supporting images onto it. Just be sure that the base image is the correct mode and dimensions. 4. Make your first selection. Then, with the Move tool, drag and drop the image onto your blank canvas, as shown in the figure. For my page, I’m using the image on which I created a snowstorm in Book VII, Chapter 2. I made a rectangular selection with the Rectangular Marquee tool and dragged the image onto my white canvas. I left an open area at the top for my navi- gation bar. Be sure to name all your layers (double-click the name in the Layers panel). Creating a splash page can require a lot of layers, so layer management is essential. Saving Your Slices BC43 Bonus 5. Make your second selection, and again drag and drop the image onto your splash Chapter 2 page. Slicing Web Images For my page, I’m using an image of a polar bear sticking his head out of a hole in the ice. 6. Apply any layer masks you need for your images to blend in with the canvas or the other images. Click the Add Layer Mask icon at the bottom of the Layers panel. Use the painting tools to create your desired mask. My polar bear doesn’t quite look like he’s actually part of the snowy landscape background, so I applied a layer mask and blended him in accordingly. I then used the Brush tool, with a feathered tip, set to Airbrush mode with a Flow Rate of 10%, to paint around the edges of my polar bear, as shown in the figure. 7. If you’ve prepared a logo, drag it onto the splash page. If you’re using a vector art logo, such as one created in Illustrator, just choose File➪Open. Specify your rasterization settings. If the logo is at least 100% of its intended size, rasterize it as RGB, 72 ppi, and leave the dimensions at the default setting. 8. Create the type and/or buttons for your navigation bar. I’m not a big fan of buttons unless they’re simple and understated. I prefer to use type only for my navigation bars, like I’ve done in the figure. But hey, it’s a free world; if you like buttons, go for it. continued BC44 Saving Your Slices continued Be sure that your type looks legible onscreen. Check out Bonus Chapter 1 for tips on making your type look its best. I used the Futura font for both my logo and navigation bar, set at 27 points and 12 points, respectively. I set my anti-aliasing to Crisp. You can create buttons quickly and easily in Photoshop. Using the marquee or shape tools, draw a shape such as a rectangle, an ellipse, or even a custom shape on a separate layer. Open the Styles panel and, with that layer active, simply click a preset style. Several preset libraries are dedicated to buttons. You can find them at the bottom of the Style panel options menu. 9. Apply any layer effects or styles to your images or type. I kept it simple and just applied a drop shadow and inner bevel to my logo type and a drop shadow to my logo. Be sure to keep Use Global Light selected so that your light source for effects is consistent among all your elements. 10. Add title text to your page and apply any layer effects or styles desired. Saving Your Slices BC45 Bonus I added my title type in the Impact font by using two sizes. Because my type over- Chapter 2 lapped and was offset, I put it on two different layers. I then applied layer effects — Slicing Web Images drop shadow, inner glow, and inner bevel, as illustrated in the upcoming figure. Of course, you can do this step concurrently with Steps 7 and 8, if you want. Then again, you can do any of the steps in whatever order you desire. There are no hard- and-fast rules, so just let your creative juices take over. 11. If you want to, you can now slice your image into chunks, which you can optimize separately. Although not mandatory, sometimes slicing your image can help your viewers per- ceive that a page is downloading more quickly. A Web page with slices loads as pieces, so users can get glimpses of the graphics and don’t have to wait for the entire page to load at once. Slicing also allows you to take chunks of your page and apply separate optimization settings to them in the Save for Web & Devices dialog box. continued BC46 Saving Your Slices continued 12. Use the Save for Web & Devices dialog box to compress the slices at different rates according to the quality needed, as shown in the figure. You can also apply image maps and rollovers to slices in Dreamweaver. If applying your slices to individual layers makes more sense, rather than to the image as a whole, you can do that, as well. Bonus Chapter 3: Other Sources of Information In This Chapter ✓ Adding notes ✓ Examining metadata in Adobe Bridge ✓ Finding out information about Photoshop and your computer P hotoshop offers all sorts of ways to find and add information about your images: The Info panel keeps data about X and Y coordinates or color information at the ready, depending on what tools you’re using. At the bottom of the image window, the status bar shows your file’s size and dimensions. The keyword feature in Adobe Bridge enables you to add key- words that help categorize images. In this chapter, I cover other ways to find information about files or Photoshop itself. These methods may not be for everybody, but if you do need them, they’re handy to have. The notes feature lets you add comments for colleagues or lets others leave comments for you. In Adobe Bridge, photographers, journalists, and others who need to use Photoshop files for specific applications will want to know about the Metadata tab, which enables you to view IPTC data, Camera Raw data, and more. And if you’re looking for information about Photoshop or your computer, the Help menu offers a hodgepodge of information that you’d never think you need but can help when you’re trying to troubleshoot patches, updates, plug-ins, and other system information. Applying Notes Everybody’s a critic! That’s especially true when you’re using Photoshop in a work environment — or in any sce- nario that involves anything but 100-percent freedom to perform your Photoshop magic as you want. Sometimes, you want to collect comments from your colleagues, approvals from your supervisors, ideas from your friends, or nit-picks from your cli- ents. Photoshop lets everyone have his or her say by using notes. You can use this clever feedback tool without worrying about physically modifying the work that you’ve carefully done. BC48 Applying Notes Text documents are often distributed for approval in a Portable Document Format (PDF) by using Adobe Acrobat Reader, and comments are added by using either the full Acrobat application or Acrobat Reader. Photoshop is compatible with Acrobat, too, so you can save your Photoshop files in the PDF format. For more detailed information on the PDF format, see Adobe Acrobat 9 PDF Bible, by Ted Padova (Wiley). Text annotations, which Photoshop calls notes, are text comments that now appear in a dedicated Notes panel. Notes are indicated by a yellow note icon in your image window. If you’re reviewing someone else’s notes, simply double-click the note icon to open the Notes panel. You can do a lot of things with notes: ✓ Show or hide all the notes. Choose View➪Show➪Notes. ✓ Open the Notes panel from its icon. Double-click the icon. You can also choose Window➪Notes. Or you can click the note icon in the Options bar when the Note tool is active. ✓ Edit a note. Open the Notes panel, select the note, and revise the text by using standard editing commands. ✓ Delete a note. Select the note and press Delete. Notes can also be deleted via the Notes panel. ✓ Delete all notes. Right-click any note (Right-click or Ctrl-click on the Mac) and select Delete All Notes from the context menu that pops up. You can also select a note and click Clear All on the Options bar. ✓ Move a note’s icon. Drag the note icon. Creating a note To create a note, follow these steps: 1. Select the Note tool in the Tool panel. It shares a flyout menu with the Eyedropper tool. 2. If necessary, change the name in the Author text box on the Options bar. Just click inside the Author text box and start typing. By default, when you create a note, the name you entered when you installed Photoshop appears as the author of the note. However, you may be working on an image with someone else’s computer, or you may be on the lam and using an assumed name. Be sure that everyone looking at the file uses a unique name so that you can sort out the various notes and, perhaps, give all of them their proper weight (that is, always do what the boss says, but take Seymour the intern’s comments with a grain of salt).