Post by Christie on Mar 13, 2005 17:35:16 GMT
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.
Continued in next post
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.
Continued in next post
, Great minds think alike 
