You are probably familiar with at least a few examples of web pages where a single image has been carved up in ways that let each part of it link to a separate page or resource. There are a few ways to accomplish that goal, and one of the simplest is the Photoshop Slice tool. Its parameters allow you to use a pre-determined pattern to carve up the images. You can also set an aspect ratio or manually move slices to create exactly the right cuts. Then, when you export the project, the images are saved separately, and the CSS and HTML needed to generate the result in a webpage is also created in its own file.
Need images for your project?
Shutterstock’s flexible plans give you access to our entire library. Explore our plans today
How to Use the Slice Tool
- Use the Slice Select tool to make slice selections on your image as needed.
- Once selection, you can move and align slices with one another.
- You can also resize slices. If you need to resize them by small increments, use the direction buttons on your keyboard instead of dragging.
- It’s easy to set up web links for the final page creation by setting a reference URL for each slice. The Save for Web export feature will take care of adding them as it builds the page.
- To make more precise and controlled slices, consider using the Fixed Aspect Ratio or Fixed Size selections when you use the Photoshop Slice tool.
Slicing is easy, and it simplifies a common web design feature, so you can streamline your work time by focusing on the result instead of the complexities of the page’s code. When you are ready to export the slices as a functional page, Save for Web lets you optimize each slice and then save the entire package.
Make the Most Out of Your Stock Photos
Slicing a photo to create multiple image areas with their own links means gaining a level of control over your visual presentation that will make your website truly unique. To build the ultimate sliced image menu, choose your photos from Shutterstock’s library of unique stock photography and then customize the image with the retouching tools that let you make it your own before slicing it for web presentation. What is the Photoshop Slice Tool? It’s your streamlined solution for great visual menus. Try it out on your next project, and see how easy it is to create dazzling visuals with live links.