(adsbygoogle = window.adsbygoogle || []).push({});

First of all i put this thread in both programming + computing and also graphics because it relates to both.

we will be making a website like this: You must login or register to view this content.


Now lets begin..

1st. open a new document. it can be any size you want but i would recommend the photoshop defaults under "web"

You must login or register to view this content.

PLEASE READ

I am only going to show you how to make a small fraction of the actual design on photoshop. the rest is upto you


2. Set the guides.. simply drag these from the ruler feature at the top of the page. View > ruler.
You must login or register to view this content.

YOU SHOULD PUT EVERYTHING IN NEW LAYERS!

3. make the page background.

Make a new layer and draw a square
You must login or register to view this content.

4. Now goto "fx" in the bottom of the layers box. and put a cover overlay.
You must login or register to view this content.

5. Now make another box inside the rulers. then goto "fx" again. NOTE after i made this i have changed the background from the gradent yellow to a pattern i made.
You must login or register to view this content.

6.Make your website come to life... Ok now you must make your website. this is where you must have photoshop knowledge.

Here is mine:
You must login or register to view this content.

7. Slicing. Now you must select the slice tool. i have drawn a red circle around it. Now draw a box around the main areas. Ie. the one you need sliced. this is normally the header, buttons, text area, bottom area. Photoshop slices the rest automatically. You must make sure not to leave any gaps in your slices as this creates additional images that will bother you in the long run.
You must login or register to view this content.
You must login or register to view this content.

8. naming the slices. you must now name your slices. this is beacuse the name that it has been given will be "slice_029" and it is typically the image name when it is uploaded. so you should change it to what you want it to be called, NO CAPITAL LETTERS OR SPECIAL SYMBOLS You do this by selecting the slice tool and double clicking the slices.

You must login or register to view this content.

9. Hit "save for web and devices"

You must login or register to view this content.

10. optimization, Here you can edit the filetypes for best downlaod speeds for your browser. here are a couple of tips.



You must login or register to view this content.

Saving. Just hit save and do the same setting as me. you should make the name "index.html" as this is understood as the homepage on most web browsers.
You must login or register to view this content.

and where ever you save it you will get a HTML and image file. this is a basic website.

this took me 1.5 hours to do please +rep and nominate.

12. save it... Just click

amazing! thank you so much
+thanked