12. Click on the icon "Jump to ImageReady" which is placed at the bottom of the Tool Box.

Toggle between Photoshop and ImageReady to transfer an image between the two applications for editing without closing the originating application.

Files and documents updated in one application gets automatically updated in the other application.

13. As soon as the icon "Jump to ImageReady" is clicked Adobe ImageReady screen is displayed. This software possesses tools to slice the whole image into medium size images and then save it as html page.

14. To avoid confusion between the two software's as well as the opened layout.

Switch to Adobe Photoshop

Close the layout file, It prompts to save the file again

Save the file and exit Photoshop software

This also fasten work since if both the softwares are open then they will consume lot of RAM memory and the machine will work slow.

The guides were already placed in Adobe Photoshop

Therefore these guides get automatically displayed in Adobe Image Ready.

15. In case the guides are not visible then

Choose View > Show > Guides

1. "Slicing" is a procedure wherein you can cut and divide the whole layout into small pieces or slices. This helps in easy downloading of the html page.

Use the defined guides as a reference and start slicing the layout accordingly.

2. Choose Slice Tool (K) from the tool palette.

Snap: Snaps helps with precise placement of selection edges, crops, slices, drawing tools, paths and objects by aligning them with guides, slices and grid.

3. Choose View > Snap to > Guides

Snap To Guides option helps in fine slicing of the layout according to the guides marked earlier.

4. First Slice the Buttons i.e. Profile, Products, Clients, Contact Us, Advice Online & Feedback.

5. Slice the logo according to the guidelines.