My Board

Well okay. This is my second tutorial ever written so bare with me.

We live in a sick crazy world these days where websites are all over the web (duh). Many people want to build their own website but don't know where to start or don't know that much HTML. This tutorial should help the average user build a website or webpage by using images.

We start by opening photoshop. I am using Adobe Photoshop CS2. We want to create a document that is 800x600 pixels. We use 800x600 because there are still some poor souls out there with really small monitors and it just looks nice.

[url=\"http://www.killanet.net/uploads/tut1.gif\"]:-Click For Image-:[/url]

My new documents always start out with a transparent background. If yours does too just use the paint bucket tool and fill layer 1 with white. We want to lock this layer because were not going to be doing anything else to it.
After you lock the layer we want to create a new layer. We begin our site by selecting a rectangle in the upper left corner. I plan this to be my navigation.

[url=\"http://www.killanet.net/uploads/tut2.gif\"]:-Click For Image-:[/url]

We fill this box with a color (i used a grey color) and continue on selecting more boxes on the same layer. I added another content box, website banner, main content box, and website footer.

[url=\"http://www.killanet.net/uploads/tut3.gif\"]:-Click For Image-:[/url]

Okay. Now that looks a little too flat for my taste. So we are going to right click the layer and select blending options. The next few images are the setings i used. You can play around til you get what you want, but for this tutorial i did the folowing.

First we drop a shadow.
[url=\"http://www.killanet.net/uploads/tut4.gif\"]:-Click For Image-:[/url]

Next I beveled it.
[url=\"http://www.killanet.net/uploads/tut5.gif\"]:-Click For Image-:[/url]

Then a simple stroke
[url=\"http://www.killanet.net/uploads/tut6.gif\"]:-Click For Image-:[/url]

Okay. That looks spiffy...Now we want to work on our content boxes a little. We need a place for a content header to go. We do this by selecting a thin line accross our content boxes and then hitting delete.

[url=\"http://www.killanet.net/uploads/tut7.gif\"]:-Click For Image-:[/url]

Alrighty then. Now we want our site to start coming to life. This is where we start adding our text and different effects to the site.

[url=\"http://www.killanet.net/uploads/tut8.gif\"]:-Click For Image-:[/url]

Okay. Now we need to slicethis one large image up into smaller images that fit together. Photoshop has its own fancy little tool that helps us with this. Its called the slice tool. It works alot like our selection tool. [b]*note* When slicing your site you want to make sure you slice your links into seperate images but you want to have the least amount of images possible to help with compatability**[/b] Also you want to slice out where your going to add your content such as the main content box

[url=\"http://www.killanet.net/uploads/tut10.gif\"]:-Click For Image-:[/url]

Here is what mine looks like after its all sliced

[url=\"http://www.killanet.net/uploads/tut11.gif\"]:-Click For Image-:[/url]

There. now we go File>Save For Web and save it to a folder. I usually rename my file to index. It will save all of your images in a sub folder and create its own html file for you. Now all you have to do is open your html file in your favorite editor such as dreamweaver and get delete the image that you sliced for your main content box. Now you have two options. You can either set your websites background to match your content box's color or you can use an iframe.

If you decide to go with the iframe you have to know the width and height of the image you deleted out of the content box. once you have that just use this simple code in the HTML
[b]<iframe src="page your linking to" width="old width" height="old height" frameborder="0"></iframe>[/b]
just replace the stuff in quotes to match what you have. Make sure you leave the quotes though

There you have it. I hope it was easy enough to follow. If not just leave a comment and ill try and clear it up for you...or you can e-mail me at drummerboyjoe@gmail.com
happy web developing!

Nice work, keep em coming <img src=\'http://www.killanet.net/forum3/public/s ... >/good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' />

Oooh, nice, i may have to try that at somepoint.

Thats a good tutorial. Good job. Btw, yes it is easy to follow, but then again I'm experienced in web and design but that right there much have taken time to write (time I dont have =P). Good credit, KUDOS 4 U!!!

Thanks =)

Nice tut Sylo <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />

I\'ll keep mum with respect to web standards, but it\'s a great way for those who\'re used to Photoshop to start work on the net <img src=\'http://www.killanet.net/forum3/public/s ... >/good.gif\' class=\'bbc_emoticon\' alt=\'(Y)\' />

and ill keep mum with respect to usability standards too <img src=\'http://www.killanet.net/forum3/public/s ... igwink.gif\' class=\'bbc_emoticon\' alt=\';)\' />

good way of showing how you can use photoshop to crop website templates though <img src=\'http://www.killanet.net/forum3/public/s ... /smile.gif\' class=\'bbc_emoticon\' alt=\':)\' />

thanks. usually i slice different and everything. not to mention the generated HTML file is usually crap. but if i was to post a tutorial on how i do it..it would be a billion pages of trial and error and broken coffee mugs...