Capture Images Larger than You Plan to Use in Photoshop

Whenever you import an image into Photoshop, regardless of whether you captured it from a digital camera or a scanner, it's important to assign an accurate file resolution, as discussed in the section File Resolution earlier in this chapter. The reason is that it is very difficult to increase a file's resolution at a later date and retain the same quality. For example, suppose you scan an image at 72 dpi the common resolution for web graphics and later decide to also use the image in your...

Import a File into Photoshop Using the Twain Interface

Most scanners come with a utility or plug-in that allows you to scan your images right into Photoshop. The utility or plug-in uses the industry-standard TWAIN interface to import the scan. Before you can scan an image, you must make sure the utility or plug-in is installed properly and is working with Photoshop. Consult the documentation that came with your scanner if you're unsure about how to install the software. If you can't find your documentation, check the company's web site for an...

^Create a New Print Design File in Photoshop

When you begin your work in Photoshop, usually you will have document dimensions already established (8.5x11 inches). You can set up your Photoshop document with these dimensions or estimate the approximate size of the graphic space you will be using within the document layout (for example, 3x5 inches). If you do not know how big to build your graphic, always build it larger than you need it. You can always reduce the size without losing digital quality. However, if you have built the file too...

Print Files Directly from Photoshop

As Photoshop's text-handling capabilities increase, so do the number of people using it as a print-layout tool. When you do use Photoshop as a print-layout tool, you'll likely be printing directly from Photoshop, as opposed to the more traditional route of printing from a page-layout program such as Adobe InDesign or QuarkXPress. In cases like this, use Photoshop's Print With Preview command to specify print options before actually sending the file to your printer. TRY IT To print files...

Use the Place Command to Import an Existing Vector File into Another File in Photoshop

Besides using the Open command to bring an existing vector file into Photoshop, you can also use the Place command. This command is more useful than the Open command in two distinct situations When you want to add an existing vector image to another file already open in Photoshop When you are unsure as to the ultimate size you'll use for the vector file in Photoshop jHY J To use the Place command to import an existing vector file into Photoshop, you must first have another file open in the...

Drag and Drop Graphics from Other Programs into Photoshop

Programs created by Adobe are usually quite compatible with each other. For example, suppose you created type on a curve in Adobe Illustrator and wanted to use it in your Photoshop imaging. (Photoshop, as of yet, does not allow you to create type on a curve without a plug-in see Creating Text Along a Path in Chapter 9.) The easiest way to get this or any vector path drawn in Illustrator into your Photoshop file is to drag and drop it. TRY IT To drag and drop content from another program, such...

Use the Open Command to Bring an Existing Bitmap File into Photoshop

When you want to open an existing digital file in Photoshop, you have to first consider the file's format. Photoshop and ImageReady are capable of opening the file formats listed in Table 3-4. Acrobat TouchUp Image (.pdf, .ai, .pdh) Table 3-4 File Formats Supported by Photoshop and ImageReady Table 3-4 File Formats Supported by Photoshop and ImageReady

Drag and Drop Graphics from Photoshop into Other Programs

Whereas the previous tip discussed dragging and dropping files into Photoshop, this one discusses the opposite dragging and dropping files from Photoshop into other programs. In particular, I find it quite useful to drag and drop print graphics from Photoshop right into Adobe InDesign. Although you still want to save a copy in a print-ready format such as TIFF or EPS, you can save some time by dragging it into InDesign instead of closing the file in Photoshop and then reopening it in the other...

Apply Gradients to Text

If you try to use the Gradient tool on a type layer in Photoshop, you'll receive an alert that warns, Could not use the gradient tool because the pixels in a type layer cannot be edited without first rasterizing the layer. While you could rasterize your type layer to use the Gradient tool and apply a gradient to it, that would cause your type to no longer be editable. Instead, you can apply the Gradient Overlay layer style on your type layer. Figure 7-9 shows an example, and the following tip...

^Import Layered Photoshop Files into GoLive to Build Dhtml Code

When you import sliced Photoshop files into GoLive using the technique described in the previous tip, the file is placed as if it were a flattened Photoshop file. In other words, the individual layers in Photoshop are ignored. Suppose you wanted to import the text and graphic behind it separately, so they could each be moved independently on the web page in GoLive. To achieve this, you can actually import the layered Photoshop file right into GoLive. While GoLive typically uses HTML table tags...

^Import Sliced Photoshop Files into GoLive to Build HTML Code

If you plan to use a visual web development tool (in other words, one that allows you to see how the page looks as you're building it), consider using Adobe GoLive, because it offers many features that fit seamlessly with Photoshop and ImageReady. For instance, after you design a web page in Photoshop or ImageReady, you can drag it into a page layout file in GoLive to have that tool help you optimize the graphics and build the HTML code. TRY IT To import a sliced Photoshop file into GoLive,...

Use Masks to Temporarily Hide Parts of Layers

Sometimes it's better to hide parts of layers instead of delete them. When this is the case, a layer mask is the perfect tool for the job because of the amount of flexibility it offers. For example, suppose you wanted to see what a photo of my Aunt Ginny looked like without Uncle Bernie standing next to her. You could add a layer mask to the layer and temporarily hide the part of the image containing Uncle Bernie. When you use a layer mask to hide part of an image, you can use the painting...

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