Photoshop Slice Tool

The slice tool can be used to help create webpages and elements of them. In this post I’ll show you how to create a very simple navigation example.

 

 

 

Step 1.

Create a 200×800 pixel document in Photoshop.

Step 2.

Select the Rounded Rectangle Tool, set the type to Shape Layer in the option bar and the colour to blue. Draw out a rectangle as in the example.

Step 3.

Select the Layer styles and add a Inner Glow, set the size to 24.

Step 4.

Copy this Layer a few times and arrange them one on top of each other as in the picture.

Step 5.

Using the Text Tool add some text to each button eg home, about, photos, me, etc.

Step 6.

Select the Slice tool and draw around each box – this works pretty much the same as the Marquee Tool.

Step 7.

Next select the Slice Select Tool from the flyout menu, right click on the first slice and select Edit Slice Options.

Step 8.

From this dialogue we want to adjust the name and the url to reflect the name of the link and the page it wishes to go to. In this example I have named the slice home and the url to index.html, this could be anything for example http://www.google.com

when you have completed this for all of your buttons we select the save for web option in the file menu. (File>Save For Web>)

Step 9.

In the Save for web dialogue select the Save button, from Save as type drop down menu choose html and images, give the file a name and click Save.

Step 10.

Navigate to the saved file and double click the webpage file that has been created for you – this will show you what you have created. If you want to use the code within a web page simply open the webpage up in notepad and copy everything between and including the <table> </table> tags.

Of course this only a simple example of what can be done.