Action Settings for Exporting Slices

[Rob Edgcumbe]

Lightroom Version Number

Lightroom Classic Version 12.2.1

Operating System

1. Windows 11

When i am creating panos for Instagram, I use the slice tool and then Save for Web (Legacy) to export the slices. In the dialog box, I change the pixel count to make the squares exact multiples of 1080 pixels. I decided to create an action to speed the process up but, when I record the action, I change the pixel count to what I want but, the action records with whatever scaling factor I have used. Since the images being brought in have varying pixel dimensions, this is not what I want. I figured that Photoshop would record whatever I set (in this case pixel dimensions) but it seems to default to a different variable.

Does anyone have any suggestions as to how I can make it record the pixel dimensions rather than the scaling percentage or, is there a newer way in Photoshop to export the slices rather than using the old Save for Web dialog? Thanks.

 

[Conrad Chavez]

The problem with using Slices is that it’s tied to a feature from the earliest days of the web (the 1990s). The purpose of slices was to allow multiple click regions on an image. However, that is no longer a current practice; today that’s done much more simply using CSS overlays on a single image. The Slice feature is not really used any more in web design, so the code is really old. The good news is, you can still get what you want by tying into Photoshop features that support current web design workflows: Artboards and Export As. (Adobe intends Export As to eventually replace Save for Web (Legacy).)

Start by building a Photoshop template containing a blank document that’s as wide as the number of Instagram squares you’d like to have. My example is three squares across. In that template, in the Paths panel save three named square paths that mark how the panorama should be divided. Important: These need to be paths in the Paths panel, not shape layers in the Layers panel.

When you want to chop up a pano for Instagram, open that template, and import the panorama image. (I dragged and dropped from another application, but that’s just a Mac shortcut for File > Place Embedded. You can also use File > Place Linked.)

If needed, resize and reposition the panorama image to fit the squares the way you want. Mine perfectly fits right away only because I cropped the panorama to 3:1, and my template is also built to 3:1.

Duplicates the panorama image layer until you have as many layers as there are square paths. Renumber them to match the paths.

Select a layer/path pair. For example, I select the first square path and the first layer that goes with it. In the Paths panel, Command-click (Mac) or Ctrl-click (Windows) the Add Layer Mask button. Adding the modifier changes the button to Add Vector Mask. The path is applied to the layer as a vector mask, so that the part of the panorama outside the square is hidden. Repeat for all layer/path pairs across the pano.

Select the layer for the first square. Choose Layer > New > Artboards from Layers, name it the same as the path and layer, and click OK. What you get is an artboard clipped to the contents, which is defined by that vector mask. In other words, that square is now its own artboard. Repeat for the other layers. I also show that the command is on the context menu you get when you right-click the layer name.

When ready, choose File > Export > Export As. It should be set up to export each artboard as a separate image. Make sure Select All is enabled, check the export settings, and then click Export. You will get a separate square image for each artboard.

What I did not explore is how easily this could be automated with a Photoshop action or script, but probably at least some parts can be.

 

[Rob Edgcumbe]

Thanks for this suggestion. I shall give it a go. At first read, it sounds like a more complicated way of doing this than the legacy way but I shall give it a go and see if it is quicker than the current approach. I appreciate the kind effort involved with not only writing it out but also providing some illustrations of how it should look. That is much appreciated.

 

[Conrad Chavez]

Yeah, it does seem like there should be a simpler way to do it, and I realized the entire section about converting it to artboards is not actually necessary. I only did that to get to the Export As feature that can export artboards as separate files.

If you drop the part about converting layers into artboards, you can simply select all the square layers and choose File > Export > Layers to Files instead. But unlike Export As, Layers to Files doesn’t provide control over the output pixel dimensions, so the pixel dimensions will be determined by the squares themselves.

If you know you always want each square to be 1080 by 1080 px, and the template is already set up to be a row of squares 1080px tall, then when you drop a panorama of any size into that template, you can simply make sure it’s scaled and positioned the way you want within the template canvas, and the squares will always be 1080 by 1080 px each when exported.