想用Workflow做「带壳截图」？可以,这很Workflow。

什么？我派的带壳截图还没有出 iOS 版？那让我怎么在朋友面前炫(zhuang)耀(bi)？那是因为你们不知道世界上有个 App 叫 Workflow，只要你的脑洞有多大这 App 就有多强大。下面就跟着我的思(jie)路(zou)去(yi)探(qi)寻(yao)吧(bai)。

(截图来自:Workflow Gallery)

故事的开始

这个其实你们都懂的，作为一个折(qiong)腾(bi)星人理所当然的会找遍所有做带壳截图的 App 来玩，嗯，然后我发现了只有 Lightscreen 和 Screenshoot Maker Pro 算是最近有更新，而且两款 App 我派都有过介绍。

最终生成带壳截图之后我发现了前者的质量不高，放大后就能看到外壳的锯齿而且没有阴影，而后者质量高是高，但是生成的截图的比例和屏幕不符合，不经过放大缩小是不能看到全图的，而且壳子两边和背景没有间距！！这个很难(zhuang)忍(bi)！！而且需要内购解锁一天一次的生成次数。来给你们看看：

(上：Lightscreen 下：Screenshoot Maker Pro)

于是就有了自己动手做Workflow这个想法！！

制作要求

我的中指宗旨是高质量和美观！所以

截图要保持屏幕的分辨率原汁原味套上壳
壳子和背景一定要有间距，初步确定剪裁的分辨率是屏幕分辨率的150%左右
可以根据屏幕实际宽度判断用户大致的机型
自动输入图片识别横竖并提示左右旋转机身

开始制作！

首先，最难的就是找素材和剪裁素材了，想自己折腾的朋友我推荐上 Pixeden 找素材(剪裁后建议保存为PNG格式)和一个可以精确到像素的屏幕尺 Jruler (我建议用文件夹里的JRulerPro-old，这个可以微移)，然而我还是找不到pinkpink的玫瑰金6sp，哭。

OK！素材都弄好之后就开始漫长的Workflow制作了。

我们先来大概思考一下Workflow的大概流程：

过滤过的图片(主要是照片和屏幕截图)/选中图片(分享动作)
                   |输
                   |入
              判断图片的横竖
                   |
      按照旋转要求记录左右转动的90/270度
                   |
              角度设置为变量X
                   |
      记录相反角度以实现最后机身的整体旋转
                   |
              角度设置为变量Y
                   |
        获取实际屏幕宽度以判断大概机型
                   |
   选择机型并把图片宽度压缩到与屏幕分辨率一样
                   |
              图片设置为变量Z
                   |
                获取素材
                   |输
                   |入   
         Overlay image动作 填上Z
                   |
              获取Y 整机旋转
                   |
                  分享

当然这只是大概的概括，实际还有更多细节地方