Step 1:
Create a new image press (Ctrl+N) or File > New set the width to 800 and the length to 600 pixels. When you are finished click ok. Press (ALT+Ctrl+0) or View> Actual Pixel to view your work space actual pixel. Change the background color to #c8c8c8.
Step 2:
Create a new layer (Shift+Ctrl+N) or Layer>New>Layer, and name it news box. Click on the Rounded Rectangular Tool
change the rectangle color to #7b91ad and enter the setting that I have below.
Create a rectangle with the dimensions that you want,
Step 3:
Hold Ctrl and click on the layer to select it. You will know that the layer is selected by a border forming around your object , now press Shift+Ctrl+N to create a new layer name it box1 click on the rectangular Marquee Tool
and click on Subtract From Selection
. Subtract the selection Until you get something like I have below.
Now click on the box1 layer and fill your selection with this color #FFFFFF.
Step 4:
Right click on the box1 layer and click on Blending Options. Use the setting I have below. All I did was just added a Gradient Overlay
Step 5:
Create a new layer (Shift+Ctrl+N) or Layer>New>Layer, and name it header Click on the Rounded Rectangular Tool
and change the background color to #898989. Draw a rectangle over the gradient, like I have below
Right click on the header layer and click on Blending Options and add the setting below.
Stroke Setting
Gradient Overlay
If you followed the steps correctly you should have something like I have below.
Step 6:
Repeat steps 3 to 5 to create the footer below your text box. Its simple if you follow the steps. you did this in steps 3 - 5 so it shouldn't be hard. If you followed the steps you should have something like I have below.
Tip:
Hold Ctrl and click on each on you layers except your background layer. should look something like this below. After you have the layers selected click Ctrl+E to merge the layers. Then go to Images> Adjustments> Hue/Saturation.
You will see the Hue/Saturation box below click on colorize. If you play around with the setting you and match you web site color scheme without redoing the entire tutorial.












More Photoshop: