homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
Forum Library, Charter, Moderators: not2easy

Site Graphics and Multimedia Design Forum

How do you work effectively with imagery and text?
share best practice for making imagery and text work together

 12:15 pm on Dec 30, 2007 (gmt 0)

Afternoon all!

As a web editor thrown into the world of banner creation - and a self-confessed useless artist - one of the things I struggle with most is how to make text work when integrated with imagery.

You know the kind of stuff: You need to create an effective banner with a beautiful image allied to a standout message - "All flights now 99!", for example.

I need to learn effective usage of typography in this domain. I generally fall into the trap of just making text bigger, or using stroke outlines, to emphasise the text when it's set against a cluttered background when I know in reality I should be looking to find a different, cleaner image where text could achieve standout with less 'flashiness'.

I also need to figure out what colours work best together so you can achieve text standout in that way. I've checked out many sites offering the tool where you can add in hex codes and it shows you colours that 'work' together, but often I feel this doesn't help me much.

Do you know of any books or sites I should work with to better understand how to make text and imagery work together?



 1:22 am on Dec 31, 2007 (gmt 0)

Apply depth, 3-d edges and a little bit of shadow go a long way.


 7:05 pm on Jan 1, 2008 (gmt 0)

I hope that was a joke coalman ;)

understand how to make text and imagery work together?

That's why people spend a long time studying graphic design :)

Text written over cluttered background should be avoided if possible. Selecting the right image, as you say, is a very important aspect. If you have no option then try to find the tonal range with the most contrast for your type or look for opportunities within the image for manipulation.

I'd avoid gimmicks - treatments that add add alot of clutter to the typeface itself will be detrimental to the design unless handled with a great deal of subtlety.

Heavier type weights 'knocked-out' of the background image can look very striking and will help keep the overall image clean.

I've just posted some reading reccomendations here [webmasterworld.com] that might be of interest.


 8:36 pm on Jan 1, 2008 (gmt 0)

I hope that was a joke coalman

Not it was not a joke, lets take your example of a cluttered background but we'll take it step further and say the text color we want to use is the same as what is predominantly in the background. A simple 2 or 3 px rounded edge and 2 or 3 px shadow that contrasts with the background slightly will transform the text from unreadable to very readable.

I'm not suggesting some giant shadow or huge bevel on the edge of the text but just enough to give it a defined edge.

There's a pretty good example at the Philadelphia Eagles website but probably a little more shadow that I would use.

The background color under "Eagles" is nearly the same as the text itself. The only thing that makes it work is the shadow and the slight edge applied to the text itself. Otherwise it wouldn't work, looks very good IMO.

[edited by: limbo at 9:33 am (utc) on Jan. 3, 2008]
[edit reason] Delinked [/edit]


 9:33 am on Jan 3, 2008 (gmt 0)

My comment was tongue in cheek - I agree with the point you made to a degree - on some occasion using text effects can be acceptable.

I learned typography by listening to the old guard - to even mention 3D effects and drop shadows was sacrilege, punishable by slow death. :) I'm a bit more open minded than my peers and belive that if done with a cautious subtlety it can look great.

Mind you, I think it is a last resort and that type should be left in it's pure state if at all possible - there are usually other answers to be found.


 2:34 am on Jan 9, 2008 (gmt 0)


does it mean both drop shadows and 3D Text should be avoided at all costs.

Not sure about 3D text but Dropshadows are a common thing in print publishing (large size banners for hoardings etc)


 2:42 am on Jan 9, 2008 (gmt 0)

I hope that was a joke coalman

That's how I do it. :)

I'm even working on making photo collages now, for banners. And page curl, need to refresh memory on that one.


 3:00 am on Jan 9, 2008 (gmt 0)

Ah, yes, I've been in that situation. Your situation may differ, but one of the best decisions I made last year was to focus my energy on leveraging strengths, not getting mediocre at things I'm bad at.

So, being a design-blind person myself, I hired a contract designer.

Not sure this is something you can do, but it's been really beneficial for me. I've had a lot more time to devote to (text) content creation and the business side of my work.

You can actually hire designers for fairly cheap. I'm also a big fan of participating in design "contests" for things like logos, icons, and banners. For pretty modest prizes a number of designers will post their concepts. Google "design contests" and you'll find at least one site that runs these sorts of things.


 9:48 am on Jan 9, 2008 (gmt 0)

there are so many works in deviantart to get motivation from.

But for a highly paid designer, I dont think people are opting for such a person (except in rare cases)


 11:45 pm on Jan 10, 2008 (gmt 0)

In situations where I'm forced to put text over a cluttered background, I'll often create a "window" to hold the text. In the window I'll either put a complimentary color or just white and make it slightly transparent. Either with no edge (think the frame of the window) or a 1 pixel black edge-straight lines only. This works to decrease the noise and make it more readable.

Selecting the right photo with plenty of empty space is the better option-if you've got it.


Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / Site Graphics and Multimedia Design
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved