1. 李楠的主页首页
  2. Hexo 迁移

利用Workflow做带壳截屏

最近有小伙伴让我用Workflow帮他做个带壳截图,索性就直接把简单制作过程贴出来吧.大神勿喷。。。做带壳截屏主要用到了Workflow中的【Overlay Image】这个动作,它是Workflow在1.4.4版本里加入的一个新动作,它可以帮你把两张图片叠在一起。教程文尾我会放上现成的Workflow供大家下载,但是建议自己实际操作一遍,来深入了解下这个流程是怎样的,以加深对Workflow这个神器的理解。

开始

先简单来看下 【Overlay Image】 这个动作:

图1

它需要两个量,一个是Input,一个是动作里面的Image,如下图。它会把Input作为背景图片,然后把Image的图片覆盖上去。

【其他变量:】
Position: 是覆盖图片的默认位置;
Width: 和 Height 是覆盖图片的大小,不填写,表示默认不变;
otation: 表示旋转角度,你可以用它来完成横屏的带壳截图;
Opacity: 表示透明度。

至于如何用这个动作做带壳截图,其实最麻烦的在于素材制作。这步大家不要担心,我已经制作好了iPhone4S-iphone7Plus的外壳图片

图2

大家直接下载上传到自己的iCloud Drive中Workflow的根目录就可以了,文件路径如下图所示:

图3

图4

图5

/Workflow/iPhone 4S/xxx.jpg
/Workflow/iPhone 5/xxx.jpg
/Workflow/iPhone 5C/xxx.jpg
/Workflow/iPhone 5S/xxx.jpg
/Workflow/iPhone SE/xxx.jpg
/Workflow/iPhone 6/xxx.jpg
/Workflow/iPhone 6 Plus/xxx.jpg
/Workflow/iPhone 6S/xxx.jpg
/Workflow/iPhone 6S Plus/xxx.jpg
/Workflow/iPhone 7/xxx.jpg
/Workflow/iPhone 7 Plus/xxx.jpg
做完上边的工作,就已经完成了一大半了。
接下来就是加入控件,然后重复做四个机型就好了。

图6

注意:我在最后做了一个删除最后一张系统截图的动作,这个意思就是做完带壳截图后,先前的截图会被询问删除与否,自己根据自己实际情况操作!

机型做了如下几种:

图7

3.5寸机型:4、4S
4.0寸机型:5、5C、5S、SE
4.7寸机型:6、6S、7、7S
5.5寸机型:6P、6SP、7P、7SP
颜色做了如下几种:
iPhone4、iPhone4S:黑色、白色
iPhone5:黑色、银色
iPhone5C:白色、绿色、蓝色、黄色、红色
iPhone5S:星空灰、银色、金色
iPhone SE:玫瑰金、星空灰、银色、金色
iPhone6:星空灰、银色、金色
iPhone6 Plus:星空灰、银色、金色
iPhone7:玫瑰金、哑光黑、亮黑、银色、金色
iPhone7 Plus:玫瑰金、哑光黑、亮黑、银色、金色

iPhone 7截图后做出的效果图如下:

图8
图9

有朋友反应iPhone 5、iPhone 5SiPhone SE、iPhone 6 Plus、iPhone 6S Plus、iPhone 7 Plus机型截图覆盖时有偏差,就更新了下设置参数,请iPhone 5、iPhone 5S和iPhone SE、iPhone 6 Plus、iPhone 6S Plus、iPhone 7 Plus用户按照下边参数设置即可。

如下图所示,先将【Overlay Image】 动作下的Position改为【Custom】,然后再根据机型颜色设置下X Coordinate和Y Coordinate参数即可。

iPhone 5机型改为:X Coordinate:2 Y Coordinate:-5

图10

修改参数后iPhone 5截图效果如下图:

图11

iPhone 5S和iPhone SE黑色、金色、银色机型改为:X Coordinate:65 Y Coordinate:237

图12

iPhone SE玫瑰金改为:X Coordinate:62 Y Coordinate:237

图13

iPhone 6 Plus、iPhone 6S Plus、iPhone 7 Plus机型改为:X Coordinate:95.5 Y Coordinate:326.8

图14

注意事项

1.由于我做的是全机型全颜色设置,截图速度较单机型单颜色慢了一点。如果不能忍受的,自己根据自己的机型删掉里边多余的动作。

2.因为外壳存储路径是iCloud Drive,所以首次截图时下载图片需要点时间,有点点慢,具体情况和各位手机网速有关,第二次截图就会很快了。

3.应部分朋友请求,我也做了单机型单颜色版,根据自己实际情况下载。

资源下载

1.机壳文件百度云资源链接:
机壳文件百度云资源 [密码:8yrf]

2.全机型版Workflow带壳截屏链接:
全机型版Workflow带壳截屏

3.单机型版Workflow带壳截屏链接:
单机型版Workflow带壳截屏

本文作者:Drixn

本文链接:https://www.drixn.com/60.html

版权申明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:admin@drixn.com

工作时间:09:30-18:30

QR code