新的设计工具和网页插件分享

很多的网页设计师都是身兼界面设计以及前端代码的职责，工作实在繁忙，所以我们经常使用一些辅助工具来加快完成自己的项目。今天整理了8个新的设计工具和插件给网页设计师们，希望大家喜欢。

本文中的设计工具或jQuery插件可能现在用不上，但是你可以先mark到微博上or收藏到书签，方便日后使用！

这是一个有点类似视差滑动特效的插件，当你页面滑动指区域，然后会加载对应动画。就是一边下拉滚动一边有动画跟着播放一样，具体看DEMO吧！

<a href="http://farisl.com/wp-content/uploads/2014/06/073116GdR.jpg" target="_blank"></a>

<a href="http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-scrollme.html" target="_blank">在线演示及下载</a>

一个photoshop扩展工具，主要用来预览和检查，很多小功能，比如点击某图层就能直接预览对应CSS代码样式、字体、颜色、SVG等等，具体没有测试过，因为目前是内测中，大家可以输入自己的邮箱去获取。

<a href="http://farisl.com/wp-content/uploads/2014/06/073116BwD.jpg" target="_blank"></a>

<a href="http://avocode.com/" target="_blank">进入Avocode网站</a>

一个运动在node.js上的测试框架。

<a href="http://farisl.com/wp-content/uploads/2014/06/073116hig.jpg" target="_blank"></a>

<a href="http://visionmedia.github.io/mocha/" target="_blank">进入mocha网站</a>

一个自适应网站菜单，如果做兼容手机设备的网站，可以试用这个插件，只有1KB大小而已。

菜单是点击从上方展示出来，

<a href="http://farisl.com/wp-content/uploads/2014/06/073116kQW.jpg" target="_blank"></a>

<a href="http://responsive-nav.com/" target="_blank">查看演示及下载</a>

直接把一个或多个PSD文件直接输.jpg格式，使用方法很简单，直接将PSD拖入PSDt.jpg.APP里面即可。

<a href="http://farisl.com/wp-content/uploads/2014/06/073116bIy.jpg" target="_blank"></a>

<a href="https://dribbble.com/shots/1582290-PSD-to.jpg-Automator-Action" target="_blank">进入下载页</a>

kreate.js插件可以快速生成DOM，适用于测试使用。

<a href="http://farisl.com/wp-content/uploads/2014/06/073116yhI.jpg" target="_blank"></a>

<a href="http://itsjonq.github.io/kreate/" target="_blank">演示及下载</a>

当用户向下滚动页面时，页面头部将会自动隐藏。

<a href="http://farisl.com/wp-content/uploads/2014/06/073116Xc3.jpg" target="_blank"></a>

<a href="http://wicky.nillia.ms/headroom.js/" target="_blank">演示及下载</a>

Bootstrap官方的自定义工具不够强大或不好用？这个在线样式生成工具你一会喜欢上，以后做BS架构的网页都用它来定义样式吧，实现太方便了，支持实时预览，喜欢！

第一次加载有点慢，但加载完后就好了哦。

<a href="http://farisl.com/wp-content/uploads/2014/06/073116BbE.jpg" target="_blank"></a>

<a href="http://bootstrap-live-customizer.com/" target="_blank">查看网站</a>