Simple Photoshop tricks: Thick lines for definition
Time for yet another simple Photoshop trick, although technically this one isn’t so much about Photoshop as it is a design or layout idea.
Say you have a list of something on your page, be it products, comments or whatever; and each item has a mix of content – heading, text, list, image(s) – which make it difficult to clearly see where one item ends and the next begins.
There are a few solutions you could employ – generous margins to space the items out, or maybe put a box around each item – but a technique I particularly like and have used a lot recently is to set a very wide left-border on each item. This has the effect of creating an implicit container without needing borders on all four edges.
You can see this type of ‘thick line for definition’ technique in use within countless newspapers and magazines, and also on clean sites with minimal design such as Subtraction and Mark Boulton.
I’ve also had some success using partial horizontal lines to separate items as well; the less-than-100% width adds visual interest and can help with dsitributing visual weight on the page.
Not exactly ground-breaking, but a useful fallback when you’re staring at that Photoshop layout trying to figure out how to style your comments list…
Filed under: Photoshop, Design.
Bookmark this article with del.icio.us
Previously: Review: NewsGator Online
Next: BarCampLondon: What to do?
Just to let you know that in Mark Boulton’s link in the post it only has a ww. not www. :)
Nice little snippet. Its something I had not before considered using but might now.