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

Content Box


Step1:

Create a new image 800 x 600, and set the background color to white. Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle tool image 1 , using the dimension

image 2

create the rectangle below using this color #8b8a86.

image 3

Create a new layer, Layer > New > Layer... (Shift+Ctrl+N). Click on the Rounded Rectangle tool image 4 using the same dimension as above create a small rectangle in the middle of the previous rectangle as shown below.

image 5

Hold Ctrl and click on the layer with the small rectangle to select it, when the layer is selected it should look like the screenshot below.

image 6

Now, with the layer still selected click on the layer with the large rectangle and press the delete key. Delete the layer with the small rectangle and you should have the image below in your work area.

image 7

Step2: Right click on the layer and click Blending Options as shown below.

image 8

Add the Blending Options below.

Inner Shadow

image 9

Bevel and Emboss

image 10

Satin

image 11

When your finished click ok.

Create two new layers, Layer > New > Layer... (Shift+Ctrl+N). Click on the Pencil Tool image 12 change the foreground color to #8b8a86. Make sure the brush size is one pixel while holding the shift key draw a straight line as shown in the picture below. Repeat this on the second layer using this color #525044. Doing that you should have the effect below.

image 13

Hold Ctrl and click on the two Line layers you created to select it. It should look like the image below. Press and Hold Ctrl + E to merge the layers.

image 14

Position the lines as shown in the image below.

image 15

Duplicate the lines by clicking on Layer > Duplicate Layer..

image 16

Duplicate the layer and position the lines until the get the effect below. The Three lines on the right and left hand side are the same line I duplicated and used the Rectangular Marquee tool image 17 to cut down a little.

image 18

Step3:

Create a new layer. Click on the Elliptical Marquee Tool image 19 using the setting below create a circle.

image 20

Fill the circle with this color: #8b8a86, Right click on the circle layer, click Blending Options, add the setting below.

Bevel and Emboss

image 21

Click ok when your are finished.

With that, setting added your content box should look like the image below.

image 22

Duplicate and position the circle layer so your contend box can look something like the image below.

image 23

Click on the main content box layer, using the Polygonal Lasso Tool image 24 create a lasso around your image, something like what I have in the screenshot below. If you hold SHIFT, you will be able to draw a straight slanted line and straight line.

image 25

With that selected press the delete key to get the effect below.

image 26

Create a new layer, Click on the Pencil Tool image 27 change the foreground color to #8b8a86. Make sure the brush size is one pixel while holding the shift key draw a straight line under the main contend box layer to get the effect below.

image 28

Right click on the line layer and click Blending Options, add the setting below.

Gradient Overlay

image 29

Stroke

image 30

Create a new layer, using the Rectangular Marquee Tool image 31 create a rectangle in the middle of your content box as shown in the image below. This layer should be below the main content box layer.

image 32

Click on the Gradient Tool  image 33 and draw a gradient going from the bottom to the top to get the effect shown below.

image 34

Tip: If you highlight all the layers except the background layer, press Ctrl+E, and merge the layers. Now click, Adjustments > Hue/Saturation and click colorized. If you play around with the settings, you can match the color with the page style. 

Content Box Tutorial: Final Result

That is it, Hope it came out to what you expected.



Author's URL: Mark
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Content Box"

Only registered users can write comment

No comments yet...