Photoshop Tutorials

Image Slicing

1.) Open up the image you wish to slice in Photoshop. I will be using this image for this tutorial. In your toolbar, select the slice tool (or press "K"). Make sure you choose "slice tool" and not "slice select tool". The slice tool looks like a knife; please see image below for more detail:



2.) Right click on the image and select the option "divide slice". A little window will now pop up. You have two options: divide horizontally into and divide vertically into. It's your choice how you want to slice it. You can slice your image vertically, horizontally or both. For this tutorial, I will be slicing my image horizontally. Tick the box "divide horizontally into" and select "### slices down, evenly spaced". For ###, you put the number of slices you want your big image to be sliced into. I chose 5. You can also slice your images based on its height (in pixels). I prefer the former option. You can preview your image slices by ticking the "Preview" box. Click "OK" when you're satisfied with your choice. See image below to see my settings:



3.) To save your newly sliced image and obtain the code for these slices, go to File--->Save for web. You will now get a new window. Edit the settings to how you want it and click "Save". It will then prompt you to save it. I suggest you create a new folder and save these files in there. Once saved, you will then see an HTML file and a folder (called "images") containing your sliced images. Now you can just build around the provided HTML and you're well on your way to creating your first layout. See the image below to see my settings: