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

Website Box Design


Step 1

Create a new document in Adobe Photoshop with the dimension 400x400 pixels and white background. Draw a rectangle with a very light grey color:

image 1

Step 2

Now we'll add some effects on this rectangle. First we add the "Drop Shadow" effect. To do this select Layer > Layer Style > Drop Shadow. When applying this effect set the next settings in the window which appears:

image 2

And an intermediary result:

image 3

Step 3

Select Layer > Layer Style > Inner Shadow and apply the effect with the next settings:

image 4

And another intermediary result:

image 5

Step 4

Duplicate the layer using right click in the Layers Tab and selecting Duplicate Layer. Set the color to the new layer to a light blue (select Layer > Layer Style > Color Overlay and set the color in the settings window that appears to a light blue). In the Layers Tab set the "Blending Mode for this Layer" to "Color Burn". Your result should be something like this:

image 6

Step 5

Duplicate the new layer and set the color overlay settings like here:

image 7

And the result:

image 8

Step 6

On the new layer make a selection like here:

image 9

Use the DEL key to delete the selected area:

image 10

Step 7

Apply other elements to your box like some bullets or text and this is the final result:

Website Box Design



Author's URL: DesignTutorials.info
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

Reader's comments
comments lana August 13, 2010 says:
what the bloody hell!?
Reply
Add comments to "Website Box Design"

Captcha