View Full Version: Simple Content Box

New Generation Forum > Tutorials > Simple Content Box


Title: Simple Content Box
Description: Create a simple content box for websites


ColaCoder - August 18, 2004 06:03 PM (GMT)
1. Start of with a fairly large new image: 800x600 or larger.

2. Turn the rulers on (Ctrl-R).

3. Start off by making a rektangle with the guides (any tool on the rulers and drag down on the image)

5. Drag two more guides down on the image. (see image at point 8 for placing)

6. Now two more guides at the top of the image, see pic

7. This is the basic layout of your new content box, now find the middle of your box
and go out towards the edges and drag out 4 more guides.

8. Make a new layer call it frame or something that can tell you what layer it is, now grab the pen tool(P)
and start drawing the outer borders, complete the new path
now make the inner border, grab the pen tool again and make the inner border.
Still with the pen tool active create the litle cut out section at the top.

user posted image

9. Make sure your foreground color is black and the brush tool is set to 'Hard round 1 pixel'
With the pen tool active right click on your path and select 'Stroke path' then do another
right click on the path and select 'delete path'.

10. Now hide the Guides, and create a new layer, call this layer top-gradient.

11. Create another layer and call it bottom-gradient.

12. Create yet another layer and call it middle.

13. with the frame layer active chose the 'magic wand tool' (W) and click in the midle to select
the midle and shift click the top inset.

14. With this selected choose the middle layer and fill it with a gray color i used (#CCCCCC).
change the layer opacity to 25%.

15. Deselect all(Ctrl+d) and go to the frame layer again select the botom square.
then go to the botom-gradient layer and fill it with a darker gray, i used (#666666).

16. Go to the blending options for the bottom-gradient layer and add a Gradient Overlay:
Blend Mode: normal
Opacity: 30%
Gradient: Foreground to Background
Style: Reflected
Align with layer: checked
Angle: 90
Scale 100%

17. Change the layer opacity of the top-gradient layer and the bottom-gradient layer to 80%.
Your images should look like this now:

user posted image

18. Select the Frame layer and with the magic wand tool select the top square minus the inset,
now go to the top-gradient layer and fill it with the same color as the bottom-gradient layer.
Apply the same Blending options on this layer as the Bottom-gradient layer.

19. You are done...

20. final image after adding some dummy text.

user posted image


This is my first post and my first tutorial i have written, enjoy ^_^




Hosted for free by InvisionFree