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).
After you create and add your custom shape, we 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. 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.
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 have mentioned about this task briefly in “Layer Shortcuts and Tasks” in one of our previous articles. 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
We hope you find this article interesting and shall empower you to effectively use photoshop while designing your web site. So just play around with ‘Photoshop’!
Head SEO, Marketing at AIT India
Recent Comments