Photoshop Tips #5


----------------------------------------------

TipWorld - http://www.tipworld.com
The Internet's #1 Source for Computer Tips, News, and Gossip

Proudly presents:
Photoshop

----------------------------------------------


*1. DOWNLOAD PHOTOSHOP ACTIONS

Photoshop Actions are objects that can automate repetitive 
tasks or duplicate complicated image processes. Although a very 
useful feature, not many designers have the time to transfer 
their imaging methods into actions. Fortunately, a few kind 
souls on the Internet do have the time and make the Photoshop 
actions available for us to download and use. You can find a 
particularly useful Photoshop action Web site offering four 
different action sets containing 40 actions in total at  

http://www.elated.com/toolbox/actionkits/ 

To use the actions, place the .atn files into your Photoshop 
application folder and launch Photoshop. Then, choose Window, 
Show Actions to activate the Actions palette. To load the 
actions, choose Load Actions from the Layers palette menu. In 
the resulting dialog box, locate and select the .atn file, then 
click the Open button.


*2. SETTING THE PHOTOSHOP COLORS PALETTE TO WEB-SAFE COLORS

When you design for the Web, it's important to use the 216 
Web-safe colors in your images to ensure your arts visual 
consistency across Web browsers and platforms. However, it's 
not immediately apparent how to use Web-safe colors in 
Photoshop. Fortunately, Photoshop 5.5 has added a few options 
to the Color palette that make choosing Web-safe colors 
very easy. 

To demonstrate, launch Photoshop and open a new document. Then, 
choose Window, Show Color to display the Color palette. Next, 
set the Color palette to show only Web-safe colors. To do so, 
choose Web Color Sliders from the Color palette menu. Then, 
select Make Ramp Web Safe. Now any color you choose from the 
Color palette will be Web safe.


*3. COPYING THE HTML CODE FOR A WEB-SAFE COLOR         
     
In our previous tip, we described how you can set Photoshop to 
display only 216 Web-safe colors in the Color palette. As you 
may recall, you display the Color palette and choose Web Color 
Sliders and Make Ramp Web Safe from the Color palette. This 
sets the Color palette to display only Web-safe colors. 

The Color palette is a great aid when you design Web images. 
However, it can also be useful when you are simply searching 
for the HTML code of a Web-safe color. You can actually select 
a color and then copy the HTML code for the color from the 
Color palette. To do so, position the cursor over the color 
ramp in the Color palette, which is the color bar at the bottom 
of the Color palette. Then, click to select a color. Next, 
choose Copy As HTML Code from the Color palette menu. Switch to 
your favorite HTML editor and choose Edit, Paste. The HTML code 
for the selected color in Photoshop will appear, similar to  

COLOR="#009999"


*4. CREATING NEW WEB-SAFE COLORS

In the last few tips, we've discussed the 216 Web-safe colors 
in Photoshop. But let's face it, the Web-safe Color palette is 
very limiting. However, when you present a Web image comp to a 
client and the first question asked is always 

"Is this image using Web-safe colors?" 

what's a Web designer to do? The answer is to make new Web-safe 
colors. To do so, simply combine colors from the Web-safe 
palette into checkerboard patterns to create new colors. Then, 
save the patterns as source files you can use later.  

For example, launch Photoshop and open a new document with a 
canvas size of 10 x 10 pixels. Then, set the Color palette to 
show only Web-safe colors. To do so, choose Web Color Sliders 
from the Color palette menu. Then, select Make Ramp Web Safe. 
Now any color you choose from the Color palette will be 
Web safe.

Next, choose the Pencil tool and set the brush to the smallest 
size available. Then, pick two or more Web-safe colors and 
begin to create a checkerboard pattern in the image document. 
As you fill the 10 x 10-pixel canvas with the checkerboard 
pattern, you'll see a new Web-safe color.


*5. USE THE SAME PALETTE FOR GIF ANIMATION FRAMES

To maintain tight control over file size and color consistency, 
it's important to use the same Color palette on each frame of a 
GIF animation. Even changing a small part of the overall 
picture from frame to frame may cause the Color palette to 
shift and significantly increase the image file size. To ensure 
that each frame of your animation contains the same Web-safe 
palette, build each frame on layers in Photoshop. Then, open 
the image in ImageReady to apply the animation settings.


*6. COLORSAFE

In a previous tip, we described how you can use Photoshop to 
create new Web-safe colors. As you may recall, the tip 
explained how to use two or more Web-safe colors to create a 
checkerboard pattern of color pixels. When viewed at a normal 
magnification, the checkerboard patterns of Web-safe color 
pixels merge into a new Web-safe color. 

Unfortunately, the process can be a bit tedious. If you don't 
have the time or the inclination to use this process to create 
new Web-safe colors, you may want to consider ColorSafe.  

ColorSafe is a $49.95 Photoshop plug-in that gives you an 
almost infinite number of colors created from the 216-color Web 
palette. Using ColorSafe, you can choose almost any RGB color 
and ColorSafe re-creates the color with a tiny pattern of four 
pixels made of up two colors from the Web palette. For more 
information about ColorSafe, go to  

http://www.boxtopsoft.com/


*7. CHANGE SETTINGS AS YOU OPEN PHOTOSHOP

As you may know, there are several Photoshop Preference 
settings (such as memory adjustment and image directories) that 
require you to quit and restart the application. If changing 
these is a common task for you, you may want to consider 
freeware Photoshop Starter.  

Photoshop Starter allows you to adjust several settings as 
Photoshop launches. Upon launching Photoshop Starter, you can 
choose a new Plug-in directory, change the amount of memory 
Photoshop uses, and set the default image directory Photoshop 
opens when you select File, Open. For more information about 
Photoshop Starter, go to  

http://www.icnet.de/intl/pssinfo.html


*8. ENSURING CONSISTENT DESIGN

When you are designing for the Web, precision control over 
design is virtually impossible. You simply cannot predict the 
typefaces users may have on their computers or the 
configuration of their browsers. Therefore, to ensure that your 
designs always display the way intended, create your design in 
Photoshop. Then switch over to ImageReady and slice the 
Photoshop image into several smaller images. Next, recompose 
your design in your favorite HTML editor.  

Ordinarily, slicing your image into components can be 
complicated. However, Adobe ImageReady (included with Photoshop 
5.5) makes it a simple task. First, use the new Slice tool to 
mark your image for dissection. Then, save the image. Adobe 
ImageReady cuts and saves each slice as an image and creates 
the HTML required to reconstruct the original image from the 
image slices.  

To demonstrate, open an image in Adobe ImageReady and select 
the Slice tool. Then, click and drag to create slice guides to 
mark how ImageReady should dissect your image. Next, choose 
File, Save Optimized As. In the resulting dialog box, enter a 
filename for the HTML document and click Save. ImageReady saves 
the HTML document and places the sliced images in an 
Images folder.


*9. AUTOMATICALLY FIT IMAGES

Photoshop 5.5 has added several automation features that make 
common tasks very simple. For example, it's now much easier to 
proportionally resize an image. In previous versions of 
Photoshop, you'd choose Image, Image Size; enter the horizontal 
or vertical size in the dialog box; check Constrain 
Proportions; and click OK.  

In Photoshop 5.5, you can simply choose File, Automate, Fit 
Image. Then, you enter the width or height and click OK. The 
Fit Image command proportionally resizes the image. Fit Image 
also works better with batch processes. Fit Image has presets 
that help avoid error messages so that the batch process 
continues to run.


*10. MANAGING YOUR IMAGES THROUGH CONTACT SHEETS

An inherent by-product of working with Photoshop is gathering 
an extensive collection of images. Unfortunately, it can be 
difficult archiving and browsing such a rapidly growing image 
collection. Fortunately, Photoshop offers you a quick way to 
create your own contact sheet reference guide to your 
image collection.  

To make contact sheets of your image collection, launch 
Photoshop and choose File, Automate, Contact Sheet. In the 
resulting dialog box, click Source and navigate to the 
directory that holds your images. Select the directory and 
click OK. 

Next, choose the layout for your contact sheet. Then, click OK. 
Photoshop will open each image in the directory, create a 
thumbnail, and place the thumbnail and the filename as a 
caption on a contact sheet. Photoshop creates as many contact 
sheets as needed for the images in the selected directory. 
Afterwards, you can print the contact sheets for reference.
