Super simple Photoshop WebPages

Super simple Photoshop WebPages.



Anyone who has Photoshop can literally make a pro looking webpage in a matter of minutes with this simple tutorial.



First of all, make a new document with a width of 1005px and a height of 768.

Then the rest of the design is up to you. Set it out as you would want to have it look like on the internet, here you can make anything happen. Have a great arching header that swoops down to the left and morphs into a menu, have the header blend in with the workspace in the center. The list goes on and it is mainly to do with you.

Now the next part is the universal part. Using the Guide tools, (Ctrl+H if not enabled) drag a guide line from the top of the document and position it under the header. If it blends in with the workspace then position it just where the blend finishes. Do the same with all of the major components of the layout. This includes the center but (this is a personal preference here) guide out a section with a border around it and the menu and header or whatever you set it out like. This space will be used to include an “iframe” component which I will explain later. Now, with the marking out finished select the ‘slice tool’




Now, drag a selection that corresponds with the guides you drew. The slices should automatically align them selves to the guide lines so this should make things easier and a lot quicker. Once you have done that go to File->Save for web. This will open another window that shows all your slices. These will be cut up to create the jigsaw puzzle that will be your page. Press “Ctrl+A” to highlight the entire document and go to the quality dropdown box and select JPEG Medium and hit save. Make sure ‘html and images’ is selected and name it (preferably in its own folder for the sake of organization and it would be best to name it ‘index’ if it is a home page) and save.



Now you have a html document and a folder full of all your slices. Open your html document now with a desired html editor (Dreamweaver, Frontpage, notepad whatever suits you). Either using the images in the folder and their names or simply selecting the image in Frontpage or equivalent, select or find the big image we made in the workspace earlier. Now, making sure to do this between the

tags, put the following tag
(without the " at the beginning)

here are two pages i made recently using this technique.
1
2

that dude is a blooming handy little tutorial you did there!

I also had a look at your superb SHEFing article, and i have got to say that it was a nice little piece of work and well worth a few minutes learning for all those new to PS and other graphic art - Cheers for those dude, as i think that the more we all share, the quicker we can all learn.

good to see that my work is appreciated. there will be more to come i think so keep an eye out. i still have some that i will convert into forum format so stay tuned