GRWTH 日報 才華配對 走進社區
下載APP
STEM
一日一技 | 使用 ShareX 快速为截图套壳
管理員 2021-01-11

为截图添加窗口边框或手机框可以让截图更好地区别于网页背景,增强其表现力。以往的教程往往建议大家使用网页应用或独立的 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\""
打開APP閱讀全文