Web Domination Using Photoshop

Reusing Vector Shapes

As you work more with shapes, you may find that you're often recreating the same vector shape. If it's a simple shape -- one that doesn't involve outlines or layers -- you can save it as a custom shape and access it later using the Custom Shape Tool (U).

Warning: Save Your Shapes!
After you create and add your custom shape, I recommend that you click on the small arrow in the custom shape flyout box and select Save Shapes. This will save all of the custom shapes that are currently visible into a .csh file. This way, if you ever need to reinstall Photoshop or reset the preferences, you'll be able to reload your shapes. You'll find that most customizable elements, such as layer styles, patterns, and brushes, provide menu options that allow you to save the custom settings you've created for them.

Saving custom shapes

Solution

Defining a custom shape

1. Select your vector shape by clicking on it with the Path Selection Tool (the black arrow).

2. Select Edit > Define Custom Shape... .

3. Type a name in the Shape Name dialog box and click OK.

4. To use your shape, select the Custom Shape Tool (U) and scroll down the list of available shapes -- you'll see that your shape's been added!

New custom shape

Sampling Colors from Image Files

Solution

Open the image file in Photoshop. If you're not able to open it in Photoshop (the image might be embedded in a document, for example), open it in an appropriate program that lets you view the file on your computer (such as a web browser, or Microsoft Word if the image is in a Word document).

If the image is open in Photoshop, select the Eyedropper Tool (I) and click on the image to grab the color. Your foreground color will be set to the color you selected.

If you've opened the image in another program, resize and move the Photoshop window so that you can see both the Photoshop window and the image simultaneously (this example shows the SitePoint web site next to the Photoshop window). Select the Eyedropper Tool (I). Click anywhere in the Photoshop window, and then drag the eyedropper out to the image you're sampling color from. In the example shown here, I sampled the orange color from the SitePoint logo. You can see that this color has been set to the foreground color in the Color Picker.

Sampling a color from outside the Photoshop interface

Finding the Hexadecimal Code for a Color Solution

When you're working on the HTML and CSS for a web site design, you'll need the six-digit hexadecimal codes for the colors that you use. Photoshop makes these available to you in two ways.

Time-saving Tip
Some icons in the Info palette have a little arrow icon next to them. You can change the Info palette display options by clicking on these icons?this way, you won't need to go through the Palette Options dialog, which saves you two clicks!

Choosing the color display option

Using the Info Palette

As you move the cursor around a document, the Info palette will show you the value for the color over which the cursor is positioned. By default, the palette is set to display the RGB and CMYK values for colors. You can configure the information displayed in the palette by clicking on the small arrow on the top right-hand side of the palette and selecting Palette Options. A dialog box will appear, displaying the options you can change. Among other things, you'll see two drop-down menus to change the Color Readout -- change one of these to Web Color.

Selecting Palette Options... for the Info palette

This will display the hexadecimal codes for the color's red, green, and blue values. String these together to get your six-digital hexadecimal code. In this example, the hexadecimal code is c9ad1c.

The Info palette displays the hexadecimal color codes

Using the Color Picker

The hexadecimal codes for colors are also displayed in a text field at the bottom of the Color Picker dialog box, as shown here. You can highlight the color code, copy it using Ctrl-C (Command-C on a Mac), and paste it into a style sheet or HTML file. Note that the hash sign (#) isn't copied, so don't forget to add that when you're pasting the code!

The hexadecimal color code displays in the Color Picker

Adjusting Layer Transparency

Solution

We talked about this task briefly in "Layer Shortcuts and Tasks" in Chapter 1. To adjust the transparency of a layer, change its opacity using the Opacity field in the Layers palette.

If you have the selection, move, or crop tools selected, you can change the transparency simply by typing a number -- the opacity level will magically change to reflect that percentage!

Changing the opacity of a layer