new icn messageflickr-free-ic3d pan white
How to make #TwitterArt | by tw1tt3rart
Back to photostream

How to make #TwitterArt

Many people ask how I make #TwitterArt. How they can make it, too. Here is the first thing to know:


Part 1. Where to find the shapes and symbols:


On older Mac operating systems open the "Character Palette" (usually pulls down from flag icon upper right), on the current Mac OS (10.7) open "Special Characters" (at the bottom of the "edit" menu) on PC open the "Character Map" (I don't use PC, I don't remember where it is)


This, above, is a picture of the Character Map, which looks very similar to the current "Special Characters" interface. I enter objects from it directly into Twitter (or HootSuite, or a Text Edit program, like TextEdit). Then I tweet the art I've made.


More about how to arrange unicode objects and make pictures below, but that is the first step, and the most important one: Find the Character Palette and open it.


All the objects your operating system supports are there: ▲◤◒ ╠╬╝ ╭╮ ☝➷ ⤴⤶₦ʘ ∰ … no special application or specialized knowledge needed! Try it! It is mildly addictive… =^)


I mostly use "Geometric Shapes" "Miscellaneous Symbols" and "Enclosed Letters"…


All these shapes & symbols are contained in Twitter's main body font. Most contemporary fonts contain the same unicode objects, though different fonts / versions look a little different & contain some different characters… Beyond A thru Z, there are dozens of languages, glyphs, symbols, objects, braille… invisible objects, even!


Important note: Unicode objects read differently in different contexts. Their appearances vary from font version to font version, between various fonts, by operating system, by browser, and by device. More PCs read one subset of shapes better and Macs read a different subset better—though there is a lot of overlap, and a few ways to optimize viewing (set Lucidia Grande as the preferred font for your browser.)


#TwitterArt is best viewed in FireFox (on most operating systems), and the current Safari browser (on Mac OSX 10.7+)


Part 2. The Order of the Objects


Twitter doesn't recognize the [rerurn] key, so making line breaks requires the artist to use unbroken strings of objects that are just more than 1/2 as wide as the Twitter text window. When separated by a space, these strings of unicode characters can't fit on the same line and are forced onto consecutive lines. That creates a "line return" and makes the objects "stack."


In the new Twitter, lines need to be a minimum of 16 or 22 objects depending on the type of geometric shape.







Stacking: 6 lines, 15 objects wide.

Works in OLD New Twitter, Fails in NEW New Twitter.



As I mentioned, different groups of unicode objects have different fixed widths. I usually work with the subset of "Geometrical Shapes" of "1-unit" width that views best on Mac and on hand-held devices like smart phones and tablets. ┏┗╋┣┓┫┛╭╰╮╯╱╲╳◯◢◤◥◣ ▔▁▂▃▅▆▇▉ ▊▋▍▎▏▕►△ and a few more + some "Miscellaneous Symbols." I think of these as "second generation" unicode objects.


To make a line break and create the kind of "stacked" images and block-writing that I do, I use 15 of these shapes in a row. Up to 29 will fit on a single line, but 15 is the only width that works in both the main Twitter window and the extended right-side-bar.


Strings of 16 to 31 "second generation" unicode objects a line break.


Strings of 22 to 43 "first generation" unicode objects make a line break.


"First generation" unicode objects are narrower, at 3/4 the width of the 2nd generation ones. They include ╔╠╚└┌┼╞╘╒╓╙╟ ░▒▓█▀▄ ║─═ and several more shapes. They work better on more PCs, view incorrectly on more Macs and mobile devices, but still read fine on many Macs & hand-helds. (I will never be able to upgrade one of my Macs from OSX 10.4.11 because it views both first and second generation shapes correctly (in FireFox 3.6.20)).


There are "third generation" shapes, too, "1-unit" wide that fit with the "second generation" objects that look wrong on my 4-year-old laptop but correct on my iPad. And situations in which less than 15 "1-unit" objects makes a line break and the narrower "3/4-unit" object read as full-width. I see people making art that looks wrong to me but where I can see what rules they are using.


I personally use a narrow subset of second generation unicode shapes at the same line width (15) most of the time so that I know that the widest range of my followers can read the art "right" in as many contexts as possible (in Twitter itself, those contexts include the main window right-and-left columns, and in the status window. Other contexts include other devices (iPhone, Droid, iPad, Blackberry, etc.) and other applications (HootSuite, Seesmic, TweetDeck, etc.))


Compatibility wise, it seems like TweetDeck and BlackBerry users have the most frequent issues reading #TwitterArt—though I do see ReTweets from both of those platforms, so some users have no problem. I know that users of Safari, Chrome, IE, etc. report rendering errors, and I've looked at the art in a number of browsers.


Part 3. Make Revisions and Test Runs Before You Tweet.


While I used to just use a staging account (a "locked" account that no one follows), now I compose my art in TextEdit. Any text program will do. Then I test-tweet them in the staging account to be sure they're going to look right. It often takes a couple-few variations before the art looks complete to me, and I don't want that creative refinement process to be out there—just the "finished product." As far as using a text program or note pad, that is also the best way to archive art to access later… much easier than scrolling through my staging account.


Part 4. Randomly


The More You Know: ASCII is a small subset of Unicode & ISO/IEC 10646 which ultimately contains about 100,000 characters!














16 faves
Taken on September 15, 2010