3D Type tests

I’ve noticed a lot of my work tends to say ’shush’ instead of ‘shazam!’ So in a bid to interject a little more vibrance, where necessary, I’ve looked closer at graphic work around me that catches my eye and figured out what the major culprit is; light!

I say light and not ‘the third dimension’ or ‘depth’ because designers needn’t spend time in Photoshop drawing up 3D type when they could be more economical with their time and achieve the same goal by easier means. Namely, we can go into Illustrator or even inDesign and still manage to add a sense of depth to a piece of text.

I’ve taken a mental note of the various ways people are using a lighting effect of some sort, be it colour gradients or lens blurs, and tried each one to see the results. Knowing all this now, I’ll be able to employ these tricks more in my work.

This one below demonstrates two means. If you ignore the black you can see a colour gradient is used — although it won’t make a 3D look, it makes the text appear as though light is hitting it…like it’s affected by the surroundings (almost 3D). With the black midground hugging its edges and the white background, it employs a graffiti artist’s method in creating levels of depth (fore/mid/backgrounds).

This one doesn’t blend colours like a colour gradient, but just uses two solid colours. More economical in some ways and still gives the sense of light hitting it.

Same again but using a curved edge to add realism. Yes, I’m making tiny steps for now. To make these changes I’ve done the following; type the text (or draw it), go to type>create outlines (if typed), copy the text once and align the two on top of each other, draw a line with the pen tool over the text with no fill/stroke, select the top type layer (as one group of letters) and the line and, in the pathfinder menu, click the section option along, then click expand. You should be left with a piece of the text (where you drew your line). Change the fill colour of this object to a lighter tone and you get something similar to below
.

The next step could be to combine the two methods; the lighter toned shape can be given a gradient, as below, to improve the realism.

Having had a peak at Apple’s website, I noticed how much they use subtle effects on their type designs/buttons to lure us in with their shiny splendour! I’m still not sure which method is best exactly, but I’ve included my attempts below.

This one is simply white text on a background that uses a gradient. The text is given a very blurred outer glow.

Gradient on the background and a tiny drop shadow.

At a glance it doesn’t look like the background is only two colours but it is, honest. The text has also been changed slightly in accordance with the background. The drop shadow remains on this one, though…thinking about it now, it makes no sense to use a drop shadow if you’re trying to make it look like the word is engraved into the grey button (background). I’ll have to fix that sometime and see what happens!

This one works much better in looking like the text has been engraved. The background uses a gradient, light-dark-light from top to bottom. The text uses the same gradient to adhere to the ‘interaction’ of light. As a final touch, I gave it a drop shadow BUT it is lighter than the text which makes it seem inset and not embossed. Also, I only applied the (white) shadow to the bottom half of the word — works well.

These are supposed to be buttons for the web, after all, so I’ve put a smaller image of them in below. I find the first, second and last versions to work the best. Subtlety seems to work much better than other approaches.

Back to the beginning, then, to look at other ways of manipulating text.

This is a popular tool today for recognizing an interaction with light in typography. iTunes, you may have noticed, used this effect on all the album images before the latest software update. The Apple Macs, in general, use reflections quite often in keeping with their shiny-shiny visual identity. You’ll notice the ‘y’ is missing — you have to reflect text from the baseline really, and I haven’t drawn capital versions of my typeface yet.

I have Film4 to thank for this idea. Their TV self-promo involves their logo suspended in a red space and only the middle point of it comes into focus. If you’re sending things out of focus, it may be worth using colour gradients to enforce the sense that they’re in the distance. The image below doesn’t work too well because, obviously, if something is further away it usually has to be slightly smaller.Combining just three effects can have a pretty good result. Colour gradient, Guassian blur (for the focus effect) and free distort (perspective control) have been used below on the text itself. The background was given a slight light-dark gradient to add to the depth. Again, this was just a quick test to see what I could do but, now I know, I’ll be trying out these effects where necessary.