PerfectPixel 插件,网页中加载设计图,精准校验网页像素

使用PerfectPixel插件 ,可以将设计图加载至网页中,与已成型的网页进行重叠对比,以帮助开发和设计人员规范网页像素精度。是一款可以优化前端页面显示的Chrome插件。

使用PerfectPixel插件 ,可以将设计图加载至网页中,与已成型的网页进行重叠对比,以帮助开发和设计人员规范网页像素精度。是一款可以优化前端页面显示的Chrome插件。


PerfectPixel by WellDoneCode (pixel perfect)
开发者工具插件2021-12-214.4
This extension helps develop your websites with pixel perfect accuracy!
直达下载


插件背景


在网页的开发流程中,多数是由产品原型图到设计图,再到技术人员的开发。设计稿的这个环节可以认为是网页的图片版,通过开发人员编写成完整的网站,但最后呈现出来的效果往往和设计图有一定偏差,那怎么确定这个微小的差值呢?这种情况可以借助PerfectPixel这款Chrome插件。


插件功能


PerfectPixel插件会将设计图上传至网页中,并在HTML顶部放置一个半透明的图像叠加层,让当前页面可以和设计稿进行精确对比,帮助前端人员精度开发网站。PerfectPixel插件对图片的大小没有限制,并且支持上传任意数量的图片。


插件使用


首先,通过当前页面下载PerfectPixel离线安装包,打开扩展程序内的开发者模式,将解压后的crx文件拖拽至扩展程序管理,选择添加扩展,即可安装成功。


在浏览器插件栏中打开PerfectPixel,通过上传或者拖拽图片的方式上传需要对比的图片,如图所示。




通过ORIGIN可以更改图片的位置,以调整网页的像素差值;通过OPACITY可以调整图片的透明度。




你可以同时添加多张图片,并支持对图片进行反转色处理。




当你需要还原页面时,单击插件栏中的PerfectPixel图标,所有覆盖效果都会被隐藏。


PerfectPixel by WellDoneCode (pixel perfect)
开发者工具插件2021-12-214.4
This extension helps develop your websites with pixel perfect accuracy!
直达下载
本站文章均为原创,版权归本站所有,如需转载或引用请注明出处如:“本文章转载自:

PerfectPixel 插件,网页中加载设计图,精准校验网页像素 - Extfans”

相关标签

上一篇:最新AI生成/AI聊天工具上线:AI旋风智能助手

下一篇:豆瓣plus插件告诉你,这部电影能看吗?