| Step1 : First open Adobe Photoshop and make the desired image. For example if you are making a webpage with three parts. |
 |
| (a)top bar (b)body (c)bottom bar |
| Step2 : After making this image Goto File > Edit in ImageReady(or shift+ctrl+m). |
 |
| This will transfer the image to ImageReady. |
| Step3 : In ImageReady Goto Window,option before Help in menu bar. |
 |
If Tools & Slice option is not checked, then check it, it will
open windows of tools and slice. |
|
| Step4 : |
|
| Select the slice tool and cut the top bar, body and bottom bar. |
| Step5: |
 |
| Select a slice then in slice window change the name of the slice.Do this with all the slices. |
| Step6: Now Goto File > Output Settings > HTML. |
 |
| This will open a window Output Settings. |
 |
Click on Next Twice.
You will see ‘Preset:‘ dropdown menu is set to ‘Default settings‘. Second dropdown menu is set to ‘Slices‘. |
| Step7: |
 |
In ‘slice Output‘ box, select the second radio option (Generate CSS). ‘Referenced’ dropdown menu is selected
to as ‘By ID‘.Now click on ‘OK’. |
| Step8: |
 |
Now again Goto File > Save Optimized As (or ctrl+shift+alt+s) and select the drive or folder in your PC and ‘Save as type‘
to ‘HTML‘ or ‘HTML and Images‘.This will create an HTML file and a folder named ‘Images‘. |
| Step9: |
 |
| The HTML file is having the CSS code. You can change this code according to your need. |
 |
