Quick

You can add your own preset page sizes to the menu shown in Figure 3-5 by editing the file New Doc Sizes.txt found in the Presets folder of your Adobe Photoshop 7 folder. Edit Image Layer Select Filter View Wi Anti-aliased PICT PDF Image PICT Resource Anti-aliased PICT PDF Image PICT Resource After selecting that option, a new window is displayed offering several options for customizing how the file is scanned, such as the following Scan type (reflective, transparency, and so forth) Scan size...

► Note 159

If you're dropping the file into InDesign, choose Window l Links to view the reference to your original file. If at any time you see a triangle with an exclamation point appear next to your file's name in the Links palette, it means the file has been updated since it was dropped into InDesign. To get the most recent copy of the file into InDesign, click the Update button. If you see a circle with a question mark inside it appear next to your file's name in the Links palette, it means the...

Animated, Interactive, and Data-Driven Graphics

Jump to ImageReady for Animation and Rollovers 394 Use Layers to Build Animation 395 Use the Animation Palette to Build Animation 398 Copy and Paste the Contents of Frames 400 Preview an Animation and Adjust the Timing 400 Tween Frames for Instant Animation 401 Optimize GIF Animations 403 Preview Animation in a Browser 404 Animate with the Liquify Command 405 Place Layered Photoshop Files into LiveMotion when Creating Flash (SFW) Use the Rollovers Palette to Build Rollovers 409 Add Layer...

Preview a Browser Tile in Photoshop

When you create your own background tiles in Photoshop, it's nice to be able to preview how they'll display when tiled by the browser in a web page. Luckily, you can do so by saving it as a pattern in Photoshop. TRY IT To preview a browser tile in Photoshop, follow these steps 1. Launch Photoshop and use the File Open command to open your background tile if it isn't already open. 2. Choose Edit Define Pattern and give your pattern a name before clicking OK. 3. Switch over to your web page...

Spell-Check Photoshop Text

Long awaited by Photoshop fans is the ability to spell-check text right within Photoshop. You can use the Check Spelling command to have Photoshop compare the words used in your document to those in its internal dictionary. When a word in your document is not found in Photoshop's dictionary, the program prompts you to change or ignore the misspelling, or add it to the dictionary, as shown in Figure 7-5. TRY u Before you can spell-check your document, you need to make sure the correct language...

^Rasterize EPS Files Created in Other Programs in Photoshop

Photoshop will open most documents with the .eps extension. However, not all layers and vector art will appear as they did in the program with which the EPS was created. For example, Adobe Illustrator and Photoshop are quite compatible programs a lot of the shared features do actually cross over from program to program. You can copy and paste from program to program but layers will not be maintained. If you open an EPS file in Photoshop, the program rasterizes it, regardless of whether it was...

Jump to Image Ready for Animation and Rollovers

While Photoshop is certainly capable of optimizing static web graphics, it is not suited for animation or rollover effects. Therefore, to optimize animated GIFs or save the different states for your rollovers, you'll need to switch over to ImageReady. TRY IT If you already have a web design open in Photoshop that you want to use for animation or rollover effects in ImageReady, choose File I Jump To I Adobe ImageReady 7.0. Your computer will launch ImageReady (if it wasn't already open) and open...

Use Photoshop Mockups as Tracing Images When Building Pages in GoLive

If you designed a detailed mockup in Photoshop containing significant portions that are not comprised of graphics, such as the one that includes form elements or large areas of text, it can be particularly useful to have a copy of that mockup in sight when building the code for the web page. GoLive has a feature that not only allows you to have that mockup in sight while you're building the code but also gives you the opportunity to cut out portions of that mockup and optimize them as web...

Use Photoshop/Image Ready to Preview in a Browser

While Photoshop and ImageReady both do a pretty good job of showing you how an optimized image will likely display in a browser, nothing is better than going to the source. In this case, that means actually previewing your optimized images in any web browser loaded on your computer. By default, Photoshop and ImageReady set themselves up to preview in any browsers they notice during installation. However, if you have any additional browser(s) on your system, you can specify exactly which one(s)...

Use Photoshop's Pattern Maker

Photoshop 7's Pattern Maker command makes it easy to create patterns out of any part of an image. For example, I recently wanted to fill part of a design with an abstract pattern based on the American flag. While I certainly could have tried creating this pattern by hand, Pattern Maker was able to give me a wide variety of patterns to choose from based on this theme in no time at all. TRY IT To use Pattern Maker, you first need to open an image in Photoshop on which to base your pattern. So...

► Note

The color-related tips and techniques presented in this chapter are merely recommendations of what I think works the best for altering color. As you become more and more familiar with Photoshop, you will find what works best with your imaging needs. You will find that for specific needs, certain methods will provide more accurate results. Again, color is a science always have color proofs provided by your prepress professional. Although the color may seem perfect on your screen or even on your...

Make Sure Your Whites Are Really White

This tip is particularly helpful if you are scanning line art such as a logo to place into another document. Often, your scan might pick up an almost invisible gray tone in the white areas even though it appears white on your screen. With line art that is saved as a grayscale image or in bitmapped mode, it is very important that those white areas are indeed completely clear of any tone at all. TRY IT To make sure your whites are really white, first select the Eyedropper tool from the toolbox...

^Simulate HTML Text in Web Mockups

Perhaps the most common use of Photoshop text currently is in web development, because for web designers, Photoshop is often both the design and page layout program. Text created in web design mockups typically falls into one of two categories text to be made into a web graphic or text that will ultimately be rendered by the browser as HTML text. It is the latter category that this tip applies to, because the former text to be made into a web graphic isn't affected by HTML. In particular, many...

Use Keyboard Commands to Quickly Add to and Delete from Existing Selections

It is a common exercise in Photoshop to make a selection and then need to add to or delete from that selection instead of starting from scratch. While you can always use the Add and Delete buttons in the Options bar for selection tools, it's must quicker and easier to use the keyboard commands to do so. TRY IT To use a keyboard command to add to or delete from a selection, first click any of the bitmap selection tools Marquee, Lasso, or Magic Wand and make a selection in an open file in...

Copy and Paste the Contents of Frames

In ImageReady, a frame of animation is really like a snapshot of the Layers palette at a specific time in the file's history. For example, Frame 1 might display Layers 2 and 3 but not Layer 1, while Frame 2 might display just Layer 1. If at any time you want to copy how the layers are displayed in one frame and paste that snapshot into another frame, you can use the copy and paste commands in the Animation palette. You can also use this technique to copy and paste frames between different...

^Remove Fringe Areas to Clean Up Selections

It is common that when you move or copy an irregularly shaped selection particularly one with anti-aliased or soft edges a few pixels tag along from outside the selection area. For example, when I used the Magic Eraser tool to quickly remove the green background from the Eagle.psd file found in the Photoshop 7 Samples folder in the previous tip, a few green pixels were stuck around the eagle's Figure 5-6 The Magic Eraser enables you to delete areas of color with a single click. white head refer...

Find and Replace Words or Characters in Photoshop

Now that more people are using Photoshop to produce larger quantities of text, it's possible to encounter a situation where you need to replace a word that appears multiple times within a single file. Suppose, for example, you created an animation in Photoshop that contained 30 type layers. Each layer contained essentially the same text, but moved the text to a different location on the screen, so when the animation was played back, it appeared to jump all over the page. What if you needed to...

^Preview Animation in a Browser

After you adjust the appropriate settings, it's a good idea to preview your animation not just in ImageReady but also in a web browser. This is particularly important with animations, because some things, like timing, can only be properly previewed in a browser. TRY u To preview your animation in a web browser, choose Window I Optimize and make sure you've specified the appropriate optimization settings. Then, click the Preview In Browser tool in the toolbox. Depending on which browser is set...

► Note 160

The Save Image Pyramid option currently is not supported by most other programs, so I recommend leaving it unchecked unless you're told otherwise by your output service provider. If you choose to save your TIFF with layers intact, specify the type of compression to use for those layers at the bottom of the TIFF Options dialog box. If you made a mistake and forgot to choose Save A Copy in the previous window, now's your chance choose Discard Layers And Save A Copy before clicking OK. TRY IT To...

^Enable Workgroup Functionality

If you're a web designer working on a project with a team of designers, it may be beneficial for you to enable workgroup functionality within Photoshop. This feature allows multiple users to share files that are located on a special type of server, called a WebDAV server WebDAV stands for Web-based Distributed Authoring and Versioning . The benefits of using workgroup functionality like this include the following Users must check out a file before using it and check in a file before anyone else...

Use Transparency Dithering When Placing a Transparent GIF or PNG-8 on a Patterned Background

Normally, when you save a GIF or PNG-8 file that has semitransparent pixels in its original image, those pixels are blended with your selected Matte color to become fully opaque. That's how you can fake a soft edge with a GIF or PNG-8 file by using a Matte color that's the same as your web page's background color. But if your background color isn't solid, such as with a pattern or photographic background, selecting a Matte color can be difficult because the edges become apparent when the...

^Create a Fake Duotone

Creating a true duotone is discussed in Chapter 12 . If your project calls for a limited color palette and you wish to incorporate the use of a duotone image, you should adhere to those guidelines. However, you can also create fake duotones in Photoshop purely for the sake of creativity and not because of any printing requirements simply by adjusting the Hue Saturation of the image. Compare the difference in the photos in Figure 9-1. The one on the left is a true duotone while the one on the...

Slicing and Optimizing Web Graphics

Slice Web Designs According to Page Layout 357 Customize Output Settings 360 Select the Best File Format for the Job 362 Use Dithering to Smooth Edges in GIF and PNG-8 Files 374 Manipulate the Colors in GIF and PNG-8 Files 376 Optimize Transparent Web Graphics 378 Use Transparency Dithering When Placing a Transparent GIF or PNG-8 on a Patterned Background 378 Use Weighted Optimization 380 Optimize by File Size 382 Link Slices to Optimize Multipl e Slices at Once 382 Use Photoshop ImageReady to...

Use Photoshop/Image Ready to Build HTML Code

If you need to quickly translate a Photoshop design into HTML code, Photoshop and ImageReady are capable of doing just that for you. However, before allowing either program to output HTML code for you, keep the following things in mind Name your slices. If you don't, the program generates somewhat random names that may or may not be appropriate in all cases. Specify which slices should be saved as images and which should not. If you don't, the program saves all slices as images even autoslices...

^Straighten a Crookedly Scanned Image

Even with the best intentions, scanning often results in a crooked photo. Luckily, there's a quick and easy way to fix this in Photoshop. TRY IT To straighten a crookedly scanned image, first make sure the image you want to fix is open in Photoshop. Select the Measure tool from the toolbox and click along one of the edges of the scanned photo. Drag with the Measure tool for a few seconds, following the edge of the photo, to measure the angle of the crookedness. After you release the mouse...

Use Dithering to Smooth Edges in GIF and PNG-8 Files

Dithering is a process in which a color is simulated because it is outside of the currently available color palette. This process causes colors to have a somewhat spotty or speckled appearance because it often requires two or more similar colors, placed next to each other in a checkerboard-style pattern, to approximate a color. You can use a type of controlled dithering when optimizing web graphics within Photoshop to specify how to handle colors not found within the active color palette. For...

^Change the Blending Mode to Paint Highlights and Shadows

I often use Photoshop to create my own web icons and drawings, such as the one shown in the following illustration. In cases like this one, I can add a lot to otherwise flat-color drawings by painting in highlights and shadows. To see what I mean, compare the before and after view of a portal illustration for a marina, shown here on the left and right, respectively. The shadows and highlights around the rim of the hand-drawn portal were added by painting with black and white. However, if I had...

Use the Inverse Command to Select the Opposite

Sometimes, the easiest way to make a selection might actually be to first select the opposite of what you want to select. For example, consider the Ducky.tif file found in the Samples folder of the Adobe Photoshop 7 folder. This file contains a single image of a yellow rubber duck on a white background. Because the background is a solid color something easily selectable in Photoshop you can use that background and the Inverse command to quickly select the duck. TRY IT To use the Inverse...

Use the Smudge Tool to Enlarge an Image's Canvas Size

I create a lot of collages that become banners for web pages. For example, one of my clients a radio station has a banner on its home page that rotates every 10-15 seconds. I create new banners for the radio station all the time, but each must be the exact same size. Sometimes the backgrounds of the photos I use don't fill the designated space, so I have to force them to do so. My favorite way to do this is using the Smudge tool. Figure 8-18 The image I found to use for this banner needed more...

Change Your Default Unit of Measurement to Pixels

When you work in Photoshop, your files are given dimensions according to the default unit of measurement. For example, if the default unit of measurement for the program is set to inches, any time you display the rulers they will use inches. Because web files display on computer monitors instead of the printed page, they use the unit of measurement for screens the pixel. So, when customizing Photoshop for web design, you should use pixels instead of any other print-based method of measurement...