为截图添加窗口边框或手机框可以让截图更好地区别于网页背景,增强其表现力。以往的教程往往建议大家使用网页应用或独立的 App 来实现截图套壳,但如果你使用 ShareX 的话,利用其自带的「图像效果」功能,稍加配置,就能把套壳融入到截图的工作流。
一、添加浏览器窗口边框
截取网页时,将浏览器的菜单、地址栏等一同截取进来可以更好地说明「此截图来自浏览器」。但为了隐藏书签栏、头像等私人信息,同时也为了适应各种截图的尺寸,后期添加的方式更为合理。期望的效果如下图所示:
要在 ShareX 上实现这一效果,首先需要浏览器边框的原图,可以直接利用截图获得,注意格式最好是 PNG,以保留透明度。
然后,使用修图工具删除一些不必要的元素,并且将其截成两部分,分别保存为包含左半部分主要元素的chrome1.png
和包含窗口操作要素的chrome2.png
。这么做的原因稍后解释。
安装运行 ShareX 后,从主程序界面进入动作设置
- 效果
- 图像效果配置
,来到配置界面,新建一个名为Chrome
的效果。
在Chrome
的效果
栏中,依次添加下面六个步骤,没有说明参数表示不需要修改,窗口右侧有实时效果的预览:
- Resize - Width:400;Mode:ResizeIfSmaller。当图像宽度小于 400px 时,放大。处理图片过小的情况;
- Canvans - Margin:0, 82, 0, 0。在上方绘制 82px 的透明区域,用于放置浏览器框,
82
是使用的chrome.png
的高度,自行修改; - Image - ImageLocation:选择
chrome1.png
的位置;Placement:Top Left。在左上添加chrome1.png
图片; - Image - ImageLocation:选择
chrome2.png
的位置;Placement:Top Right。做右上添加chrome2.png
。由于第三、第四步的图片是从一张图中截取的,第四步在第三部后,chrome2
会覆盖掉chrome1
的一小部分,他们会完美拼出一个浏览器边框,适应各种宽度的图片; - Border - Size:2;
- Shadow - Size:20;这两步添加边框和阴影,增强一体感和美观度。
类似的,我们也能制作一个 Windows 窗口风格的效果,给截图添加 Windows 窗口边框。
二、添加手机模型框
另一个比较普遍的需求是给手机截图配上手机模型,ShareX 也能完成。
首先仍然是寻找一个透明的手机模型图。FaceBook 提供了一些质量较高的真机模型图,自行抠图或绘制也可以。总之,需要有一个只有边框,其他部分都是透明的phone.png
图,并且量出其可以覆盖的高宽。
新建效果phone
,在效果面板中添加三个步骤:
- Resize - Width:填写刚刚测出来的宽度;Height:填写测量高度;
- Canvas - Margin:75,75,75,75;Color:随意。为手机模型绘制空间,颜色如果不确定可以保持默认不变;
- Image - ImageLocation:
phone.png
的位置;Placement:Middle center;
上面的数据适用于大部分手机模型图,如果要使用电脑模型,可以调整Image
中的Offset
参数。
三、融入工作流
第一章讲述的方法使用于给图片增加敞开式的边框,第二章举的例子适用于封闭式边框的添加。有了配置好的图像效果,下面着手将套壳融入截图流程。
如果需要截图后立刻添加效果,可以在主程序的截图后的动作
中勾选添加图片特效/水印
,并提前选择好特效类型。也可以不勾选此项,将添加特效放在快速菜单中。
另外一些情况,我们需要给已经截好的图添加特效,虽然用户能在 ShareX 托盘图片上右键选择工具
- 图像效果...
,但那太过于麻烦。我们考虑将添加特效
加入图像文件的右键菜单。ShareX 提供了命令行调用的方法,添加图像效果的方式是ShareX.exe -ImageEffects [filepaath]
。具体的添加原理和方式可以参见 巧用注册表和命令行,把鼠标右键打造成你的专属工具箱 一文。也可以将下面的代码保存为一个reg
文件,双击添加。使用此方法请保证 ShareX 安装在默认位置。
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\SystemFileAssociations\image\shell\Item]
"MUIVerb"="添加效果"
[HKEY_CLASSES_ROOT\SystemFileAssociations\image\shell\Item\command]
@="\"C:\\Program Files\\ShareX\\ShareX.exe\" -ImageEffects \"%1\""