Web design is a highly competitive profession when you have thousands, if not, millions of other professional web designs to rank up with. This small tutorial will attempt to draw out the simplicity of designing web components for a specific page. We will be creating a simple feature area box that conveys a clean, but professional impression. It is assumed that Adobe Photoshop 7.0 is the image manipulation software being used and that the user understands the basic functions and menu navigation of this application.

[Creating The Container]
Start out by creating a new 500px by 250px document using 72 pixels/inch in RGB Color mode whose Contents are set to White. If you wish, give it a title. This will start you off with a blank document using a white background. From here, use the Rounded Rectangle Tool (U) with a Radius of anywhere from 5 to 7 and draw a rectangle on your blank document. The default foreground and background colors ought to be white and black respectively; for now, you will want the color of your rounded corner rectangle to be solid white. Once you've drawn the rectangle, right-click on the rectangle's layer in the Layers panel and Rasterize the layer. Rename this Layer to Container Double-click the layer (or right-click and select Blending Options).

[Applying Container Styles]
Apply a Stroke to the selected Layer that is 1px in size and set the color to #EEEEEE or #CCCCCC (depending on how much you wish to keep the border visible). Click OK to apply the Stroke. Back over in the Layer panel, press and hold CTL on your keyboard while clicking on the layer's preview icon to make a selection using the Layer's shape. You should see dotted lines on your document indicating that the selected Layer has now been made an active selection. Under the Select menu, expand the Modify sub-menu and select Contract. Contract by 2px and hit OK to apply the new active selection 2px smaller than the original selection.

Over in Tools, click the Gradient Tool (G), set the gradient type to Linear Gradient, the Foreground color to what you specified earlier as the Stroke color (your current border) and set the Background color to White. Fill the currently active selection with a vertical gradient starting from the top to about 30% down the selection. Pressing and holding the shift key while applying while help guide your linear gradient. Do not deselect the currently active selection just yet as the following steps can be done while the Container layer (-2px contracted size) is still selected.

Create a New Layer on top of the Container layer, setting its Blending mode to Multiply. Specify a Radial Gradient using the same Foreground and Background settings. Create a Radial Gradient in the bottom right-hand corner of the currently active selection on the New Layer. Once this is done, you can press CTL + D to deselect the active Container selection. Rename this New Layer to Corner. If you set the Stroke Layer to #CCCCCC or a darker shade of gray, you may find that the border on Container is a little darker than you need. You can go back into its Blending Options and specify #EEEEEE as the new Stroke color on the Container layer to balance the contrast better.

Create a New Layer under the Container Layer and use the Brush tool of about 3 - 4px with the Foreground set to a shade of dark gray (or black) from #000000 to #555555. Zoom into the bottom right-hand corner of the Container Layer and carefully brush a shadow underneath the bottom right-hand corner. This will help to create a "peel" effect. Zoom back out to the document's Actual Size to see the overall effect.

Here you've created a nice-looking container on top of which you can add text, images or other feature related content. This will be added as a subsequent post as Part 2 as we explain how to keep your feature area looking clean and professional.

 

 

 

Reply

A Better Container Corner Shadow (Part 1a)

The Brush Tool method for creating a shadow underlying the Container Layer might take a few tries. The method I'm about to illustrate here is a bit more uniform and will replace the "peel" effect layer completely (hence, we'll need to start out by deleting that layer and creating a New Layer in its place underneath the Container Layer).

CTL+Click the Container Layer to make an active selection with it. Click on the Rectangular Marquee Tool (M) and tap the down and right arrow keys both four (4) times. This will nudge the active selection 4px down and 4px right. On the new "peel" effect layer that was previously the shadow we created using the Brush Tool, create a Radial Gradient using the same gradient settings as before. Or you may use Black and set the layer's transparency to 50%.

Rename this layer to Corner Shadow for future reference if we need to make changes to it.

 

 

 

Reply

Adding Content (Part 2)

Using the same Photoshop document, you can preserve the style of this new feature area by applying some Blending Options to a small rectangular image. I've used a cropped image measuring 75px width by 75px height in size. Apply an Inner Glow using a Normal Blend Mode. Set the Inner Glow's opacity to 100% and the color to solid white (#FFFFFF). Set the Technique element to Precise and leave the Source as Edge. The size should match the number of pixels contracted used in the original Container selection (in this example, 2px). Applying this Inner Glow will create for us an inner white border about 2px thick.

We also want to apply a Stroke of 1px positioned on the Outside using a slightly darker shade of gray than what we used for the Container's Stroke border (e.g. #CCCCCC). Hit OK to apply changes made to the image.

Add some text and formatting. You could also divide the feature area with two horizontal lines one on top of the other using the same color scheme of grays to match the Container's border. You can also create bullets to match your styles or color scheme by using the Elliptical Marquee Tool (M) and filling a small bullet with the same color as one of your header titles. Apply to each bullet (or a single one to duplicate) a solid White Inner Shadow with a Normal Blend Mode at 100% opacity. You can fine tune the bullet's style by adjusting the Distance and Size values (I've used 2px for each, leaving the Choke set to 25%).

Experiment with different fonts, colors and of course Layer styles to enhance the overall appearance of your new feature area. Drop this little widget on an HTML page and you're set to go!

Reply

They all seem to be very good ideas. I basically do my containers and image backings on the fly. I will always be updating my sites and reconstructing til I die! But I do think that the idea is good, and it is a good start to creating background templates. I use a lot of fade gradient feel backings, and I try to keep it simple... well, at least at the start.

Reply