Pixel bloody perfect

Summary:A big bonus of contract web dev work is the sheer number of handy tips, workflows and new technologies that you come across.At my last project, Tim opened my eyes to the delights of the CodeKit local webdev processor by Bryan and the Tower visual Git client for the mac.

A big bonus of contract web dev work is the sheer number of handy tips, workflows and new technologies that you come across.

At my last project, Tim opened my eyes to the delights of the CodeKit local webdev processor by Bryan and the Tower visual Git client for the mac.

Now it’s pay-back time. I was showing Richard the Pixel Perfect addon for Firefox, which enables you to overlay an image on a page. (For all you Chrome users, there’s an equivalent extension called Perfect Pixel.)

Here’s a quick HowTo Get The Best Out Of It:

1 Export your mockup as a PNG or JPEG. I use Inkscape for creating mockups, as it is truly the best graphics app on the planet.

01 Export your mockup

2 Import your image

02 Import your image

3 Be impressed. See how your mockup image overlays your website build.

03 Marvel at image overlay

4 Invert your mockup. To take your pixel perfection to the next level, invert your mockup and import it. I used Pixelmator for this, as Photoshop is bloat.

04 Invert your mockup

5 Be very impressed. By inverting the image, and then setting the overlay to 50%, where your website build is spot on, there is a perfect sea of grey. Where your website build is off, you will see dischord and fractitiousness.

05 Marvel even more at how inaccurate your site build is

As you can see from my examples, my own website is a bit off the original mark. But, do as I say etc…

@growdigital

Topics: Software Development

About

A web designer since the 20th century, I am a pragmatic advocate of Free Software and I use proprietary software when appropriate. I made the full-time switch to Linux back in 2007, and my desktop tools of choice are Linux Mint, Inkscape, GIMP and Sublime Text. As a Front End Developer, my core skills are HTML5, CSS3 and jQuery, an... Full Bio

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Related Stories

The best of ZDNet, delivered

You have been successfully signed up. To sign up for more newsletters or to manage your account, visit the Newsletter Subscription Center.
Subscription failed.