Pixel perfect image to pixel perfect CSS

otemu

otemu

otemu

Associate
Joined
16 Jul 2008
Posts
271
Location
London
Hi,

Quite common when working in a dev enviroment that designers normally send the developers pixel perfect PSD of the site. Just wondering if anyone knew any great techniques on how to get exact measurements of all elements for positioning, margins, text sizes etc.

My technique is normally using the ruler tool in photoshop or counting gridlines so I can lay it out. Anyone got any other useful tips as my method seems slow and tedious?

Cheers
 
The way i usually use is to marquee out the selection I want to know the size of, then CTRL+SHIFT+C to copy merged, then CTRL+N for new file. The size of the copied selection is automatically loaded into the size of the new file dialog. Dirty, yes, but it works.

Also, it's worth noting that the whole 'pixel-perfect' thing is a fallacy. There will always be 1/2/3 px differences in margins, padding, line-heights between browsers. IMO this is fine so long as the overall wireframe layout of the site remains intact.
 
In photoshop go to Window> Info

it will bring up an Info box on the top right.

You can use marquee tool (m) to make a selection and it will tell you in the info box the dimensions of your selection. If the Info box shows a figure other than pixels go to

Edit>Preferences>Units and Rulers and select Unites to Pixels for both rulers and type.
 
You could potentially ask your designers to provide some of these details? They will (should) know the design inside out, so asking for some dimensions etc won't put them out too much!
 
If you cmd/ctrl click on a layer, it will marquee round just that layer. Then use the information menu to see the dimensions. That should be pixel perfect and much more accurate that dragging a marquee over it all.
 
Last edited:
Good tip, but you still need the marquee method when you're trying to figure out the gap betwen the top of a block of text and a border for example.

Also the Ctrl+Click layer isn't reliable for sizing when there's a drop shadow/some transparency on the edge of the layer.
 
Spunkey said:
Good tip, but you still need the marquee method when you're trying to figure out the gap betwen the top of a block of text and a border for example.

Also the Ctrl+Click layer isn't reliable for sizing when there's a drop shadow/some transparency on the edge of the layer.
Click to expand...

Oh yes, there are certainly some downsides to that method! As mentioned earlier, pixel perfect design is very tricky. There are so many techniques that are needed to be good at photoshop that the mind boggles sometimes.

I was putting some rulers out the other day and they looked perfect even at 200% zoom on a 1200px canvas. Zoomed in as far as I could and found the rulers were 3-4 pixels out. Depressing.

Reading my post above, I do appear to be advocating the cmd click method over the dragging method in all cases but as spunkey says, horses for courses.
 
You must log in or register to reply here.
Back
Top Bottom