 |
 |
||||
 |
 |
 |
|
||
 |
 |
 |
|
||
 |
|
||||
 |
|
||||
The Slice Tool
With the Slice Tool in Photoshop, you can divide up your image into multiple pieces drawing boxes around areas that you want to slice. Then, when you export the slices as gifs, you can animate each of the saved files individually with their own timeline. That way, you can have many different animations going on at the same time. The images are pieced back together with HTML, so the downside is that you can't easily post the full picture as one animated gif on social sharing sites. However, it could be a really cool way to feature animated illustrations or comics on your site.
The Slice Tool is the one that looks sort of like an X-Acto blade. Maybe you've discovered it on your own already.
When you've sliced your image up the way you like, choose Export > Save For Web (Legacy) and use the controls to optimize each chunk how you want. You can change the file types too and have a mix of jpgs, pngs, and gifs all in the same export. You can hold Shift to select more than one slice at a time. When you're done, click Save and change the "Format" drop-down image (circled in red here) to "HTML and Images". This will save the puzzle pieces with an HTML file that acts as instructions on how to reassemble your art. If you open the HTML file with your web browser, it should show you the assembled image.
To the right are the contents of the folder that Photoshop made for me that contains all of the parts of Karina's "SYSCOSIS" image. Photoshop also saved an HTML file that uses tables formatting to assemble the art (see below).
Once you've got your sliced images stored somewhere, you can then re-open the chunks and add animation. For this image, I just added some animation to the TV, the floating chips, and some of the letters in the title. Here, you can see the timelines and frames for the simple gif animations. When you're done animating the slice, make sure to export it as an animated gif file and save it with the same name within the same folder. Then, just reload the HTML in your browser and the animation should start playing!
Two animated chunks
