Position Photoshop Slices Precisely with X,Y Coordinates

When developing websites, it may be necessary to convert Photoshop compositions into website templates. One could manually crop the file into its various components and save them for the Web, but the process becomes very tedious. Especially when there are dozens of individual images needed from the original composition. That's where slices come to the rescue.

Background

Of course the slicing tool has been around for a while; being introduced in Photoshop 6. For those unfamiliar, check out "Photoshop / Slicing web pages". In short, the slicing tool lets us…well slice an image into smaller images. They're also embedded within the Photoshop file making them reusable.

What I didn't consider till recently was the ability to position slices with X,Y coordinates. This is useful for slices which would normally overlap. When creating the main header graphic, for example, one slice might be used for the website logo. Another would create an image for the background behind the logo (see Figure 1).

Figure 1. Overlapping Slices

Photoshop automatically merges overlapping slices and splits the design based on the new boundaries. To avoid the extra breaks, the background or logo slice needs to be moved. In Figure 2, the background slice is moved below the header.

Figure 2. Separated Slices

Whenever there's a need to create the background graphic, the slice could be dragged back…or we could leverage X,Y positioning.

Moving to X,Y Coordinates

To move a slice to a specific X,Y coordinates

1. Activate the Slice Select Tool (see Figure 3)
2. Double click the slice to move
3. In the Slice Options panel, enter the X,Y coordinates under Dimensions (see Figure 4)
4. Click OK

Figure 3. Slice Select Tool

Figure 4. Slice Options Panel

Since the background slice fits in the very top-left corner, the X,Y coordinates should be 0,0. For some reason, Photoshop CS4 doesn't like those coordinates. I entered 0,1 instead and bumped the slice up one pixel using the arrow keys on the keyboard. Hopefully this issue is fixed in the later versions of Photoshop.

With the background slice in position, the logo slice needs to move and the logo hidden (see Figure 5).

Figure 5. Background Slice in Position

Conclusion

Now this isn't the most idea solution. It's better than manually cropping the image to get each piece though. Plus, once the initial build of the website template is complete, there probably won't be much need for creating the images again.

Bonus Tip: The X,Y coordinates for our slices will likely be more difficult to remember then the previous example. Very few slices will be positioned at 0,0. So it helps to store the coordinates somewhere. One option would be to create a new layer for each set of coordinates to remember. Each layer could have a name like "Background Slice: 0,0".