Full Website Layout - Slicing your image for exportation
Full Website Layout
Photoshop - Slicing your image for exportation
This tutorial is the second part of a 3 parter. This will guide you through how to slice your template in Photoshop ready for exportation to HTML.
| 1. |
Open your document again, if you haven't already. |
| 2. |
Select the slice tool |
| 3. |
Now you can cut up your template. We have 3 main areas to cut first. We have the header and navigation, the main content area and the footer. See here for example |
| 4. |
Now that we have the 3 main sections set out, we can put more detailed slices in, especially on our navigation bar. View example here |
| 5. |
Once you have finished slicing go to File » Save for Web |
| 6. |
On the left select the save settings you want. I am using JPEG with quality set to 80 and blur set to 0.
I have this set as a Preset. You can download the PSD file here |
