 
| Resources By Subject |
| Technical |
|
|
|
by Charlie Morris
June 12, 2000
Let's illustrate how to use some of the features by creating a Web banner from scratch. Hit Control-N to start a new file, and specify a size of 468 pixels by 60. Go to the View menu to select the view of your choice.
This article is in three parts:
- Photoshop 5.5 Overview
- Building a Banner with Photoshop
- Advanced Web Graphics with ImageReady
First we'll select a background color for our banner. Near the bottom of the toolbar you'll see two overlapping colored squares. These are the current Foreground and Background colors. Click on one to open the Color Picker. Here you can select a color by clicking on the desired point in the spectrum, or by entering numeric values. We want to use a "Web-safe" color - meaning one that the main Web browsers can display properly. The Web-safe colors can all be expressed as a set of 3 hexdecimal numbers that may have the values 00, 33, 66, 99, CC, or FF. Older versions of Photoshop made no particular provision for the Web palette, so one had to get out the scientific calculator to convert these to decimal values, and enter them into the fields for red, green and blue. This hassle is gone forever, as Photoshop now lets you simply check a checkbox, and the color picker displays only Web-safe colors.
Once you've selected a color using the color picker, whatever tool you use will use this color. Select the paint bucket and click it inside our image to fill it with lime green. Now we'll click on the color picker again, and select a dark purple for our next act.
Select the Text tool, and a dialog box pops up where you can enter text, and set the font face, size and style. When we type in our text and hit OK, our dark purple text appears somewhere in the image. Older versions of Photoshop made it a real pain to edit text once it was place, but now all you have to do is (with the text tool) right-click on the text to bring up the text editing dialog box.
Photoshop's text capabilities have always been its weak point. In the latest version, they're a lot better than they were, but still limited. If you need to do text manipulation of any complexity at all, such as creating newspaper-style columns and so forth, then you'll need to use another program in conjunction with Photoshop. Either use a word processor like Word to format your text, and import it into Photoshop, or (the better option), create your graphics in Photoshop and bring them into a page layout program such as Quark, or Adobe's own PageMaker or InDesign.
Now let's say we want to bring in an existing photo to use in our banner. Photoshop can open and save a wide variety of graphic files, so the easiest way to bring in existing files is usually simply to open them, select the desired parts, and copy and paste.
Photoshop provides an impressive suite of tools for retouching photographs. You can adjust brightness and contrast (more savvy users tend to adjust Levels instead), color balance and other parameters to make photos look better. You can also use Filters to create just about any effect you can imagine. From simple things like Sharpen and Blur to more sophisticated filters that duplicate various artistic effects - everything from colored pencils to watercolor to stained glass.
Sometimes half the battle is selecting the right parts of your image to process. Photoshop provides many flexible tools for selecting material. Not only can you select square, round or free-form areas, you can also use the Magic Wand tool to select all areas within certain color parameters that you define.
The secret weapon in Photoshop is the Pencil tool, which lets you change individual pixels. A tiny bit of crud in your pic you want to get rid of? Zoom in until you can see each individual pixel, and select the Pencil tool. Holding down the ALT key converts it temporarily into the Eyedropper tool, so you can grab the color from a nearby pixel. Then click the pencil tool on the offending pixels, and voila!
So, we've spiffed up our photo, and combined it with some text and other elements to come up with a brilliant banner. Preparing it for the Web is as easy as selecting Export GIF 89a. You are offered a choice of different palettes, and can choose to make your gif interlaced and/or transparent. You can't make animated gifs within Photoshop, but it is easy to save a series of slightly different images, then put them together in an animation package. When you create graphics for the Web, always save your original Photoshop (.psd) files, not just the finished gifs or jpgs, in case you want to make a modified version in the future.
This is about the most extensive graphics workshop out there. As if the included features weren't enough, there are dozens of third-party plugins that work with Photoshop, which can extend its capabilities and let you do all kind of wild things. Although it does have its drawbacks in the areas of text and Web-readiness, and it ain't cheap, Photoshop gets a big thumbs up for its sheer power and relative ease of use. It's stable, attractive and well-designed. Another nifty thing about it is that files are interchangeable between the PC and Mac versions.
What about advanced Web graphic techniques such as animations, image maps, and so forth? You still can't do these things directly in Photoshop, but you can do all this and more using ImageReady, which is included in Photoshop, although it launches as a separate application. We'll learn how to use ImageReady in the next section.
This article is in three parts:
- Photoshop 5.5 Overview
- Building a Banner with Photoshop
- Advanced Web Graphics with ImageReady
Other Articles on Photoshop 5.5:
- Choosing The Right Color Palette In Photoshop
- Let's build an ad banner with Photoshop
!
- More Web Graphics Articles
|
