Section 5.1. The Graphic Toolbox: Shapes, Layers, Gradient, and Blur

Chapter 5. Pop Graphics

Photographs are only part of the raster graphics landscape. The other part consists of the buttons, borders, illustrations, and other graphics that originate in drawing tools rather than in cameras. In the beginning of the Web, these formed the heart and soul of web graphics, and though photographs and other newer forms of graphics are making inroads in web art, we'll always need our buttons and bows.

We all envy the graphical artists their ability to create wonderful art on the Web. Barring a miraculous, sudden infusion of artistic skills, though, most of us create the graphics we need by following one of the many tutorials crafted by those who have more talent than we do.

What are some of these graphics? Pretty, shiny buttons for the forms on our web pages; reflections for text and logos to create nice banner looks; border or background images; shine or shadows to add a three-dimensional look to objects; and even text graphic headers, though we should try to restrict use of these items.

But not all raster graphics are art, nor drawn from scratch. For illustration, we incorporate the use of screen captures, hopefully with graphics to highlight whatever functionality we're trying to point out. If the tools we use for screen capturing have the ability to add highlighting functionality directly, so much the better.

Before we get into the screen capturing and button drawing, though, let's take a quick look at the building blocks for raster graphics. At the end of this chapter, I'll revisit these tools and cover how we can "reverse engineer" the graphics we find, on the Web and elsewhere, in order to figure how to create our own versions.

5.1. The Graphic Toolbox: Shapes, Layers, Gradient, and Blur

The examples and demonstrations I cover in this chapter are not all-inclusive. In fact, they barely scratch the surface of available effects you can create. The reason I selected each is to demonstrate basic graphics tool functionalities from which you can build the same or other effects. After you've had a chance to go through all of the examples, plus other example tutorials that are plentiful online, you'll get to the point where you don't need to follow a tutorial鈥攅ither you'll be able to create an effect from scratch, or you'll be able to look at an effect and "reverse engineer" how it was created just by eyeballing it.

What are these basic tool functionalities that form the basis of most online web graphics, and where can they be found in most tools?

Layers

Layers are essential in any graphics development. You can create different objects in each layer, and move them around independent of one another. Layers also allow us to add modifications to an image that we can then remove, independent of the other layers. We can use them to keep a selection active in one layer while we fill it with a gradient or solid color in another. By the time you're done with this section on raster graphics, you'll know deep in your heart that layers are your friends. Layers usually get their own top menu item in most tools.

The Gaussian Blur

The Gaussian Blur was used in the last two chapters, both to add a mood effect (Chapter 3) and to add a drop shadow to photos (Chapter 4). It continues to be an essential element in graphics creation in this chapter. Most tools provide a Gaussian Blur via whatever filter or effects top menu item the tool supports.

Rounded rectangles and other shapes

Rounded rectangles are used for buttons and badges and as building blocks for bigger works. They're usually created using the rectangular selection tool that all tools provide.

To create a rounded rectangle selection in Photoshop, draw the rectangle out using the Rectangular Marquee tool, then access Select Modify Smooth and set the radius to round the corners. Paint Shop Pro's Selection tool has a Rounded Rectangle option, but Paint.NET does not. A workaround I've used with Paint.NET is to create a rounded-corner rectangle object, then use the Magic Wand selection tool to select it.

In addition to rounded rectangles, most tools support ellipses, regular rectangles, and a variety of other shapes. You might find that different shapes are available via plug-ins rather than via the toolbar. For instance, in GIMP, to create a star or other geometrical figure, you'd select Filter Render GFig, and then create the shape in the dialog that opens.

The gradient

Most photo and graphics editing tools provide a gradient fill tool, and some provide gradient fills as attributes for objects, such as for a rectangle or an ellipse.

Layer styles

Most graphics tools provide some form of styling for the layer, including adding a drop shadow, inner glow, and so on. Photoshop's are accessible via the Layer menu (Layer Layer Style), GIMP has a Layers Script-Fu extension, and Paint Shop Pro can emulate Photoshop's layer style. Most graphics tutorials assume you have access to Photoshop-like layer styles, so searching on the tool name and the effect (such as "Paint Shop Pro inner glow") should find you the information you need to convert the effect into the tool of your choice.

There's a great Photoshop to Paint Shop Pro mapping page at http://paintshoppro.info/tutorials/photoshop_to_paintshoppro_dictionary.htm. The GIMP Layer style extension is accessible via the GIMP plug-ins.

Masks

Masks are a way of hiding or showing all of a layer and then allowing parts to be exposed or hidden, based on the color with which you're "drawing" the change. Masks are a great way of protecting part of an image, so that any edits to the layer don't affect the hidden areas. This is especially important when you're creating reflection effects or adjusting exposure or tint for only a portion of the image. Adding a mask is usually an option available directly on the layer or through the Layer menu.

Transforms

Layer transformations provide the ability to scale an image vertically, horizontally, or both; rotate an independent selection; alter perspective; or skew a layer or selection. This is most important when we're working with reflections. How each tool supports transformations varies widely. It's a tool option in the Edit menu for Photoshop, but a control toolbar item in Paint Shop Pro if a vector image has been rasterized. Do check the documentation for whatever tool you decide to use when creating these examples.

In this chapter, I decided to implement the examples using GIMP 2.4 or Photoshop. The techniques can also be used with Photoshop Elements and Paint Shop Pro, but you'll need to adapt for tool differences.

How the different functionalities get combined to form effects takes up the rest of the chapter. On with the graphics.