12-1 图片操作：单张纵向带壳截图

对于写测评或者需要给别人展示整体手机界面的人来说，上图这样的带壳截图可以让原本裸露的截图显得更完整和高级。不过一直以来想做到这一点，要么要使用一些付费应用，要么要在电脑上使用 PS 等工具来手动调整。

实际上免费的捷径完全可以胜任这个需求，不仅如此，如果你学会了这节文章的内容，理会了其原理，那么你可以做出满足各种为截图套壳需求的捷径，远比 App Store 中的付费应用灵活。

套壳截图的步骤

和往常一样，我们在动手之前，思考一下套壳截图这个需求的步骤。

套壳截图的步骤其实异常简单：

1. 选择截图
2. 选择壳的素材
3. 把截图放进壳里

但我们已经知道，脑子里的步骤转化成捷径里的操作，复杂度就会骤然提高。带壳截图这三步，在捷径中的实现，需要用到一些我们此前完全没用到过的操作和思路。

接下来我们以 iPhone X（XS） 为例，分步来看如何给 iPhone 套上截图。

第一步：用捷径获取截图

手机中的照片图片很多，如何从其中仅获取截图是我们第一个要解决的问题。

在第一周的教程旅行照拼长图的部分，我们已经接触到了「查找照片的条件」这个操作，如果你查看过它的每一个条件，就会知道其中有一项是「是屏幕快照」。它可以帮我们把设备中的截图过滤出来。考虑到有些人可能有多个设备，而「是屏幕快照」这个功能是部分设备的，只要是截图它都会接受，这样是不行的。我们现在只想要iPhone X（XS）的截图，所以要进一步地在「查找照片的条件」中设置图片的宽度和高度：

像这样，在「查找照片的条件」里，先选择「是屏幕快照」、再选择「宽度是 1125」、再选择「高度是 2436」，就能够确保找到的图片一定是我们示例捷径需要的 iPhone X（XS）截图了。

接下来我们要选择需要套壳的图片，所以要在下面接上一个「从列表中选取」。最后我们为获取到的截图「设定变量」。

通过这几个操作，我们轻松解决了第一个问题：用捷径获取截图。

接下来我们来看第二个问题，壳的问题。

第二步：解决壳的问题

在这里，我们想要一个中间镂空的 iPhone 手机壳，像这样：

下载地址：iPhone X（XS）壳

然后我们需要想一下，我们怎么样处理这个壳，才能让我们在需要的时候就能调用它。一般来说有两种办法：

1. 存到 iCloud Drive 中，使用的时候用「获取文件」这个操作来调用它。
2. 存到相册中，使用的时候用「选择照片」来调用它。

这两种方法都很不好，因为都需要在本地存一张这样以备不时之需的图片。特别是相册，我们每次要使用这个壳的时候还要把它选出来，多增加了一个不必要的步骤。

最好的办法就是把这张图存到这个捷径里，只有在运行捷径的时候才会使用到它。而要做到这样就要使用到一项新的操作「Base64 编码」：

它可以将文本、图片等各种文件，转化为一组很长的，由数字和字母组成的文本。比如我们通过捷径获取刚才下载后的 iPhone X（XS）壳图，然后使用 Base64 编码操作，就会得到右图这样一串文本：

「换行」通常选择「无」即可，另外两个选项一般用于不能支持太长链接的老网站。

而每次我们需要使用到这些图片或者文件的时候，只要再运行这个「Base 64 编码」操作的解码模式，就可以把文本还原为原来的图片或文件（所以前面的那个 iPhone X（XS） 的壳图你其实不用下载，最下面的动作下载里已经有了这个被编码过的壳）：

所以在处理壳的这一步，我们需要先用一个「文本」操作放下被编码后的壳的文件，接着再接一步「Base 64 编码」，模式选择为「解码」，就做到了我们把壳的图片存在了捷径里。随后我们要为这个壳加上一个变量，因为我们之后还会用到它。

那么接下来，就是如何把两者拼在一起了。

第三步：将截图与壳拼在一起

截图和壳，我们都解决了。现在要解决的是如何将两者合并在一起。这时候，我们上周最后一篇文章《11 图片操作：批量打水印》中介绍过的「叠放图像」就要发挥它的重要作用。在介绍「叠放图像」时，我们说过：

「叠放图像」的行为实际上是：把上一步的结果获取的图片作为「底图」，把变量中的图片作为「水印」组合在一起。

换句话说，就是上一步结果的那一张图片为「底」，在下。而「叠放图像」中「图像」后的变量中选择的图片在上。

所以我们要考虑好，应该以截图为底，还是应该以壳为底？要回答这个问题要对「叠放图像」有更进一步的理解。

叠放图像的底图，也就是下面那张图，决定了合并后的最终图片的尺寸。比如说有两张图：图 A 的像素是 100x100，图 B 的像素是 200x200。这时候你用 A 做底在下，让 B 在上，那么最终合成的图像的像素会是 100x100，B 只会显示一部分，而不会显示全部。

我们再想一下我们现在要处理的情况——把截图和壳合并。

截图和壳谁更大？当然是壳更大，壳要套住截图嘛。所以我们这里只能让壳为底，在下，把截图放在上面。而且要让截图的位置居中。

但是我们看上图的右边，那就是以壳为底造成的结果，截图会漏出四个角。平常我们看 iPhone X 的四周虽然是圆角，但截图实际是直角的，只是 iPhone 的壳把四个角挡住了。现在我们把截图直接叠到了壳上，自然四个角就会漏出来。

那么这个问题怎么解决？答案是，再往上套一层壳的图就行了：

再接一个「叠放图像」，变量中还是壳的图片，就能够保证最终的图像是一张完美的带壳截图。这就是汉堡式叠图：底部是一张壳图，中间是屏幕截图，顶部还是壳图。

完整操作与效果展示：

捷径下载：套壳截图（iPhone X（XS）纵向单张）

遗留问题

目前我们已经掌握了带壳截图关键步骤，但是我们目前做的事却非常单一——只能处理 1 张纵向的截图。

但是关于带壳截图我们还有很多要求，比如：

1. 批量处理多张截图
2. 能处理纵向截图也能处理横向截图
3. 能将多张截图横向拼在一起
4. 能同时处理多张不同设备的截图

如何完成这些需求，其实在我们过去的教程里已经基本上覆盖到了。我们将在下一节为大家做一个完整的示范。