猪小花1号

个人签名

282篇博客

[收集#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 + 方向下


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