[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.
Edited by Mr. Matt, 24 March 2008 - 06:36 PM.