Did you see...

Photoshop Slice Tool

Slice_toolThe 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.

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.

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.

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.

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.

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.

step 10-1

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.

step 10-2

About Simon Rudd (51 Articles)
Simon Rudd is a freelance writer and artist specialising in Photoshop tutorials as well as Horror, the Macabre and Fantasy themed pictures. He frequently writes for magazines and websites.

1 Comment on Photoshop Slice Tool

  1. Sander Kamp // 29/11/2014 at 4:48 pm //

    Is there a way for the slices to start at slice zero? I want my images named by slicenumber, but I want to start at 0. I can’t figure out for the life of me how to do that.

Leave a comment

Your email address will not be published.