posted on Oct, 18 2006 @ 07:20 PM
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)