Vectorials
Flash Perfection
3D Lessons
Tutorialkit
Markup Tutorials
Learn PHP
network
adv banner
Photoshop  Home Photoshop Web Layout Create Web Content Box
rss

Create Web Content Box

Author: Mark More by this author


Create Web Content Box Tutorial: Final Result

Step1:

Create a new image 800 x 600, and change the background color to white #FFFFFF. Click Layer>New Layer or shift+Ctrl+N to create a new layer. Now click on the Rounded Rectangular tool (U) image 2 and create a rounded rectangle with the setting I have below.

image 3

image 4

If you followed the instructions you should have some thing like I have below.

image 5

Step2:

Hold CTRL and click on the layer with the rounded rectangle, this will select your rectangle. As shown in Figure 1. Create a new layer and use the Rectangular Marquee Tool to subtract from your selection until your selection looks like figure 2.

image 6

Figure 1

image 7

Figure 2

Click on the Paint Bucket tool image 8 and fill you selection with #d1d1d1.

Right click on your layer and click blending options and add the settings below.

Drop Shadow

image 9

Inner Shadow

Blend Mode color: cccccc

image 10

Inner Glow

Color: 666666

image 11

Bevel and Emboss

image 12

Gradient Overlay

image 13

image 14

Color: #cccccc ---- Color: # 666666

Stroke

image 15

When u finished entering the setting click on New Style and save the style and then click ok, you now should have something like the image below.

image 16

Step3:

Repeat step 2 and add a Footer for your content box as shown below.

image 17

Step4:

Hold CTRL and click on your rounded rectangle layer to select it. click on the Gradient Tool and apply a gradient to you selection from bottom to top as shown below.

 

image 18

Hold CTRL and click on your rounded rectangle layer to select it, use the subtract from selection option image 19 and subtract from you rectangle selection until you get the selection in the image below. 

image 20

create a new layer and fill you selection with #cccccc. Right click on you layer and click on Blending options and add the setting below.

Drop Shadow

image 21

Bevel and Emboss

image 22

Stroke

image 23

Gradient

image 24

Color: #cccccc ---- Color: #FFFFFF ---- Color: # 000000

After you added the setting save your style and click ok. If you did everything right you should have something like I have below.

image 25

Step5:

Now, click on your layer to select them. Hold CRTL and click on all the layers except the back ground layer, should look like the image below. Now with all the layers selected press CTRL+ E to merge the layers into one layer.

Selected Layers

image 26

Merged Layers

image 27

Click on Image>Adjustments>Hue/Saturation as shown below, play around with the setting in the Hue/Saturation window and you can change the color scheme of the content box. Make sure you click on colorize in the Hue/Saturation window

image 28

That is it you are finished.

Create Web Content Box Tutorial: Final Result

image 30



Author's URL: www.pixeldigest.com

Rate this Material: Bad 1 2 3 4 5 Excellent
print this page tell a friend subscribe to newsletter subscribe to rss

Add comments to "Create Web Content Box"