月会分享之-素材整合术（审查元素篇）

分享开始前说个题外话，

这个分享好几个月前就要写了，因为各方面原因一直没能完成，这几天相对来说需求没有那么赶，所以可以静下心来把这个分享做一下~

其实对身边的人来说，我确实是很懒，但是实际上我总是在优化开发流程，提高工作效率，在自我感觉完全没必要浪费时间地方，我会很选择性的跳过。

我最开始用审查元素的时候是用于黑科技（具体就不说了），在做设计的时候发现每次都要把参考保存成图片再来切图好麻烦，于是想到用审查元素翻翻看是否有素材。

 

有了想法之后就是执行过程，先是跟以前的前端和重构的朋友聊了一下，理解了重构是怎样切图，哪些图片需要切图，在哪个地方可以找到等等。

知道了重构的图片文件里面，一般是把hover和默认的按钮图切在一起，所以，在网站上看到一些好的按钮或者是背景，可以用这种方式保存下来，这就是反向思维，理解其他工种的工作也是可以便利我们的。

好了不说废话，下面来一个简单的案例：

http://act.niu.xunlei.com/2015/lt2xf/

这是迅雷牛X平台的的一个专题页，我发现这个按钮可以用于做banner，于是

 

 

这个就是这个按钮的链接，点击这个按钮之后的跳转到的地方，很明显这里没有按钮的素材，

于是往下看

 

在styles里面往下找，一般都在这里：

 

所以就是这个 右键

 

然后就出来了：

 

而且包括hover状态，然后右键

保存出来一般是png格式的，放进ps就可以使用了！

 

 

当然不是什么图都可以找到，所以还是要学会思考，重构会把你要的元素单独切出来吗，为什么会为什么不会，当你理解了，你就知道你要的素材到底能不能用这种方式拿出来了

 

 

另一个案例：http://wuxia.qq.com/act/a20141219sdmh/tqf/index.shtml

这是天涯明月刀的一个专题页，这里我要提取他的树叶，下面是步骤：

 

这个就是了：

 

保存出来就是这样的：

就可以直接用了~

好了，分享就到这里，第一次写分享，文笔不太好，也排的很乱，下一次将分享怎么提取flash的素材，尽请期待~