Basic Techniques Tutorial
Part 1: Basic Content Boxes

Alright, this tutorial is going to bring you into the world of creating a website using Photoshop. Im going to first make a bunch of mini tutorials on some techniques I use when creating website templates. The first thing that I always make, so that I can get a feel for making the rest of the site, is to make my content box. A content box is the little square/cirlce/area that you will be placing all your text in. This is a very important thing because you dont want it to overpower the text, but you also want it to be appealing to the majority of visitors to your site.

Lets start by creating a new document, 800x500. The reason I have so much space is because I make everything big first, then shrink it down.

Now on your new document, fill the bottom-most layer with D5D5D5 and name this layer Background. No preview needed for this. The next thing we do is select our Rounded Rectangle tool. Now draw, with white as your color and a radius of 20px, a rounded rectangle that fills appoximatley 95% of the document.

Figure 1-2

Now we need to rasterize the layer to make it easier to work with. This is done by right clicking the layer and choose "rasterize layer." After that, press "M" or select rectangle marquee tool and select a good portion of the our rectangle, about 85% of the image and press delete.

Figure 1-4

Figure 1-5

Now we will begin filling our layer. It is best to fill it with a gradient because that makes the image just that much more appealing. Press CTRL+SHIFT+N to create a new layer, name this layer "gradient." Hold control and click the layer named "Shape 1" to select everything contained in that layer and select the gradient tool from your tool pallete. Set the background color to D5D5D5 and your foreground color to E5E5E5. Now in your select area, on your "gradient" layer, drag from top to bottom until you have something that resembles this. Now this is where most people make a mistake, they go to blending options and stroke this layer. That is the wrong way to do it as you will end up with a rigid and not smooth stroke. What we will do instead is create a new layer named "Stroke" and position it below our "Gradient" layer. Now CTRL Click the "Gradient" layer and choose from the menu at the top Select -> Grow -> Expand and expand the selection by one pixel.

Figure 1-7

Now press D to return to your default colors (Black/White) and then press SHIFT + BACKSPACE to bring up your fill menu. Choose fill by foreground color, and press okay. You should havea smooth stroke now.

Figure 1-8

Sometimes you may want a different border color, so mess with the opacity of the "Sroke" layer to get one that better suits your needs. For now, I am going to stick with generic old black. The next thing we are going to do is add a line to the gradient to give it more of a 3D effect.

Start by creating a new layer named "White Line" and then select your 1px Horizontal Marquee tool. Position your mouse at the top most pixel of the "Gradient" layer and click. Make sure it isnt in the black, but one pixel down from it.

Figure 1-9

Now make sure you are on your "White Line" layer and fill the selected area with white. Make sure your foreground color is set to white and press SHIFT+BACKSPACE and Enter and it should all be done for you. It may not look noticeable right now, but it will once we add the other parts of the image.

You might be thinking, "How do I get rid of the excess on the sides?" Easy! CTRL Click your "Gradient" layer and then press CTRL+SHIFT+I to select the inverse. Now make sure you have the "White Line" layer selected and press Delete.

Figure 1-10

Now we are going to start making this thing look pretty. Choose a blue-ish color because blue jsut seems to always work with whites and silvers. I choose 22289F. Now select your Elipse Tool and draw three small circles on the right end of your image.

Figure 1-12

Now Rasterize those layers using the same method from one of the previous steps. Now to make things easier to work with, we are going to merge these three layers togather. Name the layer Circles. Now CTRL Click this layer, go into your "Gradient Layer", do the Select -> Modify, except this time, contract the selection by 1 pixel and press delete. Drag the "Circles" layer below the "Gradient" layer.

Figure 1-13

Now the next step is to fade these circles into the gradient. CTRL Click your circles layer again and make sure your "Stroke" layer is selected and press delte. Select your "Circles" layer again and send the opacity of it down to 34%.

Figure 1-14

This next step might be a little bit tricky, so pay close attention. What you need to do is select another blue color, a little lighter then the one from before and then select the Elipse tool again. This time, draw a big oval in the middle of your document and Rasterize it. Now manuever it above your gradient layer so that the majority of your gradient cannot be seen but you can see the White Line.

Figure 1-15

Now position the circle in a spot where it will be attractive, covers the right side of the image, and you cannot see any of the bottom of our main gradient layer.

Figure 1-16

Now you may notice I am going a bit fast, the reason is because I assume you know basic tasks and have picked up the ones I have mentioned before and know how to do them now.

CTRL Click the "Gradient" layer so that you have it all selected, select the inverse (CTRL+SHIFT+I) and make sure your "Shape 2" layer in your Layers Pallette is selected; press delete.

Figure 1-17

Now, with the "Shape 2" layer selected, send its opacity down to something where the white line is noticeable and the circles are still darked then it. You may need to modify the opacity of the "Circles" layer.

Figure 1-18

OPTIONAL: Now that I am at this point, I have decided that I want my stroke to be a bit lighter, this is okay since the stroke is in a totally seperate layer. Send the opacity of the "Stroke" layer to 21%. You dont have to do this, but for the rest of the tutorial, that is what my stroke will look like.

The next step is to make some sort of seperation between the gradient and the shape. This is not very hard to do. What I did was add a bevel and emboos effect to the layer. Bring up your "Blending Options" pallete for the "Shape 2" layer and mimic the following settings:

Figure 1-19

Now that white line is looking a bit abnoxious, isnt it? What we have to do now is simply drop the opacity of it to somewhere between 20% and 25%. This will make our gradient and shape blend better also. No preview necessary.

The next thing we need to do is make a Layer Set. Name the Layer Set "Top Grad" and place all current layers except the background layer in it, make sure you dont mess up order of the layers and if you do, it shouldnt be hard to place them in the correct order again.

Figure 1-20

To create the bottom portion of our box, we are going to simply duplicate the layer set and flip it vertically, pretty simple, huh? Doing things this way saves us time because we dont need to recreate the same image from before. Before moving this new gradient any, go to Image -> Trim and choose Trim Transparent Pixels. You won't notice any changes, but you have just deleted any parts of that circle we drew that ended up outside of our document.

To give this new grad some individuality, flip it horizontally too. Your document should look like this now: (You may need to reposition the bottom grad a bit)

Figure 1-21

To cnnect the two boxes, we are going make a new layer above the background layer, but under the Top Grad layer set. In this layer, draw black lines to connect the top to the bottom image and then make the opacity of this layer the same as the opacity of your stroke layer. On the inside of the black lines, draw white lines do give the box a beveled appearance. It helps to zoom in really close to the image on this step. If you have lowered the opacity of your stroke layer, you may not notice these white lines very much, but they will make all the difference.

Figure 1-22

To seperate your content area from the background layer, choose your Rectangle Marquee tool, make a new layer and choose all the area inbetween the top grad, bottom grad and the side lines. Name this layer "Body" and fill it with a color that is a bit lighter then the document background, try colors like E5E5E5, E6E6E6, D8D8D8 or any other silvery-white color.

Figure 1-23

Well, we are done, now all we need to do is trim out image. Go to your background layer and hide it. Now go to Image -> Trim and trim by transparent pixels. This should make your image a lot smaller and only make the content box the visible portion.

Figure 1-24

In the next lesson, I will show you how to use this image multiple times and how to create easy to use and attractive interfaces. Make sure you save the PSD of this image because if you dont, you will have to recreate it over and over again and thats no fun.

Good luck, have fun, see what you can do with these images.

A good portion of this tutorial can be used to create attractive top/bottom images for your Proboards forum also :)