Paul’s Blog

Webpage content boxes with Photoshop

February 19th, 2007

While teaching a Photoshop for the Web course recently, I was asked for a method of creating content boxes. The specification was quite exact in terms of sizes and appearance, including rounded corners, tinted outlines and various graphical elements.As is common with web page elements, the idea was to be able to quickly and easily generate multiple boxes using different colours and text. I came up with a pretty efficient method, using a combination of different features, including:

• Shape layers
• Solid Color layers
• Blending modes
• Clipping masks
• Layer Groups
• Smart Objects

Here’s an example of a finished box:

The box is designed to be exactly 235 x 150 pixels. The stroke is 5 pixels wide, and is set to a lighter tint of the box fill colour.

Step by step instructions

Begin by creating a document which is larger than the intended size - you can always trim the document down later on. Around 500 x 500 pixels is fine.

Draw the initial box using the Rectangle vector shape tool. Don’t worry about the exact size, or color of the rectangle.

It’s not obvious, but you can resize elements to a fixed width and height in Photoshop without using Guides. Draw the object first, then use Free Transform (Free Transform Path in the case of a vector shape layer), and type in the desired width and height values, adding px instead of % into the w and h value boxes in the Options palette. Accurate resizing!

Important - In this case, resize the box to 225 x 140 pixels. The stroke, added in the next stage, will add the extra 10 pixels to the width and height.

Set the color of the box layer to around 80% black.

Now turn on the Stroke layer style. Set the the colour of the stroke to around 50% black (these are suggested values only - use whatever you like, but make sure it’s less than 100%, or the following won’t work).

Set the Stroke to Outside and set the width to 5 pixels, bringing the box up to the required width and height.

We now have our basic box. Note the guides indicate the size before the stroke is added:

I wanted to add a small semi-circle white cutout at the top right of the box. This is where it made sense earlier to draw the box inside the stroke. Duplicate the box layer, and move this copy above the Color Fill layer.

Remove the stroke effect from this layer, and set it’s fill color to White.

Now select the Oval drawing tool, and set the drawing mode to Intersect.

Draw a circle at the top right of the box, so the intersection of the two shapes creates the area you want.

For the sake of clarity, in the screenshot below, I’ve used red instead of white as the fill color. (The other layers are switched off. You can see the way the intersection of the two shapes is displayed, while the rest of the layer is masked.

Now it’s a simple matter to add a small arrow to a new shape layer, using the Polygon drawing tool, with the number of sides set to 3. Again, set the color of this layer to a shade of grey.

Once you have your three shapes, your layers should look something like this (screenshots from PSCS3):

Next, we’re going to create a Solid Color layer, to set the color of the fill, arrow and outline (not the semi-circle though).

Add a Solid Color layer above the box layer. Pick the color you want, and set the blending mode of this layer to Color.

The Color fill layer applies to both the fill and stroke of the underlying box (color overlay styles only apply to the fill, hence the need for a separate layer). The percentage tints of the fill and outline are retained.

Note that as the colour of the semi-circle callout area is white, it isn’t affected by the color fill layer. Nor is the background. Color mode has affect on white or black pixels.

Add any text elements you want, and you’re done.

Making things more efficient with Smart Objects and Groups

I decided that having gone this far, I should try to make the routine work better with multiple boxes in the same document. I could then use Slices to export several boxes at once. I decided to use a Smart Object for the basic box, keeping the Solid Color and text layers separate. I could then place the whole structure in a Group, and duplicate the Group for each new box:

First, select the three Shape Layers (as in the previous screenshot), and select Layer, Smart Object, Convert to Smart Object. The resulting object can be edited by double+clicking on the SO layer icon. Any changes made to the content of a SO will apply to all instances of the object.

The Solid Color layer now needs to be ‘clipped’ with the Smart Object layer, otherwise it will apply to underlying layers. Highlight the Solid Color layer, and select Layer, Create Clipping Mask (alternately, Alt+Click between the two layers).

The text layers are placed above the Solid Color layer (assuming we don’t want them to be affected by it).

Now the entire set of layers can be grouped - select all the layers, and drag them onto the Layer Group icon at the bottom of the Layers palette.

To make another box, duplicate the Group (drag the group onto the New Layer icon). Change colours by double+clicking on the Solid Color layer.

Make sure you name your Groups, so you know which is which.

The final structure should look something like this (I have three boxes with different colours):

Summary

I think this works pretty well, and it’s nice to put features together like this without things getting too complex. On the other hand, it’s almost always the case with Photoshop that there are as many solutions to any problem as there are ways to cook a potato. If you have any improvements to this technique, or alternative methods, I’d love to hear about them.

Entry Filed under: Photoshop