Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

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)

5+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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


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

WebmasterWorld Senior Member 10+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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)

WebmasterWorld Senior Member 10+ Year Member

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)

5+ Year Member


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)

WebmasterWorld Senior Member marcia is a WebmasterWorld Top Contributor of All Time 10+ Year Member

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)

5+ Year Member

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)

5+ Year Member

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)

10+ Year Member

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.



Featured Threads

Hot Threads This Week

Hot Threads This Month