Web Page Layout : techimoto

Web Page Layout »

By MaxW on Dec 14, 2004 in Photoshop |

Learn the basics of creating a template and then learn how to slice it and put it in dreamweaver.

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).

In this tutorial I going try to be clear… and If you don’t understand
can email me (you can find my email below the tutorial) or post in www.good-forums.com.

Well let’s stop talking and start working, open your Photoshop. After
that make a new 800×600 image (if you want can work with more, like 1024×768,
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.

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.
*Click Here*.

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: 800×210

Menu.jpg: 230×2

MenuFinal.jpg: 230×40

NewImage.jpg: As neccesary.

NewsStart.jpg: 545×46

News.jpg: 545×1

NewsFinal.jpg: 545×46

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 1×1
transparent image). *Download*. 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”>

<tr>

<tr>

<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:

<tr>

<tr>

<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>

</tr>

</table> </td>

<tr>

<tr>

<td>Â </td>

<td>Â </td>

</tr>

</table>

<tr>

<tr>

</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>

<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>

</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.

Pattern Instructions:

1) Create new 1×2 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.

techimoto

Web Page Layout »

Categories

Pages

Recent Videos