Professional Metal Layout

1. Create a new document in photoshop (about 650x600 should be fine), and fill it with a dark background:

2. Now select your your rounded rectangle shape tool from the tool bar:

3. Drag a rectangle out leaving a little space around the edges of your document for the background:

4. In your layers palette, double click the color for this shape, and set it to a slightly lighter grey so that is visible over the background:

5. Ok, now I am pretty sure that the shape is near the middle, but lets place it in the exact center.  If you are unsure how to center in Photoshop, go take our tutorial on centering (Found in Photoshop Tutorials).  Its a basic your going to want to learn in Photoshop:

6. Rasterize this layer (Layer > Rasterize > Layer).  This will let us edit the shape freely, however, the shape will no longer retain all of its previous vector attributes.  If your not sure what that means, do not worry, it has nothing to do with your final outcome!

7. Right click the layer containing your rounded rectangle, and go to Blending Options.  This menu will let you make modifications to your current layer such as shadows, blending modes, overlays, bevels, strokes, etc.  If your unfamiliar with this panel, that is fine.  Click the drop shadow so that it has a check in it, and set up your drop shadow like this:

8. This will add a shadow to your shape.  Now lets ad a bevel to it to make it have more depth.  Click the check box in on bevel, and set up the bevel like this:

9. Now your rectangle should look familiar to the result shown below:

10. This is the base of our layout.  Create another rounded rectangle, and place it at the top banner size.  After this, select everything in this layer (Ctrl + Click Shape Layer).  Then select your base layer and cut it out (Ctrl + x).  After this is done, delete your shape layer:

12. Open up and image you want to use as your background for the banner, or simply make one in this document under your base layer.  Remove any parts that go out from under your base layer:

13. Now lets create a navigation menu.  For this style site, I recommend using a pixel font.  If you do not have any, try searching on dafont.com, a great font site with many selections, organized into different groups.  Once downloaded, you may have to restart Photoshop, so be sure to save.  Type out your links like this:

Click to enlarge

14. In your blending options, set up a 1 px stroke like this:

15. Now we need to make some content boxes.  Create a new rounded rectangle shape over the base layer like this.  rasterize it and create a bevel and drop shadow like you did with the first rounded rectangle shape you made:

16. Make a selection around your new content box like this:

Click to enlarge

17. Using the magic want tool, set the selection mode to subtract, and get rid of the selection outside of the box:

18. Fill this area with a lighter shade of grey:

19. Duplicate the box layer a few times (Right click layer > Duplicate), and put them one under another.  I have filled some of mine with content to see how it looks:

Click to enlarge

20. Not too shabby so far.  Create another rounded rectangle in the center of your layout for the main content box.  Again, apply all of the blending options to it:

Click to enlarge

21. And what it looks like with some content added:

Click to enlarge

And there you have it!  A great looking website from scratch!  Send me results if you come up with anything like it or better!