猪小花1号

个人签名

281篇博客

最新博客

最新资源下载

编辑推荐

网易数帆开源API网关与容器云项目，让云原生生产落地“多快好网易汪源：统一负载与多云环境的“开放姿态”，才是云原生网易数帆如何用 Kubernetes“原语”搞定云原生中间件快手打新挤爆券商系统，网易数帆推出券商稳定性保障方案探索智慧校园新模式，网易有数在教育行业的实践分享金融行业大数据治理之路——数据模型篇

［收集＃01］批量提取WEB图片素材

猪小花1号2018-09-11 13:50
作者：马宝

作为设计师面对红尘滚滚扑面而来的海量信息，兴奋激动、焦虑迷茫；看了就忘是大多数人的通病，做到很好过滤信息的高手寥寥无几，更别谈如何高效收集、整理、再利用丰富资源的淘金术；是朽木土渣还是宝石金矿全看个人修为了。

设计师面对的资料种类繁多，就视觉素材资料而言归结只有两种：图和字； （解释下还有一类素材是视频，视频动效无非是多张图片的复合集成）

本期想和大家聊聊素材中的“图”，作为视觉设计师如何收集图片呢？个人为例抛个砖；有人会提：不就是保存图片么，太简单不过了，见一张存一张呗；

但我想说的是不在同一量级上的问题，如果你要收藏保存的图片数以千计，如果你想找到1个星期前的某个网页中看到的某一张图苦恼找不到啦，如果你还不知道如何用“网络检查器”background-image；那么往下看

前言：获取图片的渠道


日常获得素材的终端主要是电脑和手机，浏览网页、app、截屏、提取而是我获得图片素材的主要途径； app和截屏都非常简单，不一一扩展，主要针对如何批量提取网页图片做一下分析,我的方法如下


一、方法，第1步 浏览网页（广撒网）


  • 时常浏览大概50几个国外的索引收集类网站，它们的关键词 是颁奖（design awards）较知名的有：


http://www.awwwards.com
http://www.cssdesignawards.com
http://www.thefwa.com
http://www.cssawds.com
http://www.designmadeingermany.de/sites-we-like/

这类网站对提交网页都是有着相类似的评判标准 (40% Design 30% UX/UI 20% Creativity 10% Content)；很好的聚合精选设计网站，对网页设计非常有帮助；


  • 每次打开链接是，我有一个强迫症，必须要按住 ctrl（cmd）键点链接新建标签页打开，只是一种对当前页资源的自我保护，较美的资源转瞬即逝，谁也不想去翻历史纪录找一个记忆中似曾相识的“美好”；

  • 一股脑儿打开百八十个网站，看着load 不停的刷，每页浏览不会超过 10秒，迅速浏览果断关闭保留，好坏设计就是感觉，第一眼对了保留，不对立马叉掉；几轮下来都是精选中精选网页，请珍藏书签吧，做好标签分类，打开网页资源参看神器“网络检查器”，资源 > 图像

  • 充满一颗好奇心，所有页面交互都玩一下，不断探索新资源


那么问题来啦：


  1. 网页开的太多，图片没来得及保存怎么办？
  2. 网页关掉了，找不到历史纪录，看不到图片怎么办？
  3. 网页JS限制，不然保存怎么办？
  4. flash 网站图片链接机制不同，读不到图片怎么办？（WK，谁还看flash网站）


当～当当～当，隆重介绍 本土自主研制的大规模杀伤性武力APP，我不生产水，我只是大自然的搬运工之 web2img.app

实现原理很简单，通过访问 网页缓存文件>批量重命名（加扩展 .png）>复制到本地目录>过滤非图片或过小的缓存文件>保存图片


利用自动化工具 automator ，制作app，双击打开运行，复制保存秒钟实现，唯一不足的地方，需要人工去重，人肉识别非图片文件，效率提升不只那么一点点，app 持续改进中，会applescript 的同学愿意帮助，请踊跃联系


三、方法，第2步 web2img 自动提取


web2img.app of mac 下载 web2img.app.zip


解释一下工作原理


1.为什么要在网页缓存文件找图片


任何网站为了加速浏览网页，都会把资源存放到 一个叫cache 的文件夹中，方便下次可以迅速打开网页，换句话说我们看过的几乎所有的HTML 网站资源都会缓存，缓存文件夹就是我们要淘金的宝库，开挖


/Users/mabao/Library/Caches/com.apple.Safari/fsCachedData
/Users/mabao/Library/Caches/Google/Chrome/Default/Cache

2.从缓冲中提取文件虽然非常容易，但是缓存文件都是无扩展名的预览图不可见，我们不能肉眼轻松识别图片，所以我们要批量给这些文件加上扩展名PNG，好在任何图片文件加上PNG，都可以看预览缩略图，不信你试一下GIF 换成PNG 也能动，那些加了PNG 还是没缩略图的文件 可能是一些JS、CSS等文本文件，一并删除之

3.文件大小过滤，条件很简单 小于20K的图片，要么不高清，要么图片尺寸过小，删除之

三、方法，第3步 图片管理软件

比较常用的图片管理软件APP ember、inboard、Picasa 存图

四、小结 自动提取的不足

1.自动提取不是万能的，看什么网站存什么图，通过缓冲提取图片，如果你浏览的高端大气上档次国际化潮流精品网站，那么你的资源图片也是棒棒的，如果你看得是杂七杂八狗屁倒灶乌漆麻黑网站，那么图片质量当然不会高到那里去

2.建议使用web2img 前先清除缓存，尽量保证缓存文件夹的纯粹性；设想一下，你的缓存中基本上都是drbbble.com 或者 behance.net 高质图片，你有多开心，如果你打开了百度图片搜了些杂七杂八的素材，你会疯掉；自动提取需慎重

3.给我的APP 画个logo吧，再把auto 机器人图标换掉，小实验

4.补充一张app 截图，毫无违和感  

利用alfred 加上快捷键操作方便自动调取app ctrl＋shift ＋ 方向下


本文来自网易实践者社区，经作者马宝授权发布 

推荐博客