Home
Photoshop
Web Layout
Web Page Layout
Level: Experienced Software:
This is the first layout tutorial of WebDogPro and I hope you learn how to make your own layout and import it to Dreamweaver. You going to learn how to work (basically) with Dreamweaver (I've use MX 2003 not 2004).
Well let's stop talking and start working, open your Photoshop. After that make a new 800x600 image (if you want can work with more, like 1024x768, but Im going to work with that).
1. Fill it with this color: 4D5D6D.
2. Create new layer and with the Rectangular Marquee Tool make an 800px x 160px Rectangle. When with the Gradient Tool fill it. Here the colors you have to use in the gradient:
3. You should have something like this.
Now let's add some Layer Styles:
Drop Shadow:
Pattern Overlay:
Stroke:
If you don't have that pattern follow this instructions.
4. Now create new layer and with the Rectangular Marquee Tool another Rectangle, I would recommend 800pxx50px rectangle and use it like this.
If this apply re-order layers... put this layer after the backround.
5. Fill it with a color. After it add this layer styles:
Drop Shadow:
Bevel and Emboss:
Stroke:
6. Now let's type our logo text, and make it different. With the Type Tool, type your text in the first rectangle, an recommendation, the pixel-stylish texts work really good. After you type your text add some Personal Layer Style, your layers style or style of the text, make the difference.
7. Ok, now I have this.
8. Let's make the menu. with the Rounder Rectangle Tool (
) make something like this.
After that add this layer styles:
Drop Shadow:
Inner Shadow:
Bevel and Emboss:
Stroke:
10. Now in the Mid Side of the image make a text... like "News", add some effects. I would recommend the text tutorials before this layout making tutorial.
11. Now with the Rounder Rectangle Tool (
) make another rounder rectangle. This will be the News area. I should recommend this color: B8BFC7.
12. Add a stroke layer style. Now make another rounded rectangle in that rectangle. I should recommend this color: 263340.
If you didn't understand the latest steps here is the image.
13. Now add this layer styles:
Bevel and Emboss:
Stroke:
14. Rasterize that layer. Now with the Polligonal Lasso, make a triangle in the left corner of the shape. Something like this:
Now press Supr in your keyboard. Now with the Rectangular Marquee Tool do the same in the another corner:
15. Now the design are READY!!!! Let's start working with Dreamweaver!! :)
You have to make diferents images like this.
You should be really carefull in the Menu and News Images because the images MUST be the same width of menu.jpg and menufinal.jpg (Talking about Menu area) and the news must be the same width newsstart.jpg, news and finalnews.
Sizes:
Logo.jpg: 800x210
Menu.jpg: 230x2
MenuFinal.jpg: 230x40
NewImage.jpg: As neccesary.
NewsStart.jpg: 545x46
News.jpg: 545x1
NewsFinal.jpg: 545x46
Explaning this step again. You just have to select the area of the image with the Rectangular Marquee Tool, make new images and copy and paste it in the new image. After you select-copy-create image-paste go to File -> Save for Web and save it in your images folder. I mean, if your site is located in C:webdoglayout you have to make a new folder named "images", C:webdoglayoutimages.
Before we start to code our site, download this file, (is just and 1x1 transparent image). IF you can't download right click and hit Save Destiny As... and save it in your images folder.
16. Ok now open Dreamweaver and make new file, save it with the name "index.html" in your principal folder.
17. To make the logo add this in your <body> tag.
| <body bgcolor="#4D5D6D">
<div align="center"> <table width="800" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="images/logo.jpg"><img src="images/pixel.gif" width="800" height="160"> <table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="228" height="44"><img src="images/pixel.gif" width="230" height="44"></td> <td><div align="center"><font color="#000000" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Home - Forum - Downloads - Contact US.</strong></font></div></td> </tr> </table></td> </tr> </table> |
Now after that add:
| <table width="800" border="0" cellspacing="0" cellpadding="0">
<tr> <td width="230" height="38" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td background="images/menu.jpg" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="4%"> </td> <td width="96%"><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Principal Menú:</strong> <br> <font size="1">Home<br> Forums<br> Downloads<br> Tutorials<br> Games <br> About Me<br> <br> This layout is a production of:<strong><br> WebDogHost.com, </strong>the best cheapest,<br> cool and easy hosting<strong><br> webdogpro.net, </strong>the webdoghost <br> comunnity<strong>.<br> da-simon.com, </strong>your on-line stuff <br> comunnity. </font></font></td> </tr> </table></td> </tr> <tr> <td background="images/menufinal.jpg"><img src="images/pixel.gif" width="230" height="40"></td> </tr> </table> </td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> </td> <td width="1%" background="images/newimage.jpg"><img src="images/pixel.gif" width="166" height="66"></td> <td> </td> </tr> </table> <table width="545" border="0" cellspacing="0" cellpadding="0" align="center"> <tr> <td background="images/newsstart.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td><img src="images/pixel.gif" width="166" height="21"></td> </tr> <tr> <td><div align="center"><strong><font color="#FFFFFF" size="2" face="Verdana, Arial, Helvetica, sans-serif">The NEWS TITLES</font></strong></div></td> </tr> </table></td> </tr> <tr> <td background="images/news.jpg"><table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="5%"> </td> <td width="90%" valign="top"><font color="#FFFFFF" size="1" face="Verdana, Arial, Helvetica, sans-serif">YOUR NEWS </font></td> <td width="5%"> </td> </tr> </table></td> </tr> <tr> <td background="images/newsfinal.jpg"><img src="images/pixel.gif" width="545" height="40"></td> </tr> </table> </td> </tr> </table></td> </tr> </table> </div> </body> |
Well my friends... that's all... If you follow the step by step you should have something like this.
If you folow step by step and you don't have that, I would recommend you to re-check the steps or ask me in www.good-forums.com or soon in www.da-simon.com :P.
What can I do now?...
Now you have to make your site different of the another who see this tutorial. What I mean, make your logo different, use another colors, change the patterns, change the gradients, change the style menu... HERE IS A HUNDRED OF POSIBILITIES TO DO!, don't stop here.
1. Create new 1x2 image.
2. Zoom it and with the Pencil Tool with 1 px fill a side of the image:
3. Now go to Edit -> Deffine Pattern -> Set a Name. Press ok.
4. Now you're ready, you can back to the step 3 clicking here.
More Photoshop: Most Popular Materials | Fresh Materials
| TutorialKit New Photoshop Tutorials