[TUTORIAL]Full Web Site Design[Photoshop] [Dreamweaver]

Preface:

I made this tutorial a couple years back, and it was before i learned how to make good looking CSS codes, and before i really learned the use of the DIV tag lol. This is just a starting point for people that want to learn the basics of web design, or just someone that wants to learn a different way of doing it.


Well everyone, as many of you had asked me to, and voted for me to do. I'll be putting my layout into an Easy to Follow Tutorial. If you have any problems finding anything on the tools pallet, or anything else, check [url="http://huntresswow.forumotion.net/please-use-the-gallery-f9/tutorialthe-basics-of-photoshop-t309.htm"] Here[/url] Well lets get started.

Table of Contents

Getting Started

1. The Sidebars
   
2. The Header
   
3. Adding Text
   
4. Slicing
   
5. Saving
   
6. Blending the Layout
   
7. Moving on to Dreamweaver
   
   

Getting Started
--------------------------------------------------------------------------------------------------

First Create a new document. Make it around 780 x 880.

Next Make a new layer and grab the gradient tool. You can Edit the Gradient color by clicking this:



I chose Black>Grey to make it easy on the Eyes.. Other Nice choices would be some kind of Earthy colors. Like Browns, Greens, or some nice Blues.

Next, Fill the background with the Gradient, and make it spread out evenly, so there arent any hard lines. Hold Shift while making your selection to keep the Gradient line straight.

---------------------------------------------------------------------------------------------------


The Sidebars
---------------------------------------------------------------------------------------------------
Sidebars are a good way to accent your layout with a cool design. You can create any kind of style you wish. I chose to make a striped kind of "Caution Tape" kind of design to go with the theme of my site.

Create a New Layer and use the Selection tool to select a narrow Colomn down the side of your canvas. Fill that with the base color you want for your side bars. Now, adding in those stripes

You can do this by Selecting the "Line Tool"

You can make changes to the Line Tools settings Here:


Create a new Layer.

Make sure that the layer selection is still there. If not, hold Ctrl and click the Layer with the Column in it. Now Hold Shift and make a Diagonal line across your selection in your newest layer.

Make 2 lines and then stop. Now all you have to do is Duplicate that layer, and space them accordingly.

To make it easier. Just Merge all the "Side Bar" layers by pressing CTRL + E, and then duplicating that layer. And then Fliping it horizontaly by going to Edit>Transform>Flip Horizontal. And placing it on the Opposite Side. Make sure you leave just abit of space between your side bar, and the side of the canvas.
----------------------------------------------------------------------------------------------------

Well Guys and Girls, lets see how you're doing. so far your Canvas should look something like this:


----------------------------------------------------------------------------------------------------

The Header

Create a New Layer.

Heres an Easy part. Make a selection inbetween your 2 side bars and fill that with a color that matches your Background, but is abit lighter then your BG.

Set the Layer to Soft Light.

Now click this icon and add these attibutes:


Inner Shadow

Blend Mode: Normal [ Black ]
Opacity: 80%
Angle: -90
Distance: 3
Choke: 0
Size: 0

Gradient Overlay:

Blend Mode: Soft Light
Opacity: 100%
Gradient: Your Main Color>White
Style: Linear
Align with Layer: Checked
Angle: 90
Scale: 100%

Partern Overlay

Blend Mode: Soft Light
Opacity: 19%
Pattern: Diagonal Lines (I'll show you how to create that)
Scale: 180%

Now Create a new layer and Make a Selection over the Top Half of the Header, abit smaller then half i'd say.

Now Fill that with a Gradient going from White to Transparent. You can do that by editing the Gradient:



Set that layer to soft light aswell
-----------------------------------------------------------------------------------------------------

Adding Text

Grab the Text tool, and add text to your header. You can even put the navigation inside the header if you like.

-----------------------------------------------------------------------------------------------------

Slicing

Using the Slice tool, Cut out around each second that you plan on linking. My selections came out to look like this:


-----------------------------------------------------------------------------------------------------

Saving

Now just goto file>Save For Web and double click on each slice that represents a link, and name that slice accordingly, as it will make it easier for you to link it to the page its suppose to goto.

----------------------------------------------------------------------------------------------------

Blending the layout
Now make a Slim selection going from top to bottom of the background of the layout. Copy and paste that into a new canvas and save it.

Now set that as the background of the HTML file that Photoshop created for you when you did "Save for Web", and it should look fluid with your design.
---------------------------------------------------------------------------------------------------

Now you can open it up with Dreamweaver and Edit the hell out of it.


Moving On to Dreamweaver

Moving on to Dreamweaver, after you Cut out all your Slices, and then did Save For Web and named the slices accordingly. You should have named the slice where your content is going "Content" so it would be easier to find in the source code that Photoshop created for you when you did "Save For Web"

Now, Photoshop saved all of this in an HTML file on your computer (Wherever you decided to save it to that is)

Open the HTML file in Dreamweaver, and select the "Split" View, so you can see the Code and the Design of the site, so you know you're editing the right places. Now select the slice called "Content" by clicking on it in the Design View.

Inside the Code view it will zip down to the part of the code that holds that image. It should look something like this:



Now all you have to do is Delete the image, and in place of it, put a Table.


You can do this by going to Insert>Table..

That will pop up a screen like this:



Enter in the values that i put in, and hit "OK"

Now you will see a table inserted into the Design Table, and the Code is already placed into your HTML file Automatically by Dreamweaver, cool eh?

Now resize the table to fit inbetween the Side Bars, and also so it lines flush with your top navigation.

You may be looking at it saying "Ok, but the text is going to be entered in the middle of the table... i want it at the top, by the navigation so it looks good"

This is where the Properties Panel comes in. Look for the Vertical Align option on the Properties Panel, and Set it to Top:




Now if you have any other spaces that you want to have editable regions, but their in a spot where it would be hard to duplicate its background then you can do it like this.

Copy the Image name from the image code for the slice, and then set it as the background for the Table row. You can do that like this:

<td background="http://www.rpgforums.com/forums/images/imagename.png">

Then you can put text over it by putting your text inside the Table Row.

Though you could also do your navigation like that aswell so it doesnt take as long to load.


So now you know how to Edit your HTML Document in HTML, and how to Add Text to it. If you need anymore help, just Post a reply to this thread or PM me and i'll get back to you as soon as possible.

This Tutorial is Property of Matthew Valentia, and was Made for RPGForums, any attempt to post it on another forum, will result in actions taken to protect the rights of its creator.