Post by Dr. Boskonovich on Mar 28, 2007 21:19:07 GMT -5
Basics
So what you need to make a good layout? YOUR inspiration... and a little practice
.
Apart from that, just some litte things:
- Image: Make sure the image you're going to use has a good quality. Never take a small image and make it bigger... that's the worst thing you can do. Always use big images and make them smaller, or just use them as they are.
- Idea: you should have a slight idea of what you want to do. The layout normally won't end as it was on your mind, but if you don't even have an idea... it will take you much more time.
So you have the basic things now... you have an image, and you have an idea, let's start then.
Following the tutorial
- Keep saving the psd file of the layout (File > Save) in case your computer freezes, or you do something wrong. You don't want to lose everything, right?
- Of course, don't try making this if it's the first time you open Photoshop... I'll assume you know some basic (very basic) things about Photoshop, like how to create a layer. If you don't, try the Photoshop forum of the site.
- A little knowledge about HTML is recommended, because you will follow this tutorial easily.
- If you have any problem with this tutorial, please don't e-mail me. Use the forum instead
Starting the layout
1. Open the image you want to use (File > Open). I used this Disgaea image.
2. Create a new image (File > New) with this settings: Width: 780, Height: 600, Background: white.
3. Put the image you want to use on the new image you've just create. You can do that by pressing Ctrl+A , Ctrl+C on the image, then Ctrl+V on the new image, or by clicking on the image and dragging it to the new image.
4. Too big? let's scale it down (like in the image below). Go to Edit > Transform > Scale and click on one corner and drag it to the middle to make the image smaller. Once the image is small enough click on the Move tool and move the image to the left corner.
Blending to the background
1. We'll change the background color. Take the Eyedropper tool
and click somewhere on the background of the image, on the right side. I marked with a cross on the image below a good place to get the background color so that you know what I mean.
2. On the layers window ( Windows > Layers ) click on the Background layer and go to Edit > Fill. Make sure that Foreground Color is selected and that the opacity is 100%
3. Now into the blending. Make the top layer active again (clicking on it) and with the Magic wand tool
(Anti Aliased must be selected) click somewhere out of the image. Go to Select > Feather and put 30 pixels. Cut the selection (Ctrl+X or Edit > Cut).
4. Go to Select > Reselect and cut again. Repeat this about 3-4-5 times, until the edge of the image disappears.
Content boxes
1. With the rectangular marquee tool
, make a selection where you want your content box. Press Shift and make the same for the navigation box.
2. Create a new layer for the boxes.
3. Take a color from the image with the Eyedropper tool (the one you want to use for the boxes) and go to Edit > Fill.
4. Now play around with the blending modes and the boxes' layer opacity until you like how they turned out. The blending modes and opacity can be changed at the layers window, at the top of it. I used Multiply as blending mode and 45% opacity.
5. Optional step: to add a border to the boxes, right click on the boxes layer and click on blending options. A window with all blending options will open. Select Stroke from the left list.
Brushing the image
1. Create a new layer and take the brush tool . The brush properties are at the top of the window. To load a brush, click on the little arrow next to the active brush and then again on a little arrow. They're marked on the image below. Select Load Brushes... and browse through your files to add the brushes you want to use.
2. Play with the brush opacity and add brushes as you like. I can't tell you how to do this, just use your imagination.
3. You can also add effects to the image. To do so, always duplicate the image layer, so that you can change the layer blending modes and opacity later. To add effects, go to Filters and play around with them. Duplicate and add effects as many times as you like.
Final touches & customizing
1. Take the text tool and click where you want your text. Write it and change the text family and size. If you want to move it, do it with the Move tool. You can add special effects to the text right clicking on the text layer and clicking on Blending options. There are many effects you can use there, so try them!
2. Optional Step: Once you've completely finished your layout, let's get into the customizing. See the blank space at the left of my image? That's a waste of loading time. Let's crop the image. Take the rectangular marquee tool and make a selection of what you DO want to keep, something like what is shown on the image below. Go to Image > Crop and now you'll have a smaller image.
3. Slicing: Take the slice tool and right click anywhere on the image. Click on Divide slice. Click on Divide horizontally into and put 7 slices down. How you divide it really doesn't matter, so you can make 7 horizontal slices and 7 vertical slices, or just vertical, as you like. Click ok. Now you see blue lines on the image, those are the slices.
4. Go to File > Save for web and a window will open. On the right you have the options to save the images. Select jpeg at around 60-70 of quality. Make sure Optimized is selected. Save it as index.html. Below, it must say HTML and images. Click ok.
Coding the layout
Photoshop already makes the basic structure of the html page for you, so we just need to add the coding for the divs, change the background image-color and add the style sheet.
1. Open index.html with Notepad. Add this bit of code just before </body>:
2. With Photoshop, take the rectangular marquee tool, open the info window if it's not already opened (Windows > Info). Right click on the cross at the bottom left corner of the info window and select Pixels so that the values show in pixels. Click and drag on your image where you want your content box to be and hold your cursor at the top left corner of the selection you've just made. Now you can replace the XXX with the proper values on the div.
3. Repeat steps 1 and 2 for the navigation div.
4. To change the background color, take the color with the Eyedropper tool in photoshop, and replace the color here: BGCOLOR=#FFFFFF with your color.
5. We need the boxes to expand with the text and content of your page, so we need to put a background image. With Photoshop, right click on the Rectangular marquee tool and select single row marquee tool. Click on the bottom of the layout psd. Go to Image > Crop and File > Save for web. Save it as a 60 quality JPG and name it background.jpg (save it on the images folder of the layout). Do not save the PSD now eh?
6. To put that image as the page background, put this inside <body>, where the background color is: background="images/background.jpg". For the moment it also repeats horizontally, and it looks horrible X.x We'll fix that with the CSS.
CSS Stylesheet
1. Add this before </head>:
A little explanation about this: background-repeat: repeat-y makes the background repeat only vertically and you need to replace the colors of body (text) and a (links) to the ones you want.
Finished! now you have a basic div layout.
So what you need to make a good layout? YOUR inspiration... and a little practice
. Apart from that, just some litte things:
- Image: Make sure the image you're going to use has a good quality. Never take a small image and make it bigger... that's the worst thing you can do. Always use big images and make them smaller, or just use them as they are.
- Idea: you should have a slight idea of what you want to do. The layout normally won't end as it was on your mind, but if you don't even have an idea... it will take you much more time.
So you have the basic things now... you have an image, and you have an idea, let's start then.
Following the tutorial
- Keep saving the psd file of the layout (File > Save) in case your computer freezes, or you do something wrong. You don't want to lose everything, right?
- Of course, don't try making this if it's the first time you open Photoshop... I'll assume you know some basic (very basic) things about Photoshop, like how to create a layer. If you don't, try the Photoshop forum of the site.
- A little knowledge about HTML is recommended, because you will follow this tutorial easily.
- If you have any problem with this tutorial, please don't e-mail me. Use the forum instead
Starting the layout
1. Open the image you want to use (File > Open). I used this Disgaea image.
2. Create a new image (File > New) with this settings: Width: 780, Height: 600, Background: white.
3. Put the image you want to use on the new image you've just create. You can do that by pressing Ctrl+A , Ctrl+C on the image, then Ctrl+V on the new image, or by clicking on the image and dragging it to the new image.
4. Too big? let's scale it down (like in the image below). Go to Edit > Transform > Scale and click on one corner and drag it to the middle to make the image smaller. Once the image is small enough click on the Move tool and move the image to the left corner.
Blending to the background
1. We'll change the background color. Take the Eyedropper tool
and click somewhere on the background of the image, on the right side. I marked with a cross on the image below a good place to get the background color so that you know what I mean.2. On the layers window ( Windows > Layers ) click on the Background layer and go to Edit > Fill. Make sure that Foreground Color is selected and that the opacity is 100%
3. Now into the blending. Make the top layer active again (clicking on it) and with the Magic wand tool
(Anti Aliased must be selected) click somewhere out of the image. Go to Select > Feather and put 30 pixels. Cut the selection (Ctrl+X or Edit > Cut).4. Go to Select > Reselect and cut again. Repeat this about 3-4-5 times, until the edge of the image disappears.
Content boxes
1. With the rectangular marquee tool
, make a selection where you want your content box. Press Shift and make the same for the navigation box.2. Create a new layer for the boxes.
3. Take a color from the image with the Eyedropper tool (the one you want to use for the boxes) and go to Edit > Fill.
4. Now play around with the blending modes and the boxes' layer opacity until you like how they turned out. The blending modes and opacity can be changed at the layers window, at the top of it. I used Multiply as blending mode and 45% opacity.
5. Optional step: to add a border to the boxes, right click on the boxes layer and click on blending options. A window with all blending options will open. Select Stroke from the left list.
Brushing the image
1. Create a new layer and take the brush tool . The brush properties are at the top of the window. To load a brush, click on the little arrow next to the active brush and then again on a little arrow. They're marked on the image below. Select Load Brushes... and browse through your files to add the brushes you want to use.
2. Play with the brush opacity and add brushes as you like. I can't tell you how to do this, just use your imagination.
3. You can also add effects to the image. To do so, always duplicate the image layer, so that you can change the layer blending modes and opacity later. To add effects, go to Filters and play around with them. Duplicate and add effects as many times as you like.
Final touches & customizing
1. Take the text tool and click where you want your text. Write it and change the text family and size. If you want to move it, do it with the Move tool. You can add special effects to the text right clicking on the text layer and clicking on Blending options. There are many effects you can use there, so try them!
2. Optional Step: Once you've completely finished your layout, let's get into the customizing. See the blank space at the left of my image? That's a waste of loading time. Let's crop the image. Take the rectangular marquee tool and make a selection of what you DO want to keep, something like what is shown on the image below. Go to Image > Crop and now you'll have a smaller image.
3. Slicing: Take the slice tool and right click anywhere on the image. Click on Divide slice. Click on Divide horizontally into and put 7 slices down. How you divide it really doesn't matter, so you can make 7 horizontal slices and 7 vertical slices, or just vertical, as you like. Click ok. Now you see blue lines on the image, those are the slices.
4. Go to File > Save for web and a window will open. On the right you have the options to save the images. Select jpeg at around 60-70 of quality. Make sure Optimized is selected. Save it as index.html. Below, it must say HTML and images. Click ok.
Coding the layout
Photoshop already makes the basic structure of the html page for you, so we just need to add the coding for the divs, change the background image-color and add the style sheet.
1. Open index.html with Notepad. Add this bit of code just before </body>:
| <div style="position: absolute; left: XXXpx; top: XXXpx; width: XXXpx">Write your text and content here</div> |
2. With Photoshop, take the rectangular marquee tool, open the info window if it's not already opened (Windows > Info). Right click on the cross at the bottom left corner of the info window and select Pixels so that the values show in pixels. Click and drag on your image where you want your content box to be and hold your cursor at the top left corner of the selection you've just made. Now you can replace the XXX with the proper values on the div.
3. Repeat steps 1 and 2 for the navigation div.
4. To change the background color, take the color with the Eyedropper tool in photoshop, and replace the color here: BGCOLOR=#FFFFFF with your color.
5. We need the boxes to expand with the text and content of your page, so we need to put a background image. With Photoshop, right click on the Rectangular marquee tool and select single row marquee tool. Click on the bottom of the layout psd. Go to Image > Crop and File > Save for web. Save it as a 60 quality JPG and name it background.jpg (save it on the images folder of the layout). Do not save the PSD now eh?
6. To put that image as the page background, put this inside <body>, where the background color is: background="images/background.jpg". For the moment it also repeats horizontally, and it looks horrible X.x We'll fix that with the CSS.
CSS Stylesheet
1. Add this before </head>:
| <style> body { font-family: Verdana, Arial, Times new roman; font-size: 11px; color: #color; background-repeat: repeat-y; } a { color: #color; } </style> |
A little explanation about this: background-repeat: repeat-y makes the background repeat only vertically and you need to replace the colors of body (text) and a (links) to the ones you want.
Finished! now you have a basic div layout.
