[Harry K.]

How to use the Slice tool for web pages & elements
In this tutorial, I am going to be outlining the process of slicing. What you will learn:

- How to slice elements you want.

- How to export your design in HTML.

- How to get element's working.

1. Design your website!

First of all, you need to create a design in photoshop. This can be a full web page or just some elements. I have chosen some elements I quickly designed earlier today.

http://speedcap.net/sharing/files/5e/db/...fb8537.png

2. Slicing your design.

Now, you need to slice your design into sections. I recommend slicing each different section, as this makes it much easier later on whilst editing.

The slice tool is found when you Right Click the crop tool.

To slice elements, simple drag the tool over the section you want, as if you were placing a shape.

Here is what my design looked like once I had sliced all my elements. http://speedcap.net/sharing/files/73/ad/...4736a4.png

3. Getting your design ready.

Once your design has been sliced, you need to get the code. To do this, goto: "File --> 'Save for Web'"

Check all the slices are correct. Choose a pre-set export, I would recommend  PNG-24 for the best quality.

Once you have correctly configured your export, it should look something along the lines of this: http://speedcap.net/sharing/files/64/4b/...d4e25d.png

Once done, click "Preview" - This will open a page on your internet browser with the exported design & the code you need to make this happen.

Check it looks correct, and move on.

4. Export it!

Back on photoshop, click "Save". You need to give it a name, then make sure the format say "HTML and Images", Create a new folder with any name, open it and click save again.

This will create a folder called images and create the HTML file, if you open the html document, you webpage is done!

Then go on to edit in the elements for your design!