Shop Mobile More Submit  Join Login

Text Art Tips #1

Fri Feb 5, 2010, 7:07 AM
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 :)

cheers,
pica-ae :heart:


Add a Comment:
 
:icondaisywarriorcats:
DaisyWarriorCats Featured By Owner Jan 28, 2012  Hobbyist Digital Artist
How do you make words small/leaning to one side... O-o ?
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 29, 2012  Professional Interface Designer
"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? :)
Reply
:icondaisywarriorcats:
DaisyWarriorCats Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
kk nevermind I've found out how to stop it, I think.
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 29, 2012  Professional Interface Designer
:hug:
Reply
:icondaisywarriorcats:
DaisyWarriorCats Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
:D
Reply
:icondaisywarriorcats:
DaisyWarriorCats Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
Mmmkay I get it ^^ How do I get it to stop?? xD

I try this one too
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 29, 2012  Professional Interface Designer
just put the text where I put … :)
Reply
:icondaisywarriorcats:
DaisyWarriorCats Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
Mmkay

Like this? It worked!
Reply
:iconpica-ae:
pica-ae Featured By Owner Jan 29, 2012  Professional Interface Designer
:highfive:
Reply
:icondaisywarriorcats:
DaisyWarriorCats Featured By Owner Jan 29, 2012  Hobbyist Digital Artist
:iconhigh5plz:
Reply
:iconmidnightmagnificent:
MidNightMagnificent Featured By Owner Jul 8, 2011  Hobbyist Digital Artist
You've done it again. Great tips and awesome article, off to read the rest in the series now...
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2011  Professional Interface Designer
haha :blush: thank you, im glad you like it :aww: :hug:
Reply
:iconmidnightmagnificent:
MidNightMagnificent Featured By Owner Jul 8, 2011  Hobbyist Digital Artist
These should be made into a downloadable deviation. Tedious to keep opening up my browser...
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 8, 2011  Professional Interface Designer
hehe, i could do that :B i guess now there are 3 of them it's actually worth it :D

Reply
:iconmidnightmagnificent:
MidNightMagnificent Featured By Owner Jul 8, 2011  Hobbyist Digital Artist
I'm sure there'll be a lot of favs! Let us know if you do so! :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 9, 2011  Professional Interface Designer
yes, i'll make it known if i turn it into one file :D
Reply
:iconmidnightmagnificent:
MidNightMagnificent Featured By Owner Jul 9, 2011  Hobbyist Digital Artist
Thank you so much! :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Jul 10, 2011  Professional Interface Designer
:hug:
Reply
:iconekajulyana:
ekajulyana Featured By Owner May 10, 2011
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
Reply
:iconpica-ae:
pica-ae Featured By Owner May 10, 2011  Professional Interface Designer
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:
Reply
:iconrangga19:
rangga19 Featured By Owner Apr 8, 2010
i'm still new at this stuff..
and your tips sure help me alot..

thanks for the tips.. :thumbsup
Reply
:iconpica-ae:
pica-ae Featured By Owner Apr 9, 2010  Professional Interface Designer
that's cool to hear :aww:

i am glad if i could help :hug:
Reply
:iconjooyousef:
jooyousef Featured By Owner Mar 8, 2010  Hobbyist Interface Designer
its so helpful
thanks for help
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 8, 2010  Professional Interface Designer
i am glad you think so :hug:
Reply
:iconjooyousef:
jooyousef Featured By Owner Mar 13, 2010  Hobbyist Interface Designer
ur welcome
Reply
:iconpica-ae:
pica-ae Featured By Owner Mar 13, 2010  Professional Interface Designer
:)
Reply
:iconshoelesspeacock:
shoelesspeacock Featured By Owner Feb 22, 2010
Did you write this all yourself? I think you've pretty much hit all the basic, yet essential points for those that are still new to typography. Great stuff.
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 22, 2010  Professional Interface Designer
yes :B i of course did not make it all up, all stuff that i learned in time ;)

thank you :hug:
Reply
:iconscrapsaurus:
scrapsaurus Featured By Owner Feb 18, 2010  Hobbyist Artisan Crafter
Thaaat was really useful :nod:
Reply
:icondc-junior:
DC-Junior Featured By Owner Feb 11, 2010
Very nice read. Thanks for taking the time to write it!
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 20, 2010  Professional Interface Designer
i am glad you enjoyed it :hug:
Reply
:iconfabrikken:
Fabrikken Featured By Owner Feb 9, 2010
Well written and illustrated.
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 9, 2010  Professional Interface Designer
thank you :hug:
Reply
:iconlac777:
Lac777 Featured By Owner Feb 8, 2010
Really basic tips, but very nicely written ;)
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 9, 2010  Professional Interface Designer
well, they might be basic, but they are important.
Reply
:iconlac777:
Lac777 Featured By Owner Feb 9, 2010
Yay, your right, and I never criticized this!
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 10, 2010  Professional Interface Designer
:)
Reply
:iconvekica:
Vekica Featured By Owner Feb 7, 2010  Student Interface Designer
great tips. i don't do typography but this article got me interested. awesome :D
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 8, 2010  Professional Interface Designer
:hug:
Reply
:iconregularjane:
regularjane Featured By Owner Feb 7, 2010  Hobbyist Photographer
Thanks...this has been reaaly helpful and I am off to visit the links :)
I sometimes have all these ideas for texts and phrases and have no idea what to do with them...
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 8, 2010  Professional Interface Designer
i am glad you like it :hug:

you just gotta start with doing what you feel like :)
... and then adjust ist ;)
Reply
:iconregularjane:
regularjane Featured By Owner Feb 8, 2010  Hobbyist Photographer
:hug:
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 8, 2010  Professional Interface Designer
:)
Reply
:iconkuekenenelya:
KuekenEnelya Featured By Owner Feb 7, 2010
this was really helpful. i was always fascinated of Typography and now I know what's important to do for a good art work. thank you :)
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 7, 2010  Professional Interface Designer
you're welcome :hug:
Reply
:iconpeace-princess:
peace-princess Featured By Owner Feb 7, 2010  Student Photographer
So helpful :heart: !
thanx !
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 7, 2010  Professional Interface Designer
:hug:
Reply
:iconkuschelirmel-stock:
kuschelirmel-stock Featured By Owner Feb 7, 2010  Hobbyist Digital Artist
:clap: thanks for sharing!
Reply
:iconpica-ae:
pica-ae Featured By Owner Feb 7, 2010  Professional Interface Designer
:huggle:
Reply
:iconschoolfilmer:
schoolfilmer Featured By Owner Feb 7, 2010
That's a cool article!
Oh, and typography may be hard, but with patience, the results will be mind-blowing!
Reply
Add a Comment:
 
×

:iconpica-ae: More from pica-ae


Featured in Collections

Digital arts Techniques by passion-aesthete

News and Journals by nikki-ns

Tutorials by MidNightMagnificent


More from DeviantArt



Details

Submitted on
February 5, 2010
Link
Thumb

Stats

Views
3,808
Favourites
168 (who?)
Comments
143
×