Document Sample
					                                                      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
           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.
BC42   Saving Your Slices

              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

5.   Make your second selection, and again drag and drop the image onto your splash           Chapter 2

                                                                                                    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
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.
BC44   Saving Your Slices

              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

      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
      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.
BC46   Saving Your Slices

        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).

Shared By:
Description: IT IS PART 34,35,36,37,38,40