I've got a PSD for a page that I'm about to code into HTML and CSS.

To avoid switching back and forth between Photoshop and Firefox and measuring pixels whilst trying to code this, I'd like to use the PSD (or the PSD exported as a PNG) as a background image in the HTML which I can use to simply visually check that the HTML elements I code align closely with those in the PSD.

Has anyone heard of any tools or seen a tutorial around that achieves something similar to this?

I've seen techniques where grids are used as background images to aid alignment.

Perhaps there is a firefox plugin, or something else?

For now I'm going to try using the exported PNG as a background image and turning it on/off with the "Images > Hide Background Images" action in Firefox's web developer toolbar. I expect this will do the job fine but I'm interested to know what alternatives are available.

5 answers

This was chosen as the best answer

There's a Firefox / firebug plugin just for you:



Answered almost 9 years ago by Tony Crockford

I use Medialab's Sitegrinder to prototype my pages, also there's a Measureit Firefox plugin that is an on screen ruler. They both do great jobs for me.

Also check out DM2, you can have the PNG in a PS window and set the opacity of the window and layer it over your site to see if it works, plus it also has always on top etc features.

Hope some of that helps :)

Answered almost 9 years ago by Kyle Sevenoaks
Andy Ford 533

Here's how to do it in pure CSS in almost any browser.

Create a flat PNG (can be JPG, but PNG seems to work best) file of your design comp and set it as the background for the HTML element. Then set opacity on the BODY element. I wrote about it here (although I'm not sure I explained it very well)

Here's the CSS to set this up:

html {
    background-position: 50% 0;
    background-repeat: no-repeat;
    background-image: url(path/to/my-comp.png);

body {
    opacity: .7;

However, I usually set it up so that I can use different classes on the HTML element to swap out different comps:

html.bg { background-position: 50% 0; background-repeat: no-repeat; }
html.bg body { filter:alpha(opacity=70); opacity: .7; }

html.bg-home { background-image: url(i/screens/pg-home.png); }
html.bg-sub { background-image: url(i/screens/pg-sub.png); }
html.bg-contact { background-image: url(i/screens/pg-contact.png); }

So for the home page comp, I use:

<html class="bg bg-home">

And for the contact page:

<html class="bg bg-contact">

I usually add these classes on-the-fly with Firebug but you can hardcode them in the HTML file. Or if I'm using a server side language like PHP, I'll use a url query like ?comp=home and then a little code to sort out applying the proper class to the HTML element based on the url parameter.

Answered almost 9 years ago by Andy Ford

No plugin necessary, just swap in your own classes/selectors and style the debug variants as you see fit

jQuery(document).keypress( function(evt) 
    if ( evt.which == 96 )
        var grids = { 24: jQuery('.container_24'), 16: jQuery('.container_16'), 12: jQuery('.container_12') };

        for ( g in grids )
            if ( grids[g].length )
                grids[g].toggleClass("debug_960_" + g);
Answered almost 9 years ago by Nathan Duran

If you use Dreamweaver you can go to Modify>Page Properties and under Tracing Image you can apply a PSD or any other web friendly format. you even have control over transparency so you can ghost it 50%.

Answered almost 9 years ago by Sean Maher