| STEPS |
CLICK TO ENLARGE SCREENSHOTS
|
1. open up your design in adobe imageready, it should have been installed with your photoshop. if you don't have it, try reinstalling photoshop and see if it asks you if you want to also install imageready. for this tutorial i will use a design i created in an earlier tutorial tha you can find here.
|
|
2. the first step is to "SLICE" or cut up our design into pieces that we can manage. It is always a good idea to try to keep the amount of slices as even as possible and as less as possible. This really makes things more simple and easier to code with if any case you need to go into the HTML and edit something afterwards.
so you should figure out how you want the site to be sliced up. what are the best places to start cutting that would make the codes easier in the end. for me, for this particular design, it is easier to start horizontally and work down. select the SLICE tool on the vertical toolbar on the left and start dividing up your design.
|
|
3. take a look at my slices, i think that is the best for this particular design. i could have cut some more slices or taken some out, but i don't think it would be best optimized.
|
|
4. now press and hold down the SLICE tool again, and select the second slice tool which is Slice Select. This tool would allow us to select individual slices to resize or delete or edit.
what we want to use this tool for is to start renaming our slices so they are easier to recognize later on when we code the page. It is also used for setting up our hyperlinks for our navigational links.
begin by select a slice you would like to edit and on the bottom toolbar, you will see a SLICE tab. press it and enter in the values for that particular slice. you can set the name and where it links and other settings. do this for every appropriate slice.
|
|
5. now select OPTIMIZED tab at the top of the canvas. this will make the file size smaller and convert the images to GIF.
|
|
6. now go to FILE > SAVE OPTIMIZED AS, and pick an output. Make sure for "save as type" you select both HTML and Images and All Slices. Sit back and wait till it is finish saving, couple seconds.
|
|
7. you are finished. the output should be an HTML file and an "IMAGES" folder with all the cut up images in it. you can go into the HTML and edit or customize anything futher.
|
|
