很多工程师在设计网站的时候要讲图先做出来,今天小编给大家带来1px插件,1px是一款运用在谷歌浏览器中的插件。1px插件可以帮助用户把设计图与实际效果对比、分析,有利于用户做出更好的设计图！
1px 插件介绍
1px是一款可以帮助用户观察设计图与网页最终效果的偏差的谷歌浏览器插件,用户在Chrome中安装了1px插件以后,就可以在使用1px插件打开网页的最终效果页面以后,点击添加设计图,并把设计图插入到当前的网页中与网页效果进行对比。用户可以通过鼠标点击1px添加到网页中的半透明地的设计图,与网页的原图进行重合对比,进而观察出网页的设计是否合理。
1px 使用方法
1.第一步大家应该都知道要在本站下载谷歌插件(同时需要一款最新谷歌浏览器),解压,得到crx格式的文件。
2.接着大家需要打开谷歌浏览器,找到右上角的按钮,在下拉框中选择"设置"选项,然后点击设置来启动Chrome浏览器的设置页面。如下图：
3.进入设置界面,找到并点击"扩展程序"。如下图：
4.在打开的谷歌浏览器的扩展管理器中用户可以看到一些已经安装程序的Chrome插件,或者一个Chrome插件也没有。如下图：
5.我们回到软件包中,将1px拖到谷歌浏览器中的"扩展程序"界面中,这时候用户会发现在扩展管理器的中央部分中会多出一个"拖动以安装"的插件按钮。我们就将1px拖动到这个位置,1px插件的安装。如下图：
6.松开鼠标就可以把当前正在拖动的插件安装到谷歌浏览器中去,但是谷歌考虑用户的安全隐私,在用户松开鼠标后还会给予用户一个确认安装的提示。只需要点击"添加"按钮就可以把该Chrome插件安装到谷歌浏览器中去。如下图：
7.安装好1px以后,右上角会有1px图标。如下图：
8.当然安装了Chrome 插件,也有不需要这款插件的时候,那么不需要Chrome插件的时候,大家就可以删除它,卸载Chrome插件的方法非常简单,具体操作如下图所示：
1px 插件背景
网页的前端设计师在设计网站的时候,通常是先把网页的美工图做出来,然后对美工设计图进去切片,再使用DW等网页设计工具设计出网页的最终显示效果,但是使用HTML来表现设计图的最终效果的时候,总会时不时地产生一些设计偏差,当这个偏差的像素非常小的时候,使用肉眼观察可能无法进行准确地发现,而如果我们把图片直接缩小拖动到Chrome中进行对比的时候,又会由于图片的播放器的边框而无法准确地查看,而这项工作使用Chrome插件来完成就再合适不过了,下面就介绍一款可以帮助设计师对于设计图和网页最终显示效果的谷歌浏览器插件。
1px 功能介绍
1.用户在鼠标悬浮在预览图上面的设计图上的时候,就会出现插入和删除的按钮,如果点击插入按钮,就可以把当前的设计图添加到网页中。
2.Chrome打开需要观察的效果图网页,再点击Chrome右上角的1px按钮,在1px插件弹出的窗口中点击添加按钮,并选择本地计算机中的图片添加到预览图中.
3.用户添加设计图到当前网页的时候,会以半透明的方式显示到当前网页中的,用户可以通过使用鼠标拖动该设计图与网页的最终效果相比较（由于该设计图没有边框,还是半透明的状态,所以很容易看出设计图与最终效果的差别）。
4.因为Chrome的安全策略,用户只能对网络URL（或者本地IIS等服务器产生的URL）进行与设计图对比,对比本地计算机中的HTML文件无法进行比较。
1px 更新日志
1.可以同时添加多个设计图到预览界面。
2.增加用户在刷新网页的时候,设计图背景不消失的功能。
3.增加设计图的透明度调节功能。
4.增加图片位置微调的功能。
5.优化了图片的选取。
6.增加国际化支持并优化消息提醒。
7.增加选项按钮,并对老版本Chrome进行支持。
小编点评
1px是一款可以帮助网页前端工程师对于设计图与网页实际效果的偏差的谷歌浏览器插件,是工程师必备的插件！