This is the web log of Tim Bennett, web designer. He also runs Texelate, offering the best web design Leeds, Yorkshire has to offer

Grey content box in Photoshop

Saturday, January 10th, 2009 at 2:43 pm

 

Note: This tutorial is written for Photoshop CS on a Windows XP platform and assumes you have a basic knowledge of Photoshop. However, this technique will work on most versions of Photoshop or similar graphics package.

You are going to make a grey content box like this:

greycontent_22

1. Create a new canvas 275px wide and 300px in height.

2. Using the Rectangle Tool draw a rectangle and apply these Gradient Overlay settings:

greycontent_2

3. So that it looks like this:

greycontent_3

4. Add Stroke settings like this:

greycontent_4

5. Your end result will be like this:

greycontent_5

6. Draw another rectangle using the same tool that is exactly centered on the lower layer but is about 10 pixels shorter and narrower. Set the fill colour to #333333:

greycontent_6

7. Now add Stroke settings like this:

greycontent_7

8. So that your canvas looks like this

greycontent_8

9. Draw another rectangle on top and apply this Gradient Overlay settings:

greycontent_9

10. Position / scale it so that it looks like this:

greycontent_10

11. Draw yet another rectangle with Gradient Overlay settings:

greycontent_11

12. Position / scale it so that it looks like this:

greycontent_12

13. Draw your another rectangle with fill colour #A2A3A7. Then add an Inner Glow style like this:

greycontent_13

14. Position / scale it so that it looks like this:

greycontent_14

15. Draw your final rectangle and add these Gradient Overlay settings:

greycontent_15

16. Position / scale it so that it looks like this:

greycontent_16

17. Add these Stroke settings:

greycontent_17

18. And these Bevel and Emboss settings:

greycontent_18

19. Your canvas will look like this:

greycontent_19

20. Right-click this layer and choose Rasterize Layer. Highlight this area with the Rectangular Marquee Tool:

greycontent_20

21. Press Delete and your canvas will look like this:

greycontent_21

22. Now add some text and it’s finished. The example below uses the Tahoma font with no anti-aliasing:

greycontent_22

One Response to “Grey content box in Photoshop”

  1. directory says:

    Hello. May I rent your layout for my site? :)

Leave a Reply

You must be logged in to post a comment. If you don't have an account register one now.

Do you need a website or web-related service?
I run an award-winning web design studio.