10 years ago from Riki Tanone, Founder and Designer of Hoarrd
It seems that CSS automatically puts outlines/borders outside the div. Photoshop vector strokes by default puts them inside. Do you guys generally put strokes inside or outside on your .psd file?
I use both, depending on the desired behaviour.
Outside strokes will keep the inner edge pixel snapped when scaled or at non-integer sizes. Inner strokes will keep the outer edge pixel snapped when scaled or at non-integer sizes. A 1.5px outer stroke looks very different to a 1.5px inner stroke.
So, it’s important to use the correct method, depending on the values used and what you plan to do with the artwork.
I use centered stroke rarely. I’m not alone: http://strawpoll.me/8653/r
I’d also recommend using vector strokes in Photoshop for most cases, rather than layer style strokes. More info here: http://bjango.com/articles/photoshopcs6strokes/
Ugh. You said 1.5 pixel.
That, for me, just doesn't fly. I'm a WEB designer. I design for computer screens. A computer screen doesn't do .5 pixels. If I want .5 pixels, I'll use an inner shadow or inner glow underneath it.
And then there's the way different browsers might interpret the .5 in css. Not sure if there's a difference, but I could see some of them deciding on different aliasing methods, and I don't want to leave that kind of vulnerability in my designs.
Not meaning to be mean or condescending - my brain just works in pixels.
Maybe it's because back in the QBASIC days I was telling each pixel what it's color would be. Or maybe because I used to love drawing tiny tiny pixel soldiers in Ms Paint. I don't know.
Oh by the way, that link you provided about Vector strokes vs Layer style strokes is ridiculously epic. Thanks so much for that!
Ugh. You said 1.5 pixel.
Yep, I did. Please let me explain. :)
In 2013, it's common to design for different display pixel densities. Doing so means that your design values are likely to be scaled. If you specify 3px on a Retina display, that will be 1.5px on a non-Retina display (this is also 1.5pt for native iOS dev or 1.5px in CSS).
If you want 2px on an Android xxhdpi display, that ends up being 1.5px on a xhdpi display and 1px on an hdpi display.
As mentioned, vector strokes in Photoshop allow floating point values. CSS also allows them, although some browsers will round the values:
http://www.w3.org/TR/2011/REC-CSS2-20110607/syndata.html#length-units
CSS pixels typically lock to the display's pixel grid, but they're intended as an abstracted unit: “For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel”. This is why 1px in CSS represents 2px on a Retina display.
So, I’m all for clean, pixel snapped artwork, but high DPI displays has made things a little more complicated.
These might also be of interest: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.htmlhttp://bjango.com/articles/everythingisagrid/
Oh by the way, that link you provided about Vector strokes vs Layer style strokes is ridiculously epic.
Cheers! Lots more articles coming.
Cheers for the response, much appreciated.
I see where you're coming from, but your response has left me wondering about your workflow.
Do you supply developers with HTML/CSS, PSD files from which they get all the exact values, flattened images with documentation, or some other way?
The company I currently work for has a (sometimes pretty disabling) split between development and design, where I'm the sole UI/UX designer keeping 4 to 5 programmers busy. This means I've got a fair workload and they won't let me near the code, even though I've proven my worth by fixing css/html issues they've ran into, or pointed out their mistakes. So I supply them with pixel-perfect PNG's with some words on alignments, color codes etc. and they do all the measuring from those PNG's.
What I'm trying to say is that perhaps the difference lies in our workflow, not in correct/incorrect use of .5 pixels, since I'm stuck supplying bitmap files.
... and yes; I'm trying to find out if I'm in the wrong and need to adjust my workflow, or maybe am just at a disadvantage here at work ;)
I see where you're coming from, but your response has left me wondering about your workflow.
Here’s my app design workflow: http://bjango.com/articles/appdesignworkflow/
Do you supply developers with HTML/CSS, PSD files from which they get all the exact values, flattened images with documentation, or some other way?
I realise there’s many different approaches, but for our work, I always cut up and name images (for native apps), and for our website, I build all the HTML and CSS.
What I'm trying to say is that perhaps the difference lies in our workflow, not in correct/incorrect use of .5 pixels, since I'm stuck supplying bitmap files.
Oh yep, I’m not questioning your workflow, just suggesting that there’s situations where using pixel fractions can be a good thing, especially if you’re accounting for different display densities.
I keep them INSIDE.
If you put them outside, and you'd want to increase the border size of all your elements, you'd have to re-size them buggers too, to fit the same gutter.
Then there's the issue of keeping rounded corners the same size across all elements, regardless of border size.
Lastly, I love me some consistency, so I don't want different (inside, outside, center) methods in one PSD.
Always on the inside.
If you use box-sizing: border-box in CSS, it puts the borders inside.
http://www.paulirish.com/2012/box-sizing-border-box-ftw/
So it shouldn't be an issue and you should always put them inside.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now