Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos.  Home Photoshop Web Layout Gradient Content Box

Gradient Content Box


Step 1
Make a new document of 500x500 pixels. Make a new layer and call it "Content Box". Now select the Rounded Rectangle Tool and change the radius settings to "20px". Once you've done that simply make the rectangle you want, you can try holding down shift, which makes it have a straighter look.

image 1

image 2


Step 2
On your layers palette right mouse click on the Content Box layer and click Blending Options, like shown below.

image 3

Step 3
Now select the Drop Shadow option and put in the setting as shown below.

image 4

Now select the Bevel and Emboss setting and do the same step as before.

image 5

Select Gradient option and do as followed.

image 6

Select Inner Shadow and do as followed.

image 7

Select Stroke and do as followed. If you've done all of this then carry on!

image 8

image 9


Step 4
Now select your Line Tool, which is located on your tools panel. Once you've selected the line tool, simply enter in these settings. Once you've done that simply go to the next step.

image 10

Step 5
Holding shift simply select where you want to start the line, easier to the left and then simply drag (holding shift) right across to the other side. You should have something that looks similar to this.

image 11

Final Result
This is what you can achieve once you have finished what you needed. I added text and a little side effect to it.

Gradient Content Box


Author's URL: Netcubo
Final results of our readers
New!
Passed through all the steps? Share your result!
Your result will be premoderated.
Please make sure you choose the right image.
 
 



Captcha

*Required fileds
Grasp the chance to enhance your site with the best fitting layout, including elements like buttons, headers and logos. More Web Layout Tutorials: Featured Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

No comments yet...
Add comments to "Gradient Content Box"

Captcha