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

Go To Part 1 | Go To Part 3