Text Art Tips #1

14 min read

Deviation Actions

pica-ae's avatar
By pica-ae
As new partner in crime for your Text Art Gallery Moderator Sander-Seto i thought it was time to write a News Article about Text Art.
Maybe the Text Art Tips will turn into a series of articles.
What can you expect? My aim is to give you some tips on how to improve your Text Art.

So, Here Are Some Tips To Help You Improve Your Text Art

Take your time!

Really, dont rush any artwork you are doing. Especially in Text Art it is easy to just add a line of text to a canvas and you think you're done. This is not the case. Try different things, experiment with colors, with font sizes, textures, canvas sizes, kerning and and and. Just don't be done in 5 min.

Don't let the Font do the Artwork for you!

While Grunge Fonts like Bleeding Cowboy or Typewriter From Hell look interesting and exciting, you really shouldn't use them for your artworks. They are mainly just easy and lazy to use. You can achieve way better results by making a font like Helvetica or Garamond grungy with layer masks or adding elements. They also make the whole piece more controllable for you.
(Everybody goes through a Grunge Font phase, i did that myself:B )

Follow Tutorials, but don't copy them!

You are welcome to try out Text Art Tutorials, you will always learn something new with every tutorial you follow. And you are of course free to make it look exactly as in the tut. But once you've done that... think about how you could use what you just learned again. In a new piece. In your own piece!

Don't use all the options in your characters window!

When working with Photoshop or Illustrator you get that little window in which you can choose your font, fontsize etc. Some of the options you really should not use for creating artworks. :|

Don't scale the fonts width or height.
This destroys the font you are using. All the balance that went into creating this font will get lost.

Don't use the faux bold or italic button!
This will make your computer twist the font. Instead use the dropdown field beside the font name and choose the bold or italic style from there. Why? Because a Font Designer creates the other styles of the font manually. Also, italic fonts are meant to appear with a hand written look, especailly with Serif Fonts you can see that the serifs will become curvier.The faux buttons will either fatten or bend the type electronically, it's a fake font style.
(Actually "faux" is what happens when you use an italic or bold style in a browser. Just btw ;) )

TAT_Character_Window by pica-ae TAT_ItalicBold_Issue by pica-ae
The Photoshop CS4 Character Window and examples of how the faux options work.

The Mystery of Kerning!

If you are working with typography you probably heard that word before :eyes: But what exactly is it and what does it do for you? :confused:
From Wikipedia:
"Kerning is the process of adjusting white spacing in a proportional font. In a well-kerned font, the two-dimensional blank spaces between each pair of letters all have similar area."

Just like in the Character Window the best example for this are the A and V letters. If no kerning is applied a huge space appears between those 2, with kerning applied (auto or manually) both letters overlap each other but look more appealing to the eye.

TAT_Kerning_1 by pica-ae TAT_Kerning_2 by pica-ae
Some examples to show you what Kerning will do for you.

Using Black?

Black is not always black. :B Using 100% black as color for your type or background may not always be the best decision. Using a 80% black gives you a smoother look and leaves you more options for light textures or effects. You can also add transparent gradients or solid color layers to a black background to give it more depth. Try it and it might get a more appealing look than 100% black.

TAT_Black_Examples_1 by pica-ae TAT_Black_Examples_2 by pica-ae TAT_Black_Examples_3 by pica-ae TAT_Black_Examples_4 by pica-ae TAT_Black_Examples_5 by pica-ae TAT_Black_Examples_6 by pica-ae
While the first one is just plain white on black, the others ones show how a little optimizing improves the look.

Be Careful With Effects!

Especially those with shadow, glow or bevel/emboss. They are not pure evil, but at last don't take the standard settings and leave it with that. A well used shadow/glow can improve readabilty of your text on some backgrounds. If your imitating some sort of cut out or pressed paper those effects are of very good use, too. Just be careful with what you do. Overused effects easily look cheap or cheesy.

TAT_Effects_1 by pica-ae TAT_Effects_2 by pica-ae
Just be careful ;)

Don't forget to present your artwork!

You made a typographic illustration. Wether it is just placing a line of text or creating a typographic logo design. Please refrain from presenting it just black on white (or white on black ;p). It will look boring, flat and  uninspired. Your design has a meaning. Show it with presenting it good.
How to present your design? Use colors for the letters or the background. Play with an image. Maybe use some textures or patterns. Try to create an atmosphere that supports your design.

TAT_Presentation_1 by pica-ae TAT_Presentation_2 by pica-ae
How a typo design can be improved from a simple and flat black on white, to more depth with colors, texture and different blend modes. Crappy example, i know.

Check the Spelling!

I'm serious :| Do it. Ask an online dictionary or ask a friend, but do check the spelling. Or grammar if it's more complicated. But you don't want a good looking artwork with wrong spelling.

Take your time!

Like Paul McCartney said once: "If the song is too short and you have no more lyrics... repeat the first verse." (at least i think it was him :B) so, here we go :la:
Really, dont rush any artwork you are doing. Especially in Text Art it is easy to just add a line of text to a canvas and you think you're done. This is not the case. Try different things, experiment with colors, with font sizes, textures, canvas sizes, kerning and and and. Just don't be done in 5 min.

For Further Reading...

Some of the Typography Tutorials from deviantART:

:thumb73108686: Typography text tutorial by Mv2dot Typeface Anatomy: A Brief by fiveless Typograhic Tools by DoesntBodeWell

Some tutorial collections from around the web:

29 Excellent Typography Tutorials for Designers
22 Stunning Typography Tutorials on Photoshop
11 Amazing Tutorials combining Great Typography and Skillful Vector art.
101 Top Photoshop Typography Tuts
40+ Killer Typographic Posters, Photoshop Effects and Tutorials
33 Best Typography Effect Photoshop Tutorials

Thanks For Reading!

I hope this News Article was helpful :aww:
Feedback is highly appreciated :)

pica-ae :heart:

© 2010 - 2021 pica-ae
Join the community to add your comment. Already a deviant? Log In
DaisyWarriorCats's avatar
How do you make words small/leaning to one side... O-o ?
pica-ae's avatar
"leaning to the side" is called italic and you do it by placing your text between <i> … </i>

If you also want it to be small you can use <sup> … </sup>

You can even use it combined <i><sup> … </sup></i>

There is an overview about what else is possible here FAQ #104: What HTML formatting can we use on deviantART? And what is the format for these codes? :)
DaisyWarriorCats's avatar
kk nevermind I've found out how to stop it, I think.
DaisyWarriorCats's avatar
Mmmkay I get it ^^ How do I get it to stop?? xD

I try this one too
pica-ae's avatar
just put the text where I put … :)
DaisyWarriorCats's avatar

Like this? It worked!
MidNightMagnificent's avatar
You've done it again. Great tips and awesome article, off to read the rest in the series now...
pica-ae's avatar
haha :blush: thank you, im glad you like it :aww: :hug:
MidNightMagnificent's avatar
These should be made into a downloadable deviation. Tedious to keep opening up my browser...
pica-ae's avatar
hehe, i could do that :B i guess now there are 3 of them it's actually worth it :D

MidNightMagnificent's avatar
I'm sure there'll be a lot of favs! Let us know if you do so! :)
pica-ae's avatar
yes, i'll make it known if i turn it into one file :D
MidNightMagnificent's avatar
ekajulyana's avatar
nice tips
just found this tips on typoholic group
How can I find others tips like this??
anyway Text Art: Anatomy, Basics, Effects link cannot found
pica-ae's avatar
i made some more in that series, you can find them on my profile page :)

that link doesnt work, because !Sander-Seto deactivated his account and so all his news disappeared as well :( (obviously, cos of the ! in front of his name ;))
and i cant edit news articles, so it will stay there :B

thanks for your support :hug:
rangga19's avatar
i'm still new at this stuff..
and your tips sure help me alot..

thanks for the tips.. :thumbsup
pica-ae's avatar
that's cool to hear :aww:

i am glad if i could help :hug:
jooyousef's avatar
its so helpful
thanks for help
pica-ae's avatar
i am glad you think so :hug:
Join the community to add your comment. Already a deviant? Log In