- FinalDesign Studio - http://www.final-design.net -

Stylish Content Box

Posted By Administrator On 8. July 2006 @ 8:45 pm In Photoshop | 1 Comment

Level: Advanced Info: In this tutorial you will learn how to make stylish content box for your website. After drawing all you have to do is to slice it, and drop into dreamweaver or some other program, and edit html code. A Random Image
A Random Image
A Random Image

 :: Step 1.

Create a new document sized 400×400 pixels. Turn on rulers by pressing Ctrl+R. Make sure you have units for rulers defined to pixels. To check go to Edit -> Preferences -> Units & Rulers, and under Rulers: choose pixels. Drag the guides from rulers (click on rulers and drag) to 50px from every side, top, bottom, left and right.

 :: Step 2.

Use a pen tool to draw the box like shown on image below.

Pen toolPen Tool
Content box outline

 :: Step 3.

Create a new layer (Ctrl+N). Select that new layer and go to Paths under Layers palette. Click on foreground color and change it to #ffd8b5 Right-click on "Work path" and choose "Fill Path", coose Foreground color for "Use:", all other options leave as default, click OK. Deselect Work Path, by clicking in gray empty area of Path palette.

 :: Step 4.

Go back to Layers palette and double click on that Layer 1, to open Layer Style window. Select Drop Shadow, and enter the options like shown on image below.

Drop shadow

Move to Inner Shadow and enter options like on the next image below.

Inner Shadow

Click on Inner Glow and again enter the options like on the image below.

Inner Glow

Now move to Gradient Overlay and enter the options as on the next image…

Gradient Overlay

Nove move to Stroke. Enter all the stuff as on the next image, and after that click on OK to exit and apply Layer Styles you have just defined.

Stroke

 :: Step 5.

It’s time now to define a pattern, as final touch to this stylish content box. Leave your curent document opened and make a new document sized 3×3 pixels. Choose Pencil tool, and choose it’s brush size to 1px. Draw a pattern like shown on image below.

Pattern

 :: Step 6.

After you draw that pattern, go click on Edit -> Define Pattern… Choose a name for your newly created pattern and click ok. Now you can go back to your Stylish content box document, double click on Layer 1 and you will get Layer Styles window opened again. Click on Pattern Overlay and enter the options as shown on image below.

Pattern Overlay

 :: Step 7. (optional)

Now it’s time for your creativity, add some caption to your content box, and add your text to it… The best way is to slice it and export to html tables, from there you can code your content box in the rest of your web design…

 :: Our final result

Final result Final result
[1] Start Slide Show with PicLens Lite PicLens

1 Comment (Open | Close)

1 Comment To "Stylish Content Box"

#1 Comment By Administrator On 9. July 2006 @ 5:09 pm

At the following link
[2]
you can read my tutorial on slicing images, and exporting into dreamweaver, if you get stuck with that part.


Article printed from FinalDesign Studio: http://www.final-design.net

URL to article: http://www.final-design.net/08-07-2006-/stylish-content-box/

URLs in this post:
[1] Image: http://www.final-design.netjavascript:toggleStartStop();PicLensLite.start({feedUrl:
[2] : http://www.astahost.com/index.php?showtopic=4560&hl=

Copyright © 2008 FinalDesign Studio. All rights reserved.