Slicing Tutorial

Slicing is mainly used in Adobe Photoshop to make a webpage. Most web pages are composed of many images, each which will be hereby referred to as a slice. This is a very simple procedure, but doing it effectively takes some time. I will give you some good tips as this tutorial progresses.

  1. First step is to open up Adobe Photoshop (or ImageReady) and then load your webpage layout, such as this one here. Click on the slice tool, and begin by creating a box of approximately the same size around each of the buttons on your webpage.
  2. Make sure they are the same height by checking the slicing properties and preferably the same width (this will cut down on the HTML coding and will make everything so much easier).
  3. You will notice that dotted light blue lines extend from your blue box that you made with the slicing tool. Since slicing can only occur with straight lines, there will automatically be light blue lines formed after each slice you make. These show the dimensions of a slice which will be formed automatically if you do not slice up that area.
  4. In the top left corner of the blue box, you will see a number (this is the slice number). If two consecutive slices do not have two consecutive numbers, chances are there is a very small slice which has been formed between those two slices (and since it is so small, the number cannot be displayed). If this ever becomes the case, check the properties for each slice and make sure their x and y coordinates make sense. Also, try moving one slice to the left or right a little bit and check if the slice number changes.
  5. Next, continue slicing up your entire webpage. When you are slicing your content box (where any text will go), slice out an area where you want the text to go (this slice will later be deleted, so you can type in the space leftover).
  6. Once all your slicing is complete, go to File > Save For Web and this will create an HTML file along with an images folder for the slices. Here is my completed sliced layout.
  7. That's it! Now just open up the HTML file with a coding program such as Microsoft FrontPage, Macromedia Dreamweaver, Nvu, etc... These programs are all WYSIWYG (What You See Is What You Get) editors, which means the webpage is displayed and you just click where you want and type (rather than typing all the code). Once you've finished with those pages, upload it to a good server and you're all done! I hope this tutorial was helpful, if you have any questions or comments please contact me.