> ## 文章索引 > 在这里获取全部文章的索引：https://lrd.im/blog/llms.txt > 这是 lrd.im 的个人博客，记录设计、技术与思考。 # 互联网设计师白嫖图片和字体的旁门左道 ![封面图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/01.png "Photo by Med Badr Chemmaoui on Unsplash") 转眼间在互联网行业从事设计工作已经两年多了，工作中发现了几个可以白嫖高清图片、App 图标、收费字体的小技巧，在这里做一番记录，也希望能对正在看文章的你有所帮助。 ## 一、下载网站上未经压缩的高清原图 各类设计网站（如站酷、UI中国、花瓣等）为了节省图片带宽以及提供更快的加载速度，会将用户上传的图片压缩再展示。 此时我们通过浏览器插件、另存为图片等常规方式保存图片，下载到本地的往往是经过压缩的图片。如下图： ![对比图展示两种图片保存方式的差异：左侧为使用插件或另存为保存的图片，显示 "拖放图片到这里" 的 Eagle 导入界面；右侧为下载到本地的图片，包含 900×1383 和 1800×2766 两种分辨率，均为网站压缩版本而非原图。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/02.png) 上图中可以看到我保存了2种尺寸的图片，900宽的是未登录情况下保存下来的，而1800宽是登录后保存下来的。这两张图片都是经过网站压缩的图片，并非用户上传的原图。 而想要在站酷、UI中国、花瓣等网站下载到未经压缩的高清原图，我们需要用到 Chrome 浏览器的开发者工具。 拿 UI中国上的一个作品来举例子。在网页中点击右键 — 检查，打开开发者工具。点选左上角的“选取元素”或用快捷键 Cmd⌘+Shift ⇧+C，将鼠标移到目标图片后点击，旁边的开发者工具窗口会显示出对应的图片链接，我们在链接上点击右键 — Open in new tab。如下图： ![Chrome 开发者工具使用示意图：左侧用快捷键⌘+⇧+C 开启 "选取元素" 工具并点选目标图片，右侧在元素面板中右键点击图片链接，选择 "Open in new tab" 在新标签页中打开原图链接。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/03.png) 这时浏览器会在新的标签页中打开图片链接，我们要做的就是把链接里.jpg后面的后缀删掉（如下图）。用新的链接来打开图片，我们就可以得到一张未经平台压缩的图片。 ![对比示意图：删除图片链接中 ".jpg" 后面的压缩参数后，图片从 1800×3141 像素提升至 2500×4363 像素的未压缩原图，上方为压缩链接，下方为清理后缀的原图链接。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/04.png) 可以对比下两张图片的尺寸，压缩过的图片尺寸 1800×3141，大小 850KB，而未经压缩的原图尺寸 2500×4363，大小 2.9MB。而且未经压缩的原图可以看得到更多细节。边缘更清晰，透明度信息损失较少。 ![两张图片文件信息对比：压缩后.jpg 尺寸 1800×3141、大小 850KB；未压缩.jpg 尺寸 2500×4363、大小 2.9MB，原图分辨率更高、文件体积约为压缩版的 3.4 倍。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/05.png) ![压缩图与原图的对比展示：左侧压缩图（1800×3141，850KB）细节模糊，边缘锯齿明显；右侧原图（2500×4363，2.9MB）细节清晰，文字边缘锐利，色彩层次更丰富。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/06.png) 同时也整理了站酷和花瓣网的清理链接后缀规则（如下图）。这种后缀通常是跟在@、!、_后面，只要删掉压缩规则，我们就能下载到更清晰的原图。 ![站酷和花瓣网的图片链接去除压缩后缀示意图：站酷将链接中 @1280w_1l_2o_100sh.png 删除，花瓣将 _fw658/format/webp 删除，即可获取未压缩原图链接。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/07.png) > 这里顺便分享一个可以免费将图片无损放大的工具：Bigjpg ，亲测效果还不错喔！ ## 二、下载最清晰的 iOS App 图标（含旧版图标） 工作中有些场景需要用到其他 App 的 Logo，比如在临近节日时时需要对比同类型产品的图标设计，或者品一下某 App 历史版本的图标，我们可以通过下面的方法来下载到最清晰的 iOS App 图标。 假设我现在要欣赏一下今年京东 618 期间的高清 App 图标，先打开[七麦数据](https://www.qimai.cn/)官网，搜索京东。 进入京东 App 的介绍页面后选择左侧的“版本记录”，然后在页面中找到对应版本的 App 图标，右键点击“在新标签页中打开”。 ![七麦数据网站中京东 App 版本记录页面的截图，右键点击 App 图标后弹出浏览器上下文菜单，光标悬停在 "在新标签页中打开图片" 选项上，演示如何获取原始图标链接。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/08.png) 在新标签页里的链接最后是“…/180x180bb.png”，我们可以大胆猜测这就是图片的尺寸，所以将它改成“…/1024x1024bb.png”，按回车后就可以得到一张1024×1024尺寸，最高清的 iOS App 图标图片。 ![浏览器地址栏对比示意图：将链接末尾的 "180x180bb.png" 改为 "1024x1024bb.png"，即可获取最高清的 1024×1024 像素 iOS App 图标原图](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/09.png) ![浏览器中打开的京东 618 周年庆 App 图标，URL 末尾已修改为 1024x1024bb.png，页面显示一张 1024×1024 像素的高清图标：红色背景上印有 "17th/618" 字样与京东 Joy 白色小狗吉祥物。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/10.png) > 要注意上面我们输入的尺寸，我们即是输入了比1024×1024更大的尺寸，图片也不会超过这个上限，因为在上传到 App Store 时，我们提交的最大尺寸就是 1024×1024。 > 我们也可以通过 App Store 的页面里通过本文第一章节所描述的方法下载到最新的 App 图标，但是在里面无法下载旧版本的 App 图标。 ## 三、白嫖需要会员 / 收费 / 注册才能下载的字体 现在网络上很多好看的字体都要收费/注册会员才能下载商用，有时候我们只想用几个字来做 PPT 的封面，或者飞机稿上使用一两句英文等等，这种情况下购买字体或开通会员就不太划算了！。 下面分享一个我在工作中发现的小技巧，让你可以免费下载到需要会员/收费/注册才能下载的字体。 几乎所有字体网站都允许你在下载前试用一下字体，所以我们要先进入目标字体的预览页面。右键 — 检查，打开开发者工具后在最上面一行选择 “Network”，下面的筛选器选择“Font” ![字由网字体预览页面的操作截图：右键菜单选择「检查」（步骤 1），在开发者工具中依次点击「Network」标签（步骤 2）和「Font」筛选器（步骤 3），即可捕获字体文件的网络请求。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/11.png) 然后将你要用到的字粘贴进文本框，这时开发者工具会显示一个字体文件，我们点击右键 — Open in new tab，将该字体文件下载到电脑，然后安装就可以使用了！ ![汉仪碑刻黑字体预览页面的浏览器开发者工具截图，Network 面板的 Font 筛选器下出现了一个 .ttf 字体文件，右键菜单中「Open in new tab」选项高亮，点击即可将字体文件在新标签页打开并下载。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/12.png "点击 Open in new tab 后，可以直接下载该字体文件") ![Motion 软件字体选择界面截图：左侧画布展示已安装的「正一湿水榄核」字体效果，右侧字体下拉列表中高亮选中 HYBeiKeHei-ALiAI，演示从设计软件中识别并定位字体文件的操作步骤。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/13.png "可以下载产生预览的字体到本地使用") > 要注意到我们下载的字体文件里只包含你在浏览器内输入并产生预览的文字，所以我们可以用这个方法轻度白嫖喔！当然你也可以粘贴四千字的《中华字经》，或者英文的26个字母，以及数字、标点符号等。 ![Sketch 软件截图：将通过开发者工具提取的 HYBeiKeHei-ALiAI 字体文件安装到系统后，成功在设计软件中调用该字体。但是部分字体没有修改成功，原因是下载的字体文件里不包含这些缺失的字体。](https://lrdim.oss-cn-shenzhen.aliyuncs.com/blogimg/2020-08-02-28c915945cd3/14.png "没有产生预览的文字，不会被下载下来") 以上就是我最近在工作中整理下来的三个“旁门左道”，可以协助你下载到**不被平台压缩的原图**、**最高清的 App 图标**以及**被限制下载的字体文件**。诸位如果有其他更好、更便捷的方法不妨也分享出来。 最后这些技巧用归用，不能商用的千万不要抱有侥幸心理喔！有条件的话请多多支持正版！