About Slicing

As we know, Photoshop Elements has a lot of hidden talents. Turning images into interactive webpages is one of those.

As an example, let's consider this photo album mockup below. To begin with, just save the picture as JPEG file and open it in Photoshop Elements.

Broadly speaking, the conversion workflow will look like this:

1. Dividing the image with the Slice tool to functional pieces: the album header (slice #01), the navigation bar (slices #03-06), the current photo (slice #11), the previews (slices #09, 13, 15, 17), etc..

2. Assigning a URL (Internet address) for each navigation element. For instance, the slice #03 (Home) should be linked to the site's main page, while the slice #21 (Next) must lead to the next album page.

3. Optimizing the page, that is defining graphic formats and other setting. Every slice may be optimized individually. For example, the main photo (slice #11) may be saved as high quality JPEG, whereas the background slices (#7, 8, 10, etc.) may be exported as low quality GIFs. Such an approach allows to reduce the page total size and download time, respectively.

4. Exporting the document as HTML file and a set of images.

Eventually, you get a real webpage with working hyperlinks.

Previous Next