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...
► Note 77
To link all the layers within a layer set, first highlight the name of the layer set within the Layers palette. Then, click the box closest to the name of any layer within that set to reveal a link icon. After linking layers, you can use the Move tool to move all of the elements at once. In addition, you can perform transformations, such as scaling or rotating, on all the elements on those layers at the same time simply by clicking any of the linked layers and performing the transformation as...
^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...
Quick Tip 59
If you first link a group of layers together by clicking in the second box on each layer , you can paste a layer style onto all the linked layers in just two steps right-click Windows or CTRL-click Mac and choose Copy Layer Style I Paste Layer Style To Linked. Drop Shadow Text appears to float on the page -Adjust Blend Mode to change how the shadow reacts Inner Shadow Text appears recessed into the page to pixels below it -Adjust Opacity of the shadow -Select Use Global Light to keep the...
^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
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/ImageReady 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...