Grey content box in Photoshop

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:

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:

3. So that it looks like this:

4. Add Stroke settings like this:

5. Your end result will be like this:

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:

7. Now add Stroke settings like this:

8. So that your canvas looks like this

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

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

11. Draw yet another rectangle with Gradient Overlay settings:

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

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

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

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

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

17. Add these Stroke settings:

18. And these Bevel and Emboss settings:

19. Your canvas will look like this:

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

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

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

This entry was posted by Tim on Saturday, January 10th, 2009 at 2:43 pm and is filed under Photoshop, Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.