Because i’m a web developer , i didn’t too notice pixel perfect from the design ( just like padding , size , margin etc) So often website which i have developed get protest from website designer / client because it’s not pixel perfect. So after some year and get more experience, Here are some tools which i use to make website which perfect pixel with website design :
- PixelSake : It’s a tool to measure 2 element in screen automatically using mouse , save object to png and color picker . So you can save hours than measure 2 element manually. You can see the video here :
- PerfectPixel Add Ons (It’s available in Chrome and Firefox). It will load your website design to your live website and you can do comparison if it has been pixel perfect lively
- ColorZilla Add Ons (Availabe in Chrome and Firefox) for pick color
- PixelZoomer Add Ons (Availabe in Chrome and Firefox) for measure manually and it also have pick color too.
- Firefox Web Developer Inspector. You can use default Firefox Inspector for measure manually, just use Tools -> Web Developer -> Inspector , Click Toolbox Options (it’s an icon in the bottom right (usually icon number three from right)) , Available Toolbox Buttons and Just check Measure Portion of a Page
- Dimension Add Ons (Available in Chrome) for Measure Automatically , It’s suitable if the image / screen has no gradient color.
That’s all tool which i use to make better wordpress theme pixel perfect .