Hi-Tech Layout And Slicing Layouts

1. Ok, often a problem when designing a layout for beginners is deciding how big they want the site to be. One of the main objectives when designing a site is to build it for a targeted group of people. For example, if you are targeting an older group of people, or lots of different types of people, you want to think about how large their resolution is. Assuming that some keep their resolution at 800x600, others at 1024x768, and a smaller amount at 1280x1024, you would want the site to be able to fit all of those resolutions, so you would go for the smallest one. Sometimes, you may be designing a site for a group of people like graphic designers, who tend to keep their resolutions anywhere from 1024x768 and up, in this case you may want to build the site to these standards so you have more room, and higher quality graphics. You get the picture... In this tutorial, we are going to make a site that will work with any of the usual resolutions (so that means that we will make a site that easily fits 800x600 resolutions and up). So let's begin! Make a new document in Photoshop 700x600. Fill it with a light grey background:

2. Now make a new layer, and make a selection that covers most of the document, fill this with white:

Click to enlarge

3. Center the white area. If you are unsure how to do this, I have a centering tutorial in the tutorials section of GreyCobra.com. Now add a drop shadow to the white layer with a distance of 0, a spread of 20%, and a size of 25. Add a size 1 border that is black now:

Click to enlarge

4. Now we need to make a banner for your design. While holding ctrl, left click the white layer to select it. Now using the subtract selection tool, make a rectangle in the top of the site for your banner. Fill the selection with a dull blue in a NEW layer:

Click to enlarge

5. This obviously is not a very attractive banner, so lets add some pre made stuff I have to it. I give you permission to use the following picture in your works as long as you give credit to GreyCobra.com for the piece, but I highly recommend you experiment and create your own custom banner:

Click to enlarge

Now, copy paste this banner into your image, and move it to the very top. Cut out any parts that hang over the edges of the blue layer. Make the blending mode for this layer luminosity:

Click to enlarge

6. Now add a stroke to the banner (1 width, black):

Click to enlarge

Now lets make a glossy reflection look over the banner. Create a new layer, and using the eclipse selection tool, make a selection that creates a semi circle over the banner. Cut off the parts that hang over the edges. Fill this selection with a white to transparent gradient:

Click to enlarge

8. This part is optional, but create a new layer, and set the blending mode to optional. If you have downloaded my brush packs for tech brushes from greycobra.com, or if you have your own, start making some designs over your banner (be sure to use white brushes):

Click to enlarge

9. Make another new layer, and make a selection right under the banner in a rectangle. Fill it with a gradient from blue to black, and add a black stroke to it with a width of 1:

Click to enlarge

10. Now lets add some links into this bar. This will be our navigation bar. Just start adding some text to it (pixel text tends to work really nice).

Click to enlarge

11. Duplicate the navigation bar, and drag it to the bottom. Now flip it around (Edit > transform > Flip horizontal). Write some copyright info in here:

Click to enlarge

You should now have the basis for your layout! Once you have completed all of these steps, proceed to part 2 to learn how to slice.