ちょっと大きいアスキーアートの作り方

tag：雑記　アスキーアート　AA　

アスキーアートの作成方法について、自己流ですが纏めてみました。

用意しておくもの

• 画像
• タブレット
• Ascii Art Editor

タブレットを購入すればPhoto Shopの無料版がおまけでついてくると思うので、それを使います。

なんでタブレットが必要なの？

AAEに限らず、プログラムによるオートトレースは、画像をそのままAAに再現しようとします。
ためしにこのシーマ様の元画像を、そのままAAEオートトレースにかけてみましょう。


↑元画像です。
Gジェネスピリッツからキャプチャーして、画像を拡大した為カクカクしてます。
何も手を加えずに、オートトレースすると……↓↓↓

::::::::::::::::;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;;;:;;;;;;:;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
:::::::::::;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;:;._,,,,iiiiilllllllllllllllllllllllllliiiiii,,_.;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
::::::::::::::::;:;:;:;:;:;:;:;:;:;:.,,,iiillllllllllllllllllllllllllllllllllllllllllllllllllllliii,,_;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;:;:;:;:;:;:;:;:;:;:;:;:;:;;iiiiilllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll!!!llliii,,;;;;;;;;;;;;;;;;;;;;;;　　 ;;;
:;:;:;:;:;:;:;:;:;:;:;:.,iiilllll~;;ﾞ!!ll!!!!!llllllllllllllllllllllllllllllllllllllllllllﾞ,,,,,lllllllii,.;;;;;;;;;;;;;;;;;....;;;;;;;;;;
;:;:;:;:;:;:;:;:;:;,iilllllllllllllllllllllllliiiiilllllllllllllllllllllllllllllﾞﾞ,ﾞ´ﾞﾞﾞ_,llllllllllllllllll;;;;;;;;;;...;...;;;;;;;;;;;;;
;:;:;:;:;:;:;:._,lllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllli;;;;;;;.....;;;;;;;;;;;;;;;;
;:;:;:;:;:;:;_llllllllllllllllllllllllllllllllllllllllll!!!!!!!!!!llllllllllllllllllllllllllllllllllllllllllllll...;..;;;;;;;;;;;;;;;;;;;;
;:;:;:;:;:;;;llllllllllllllllllllllllllllllllllllllllﾞ":: : : : :::'!lllllllllllllllllllllllllllllllllllllllllll;;.;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
;:;:;:;:;:;;.lllllllllllllllllllllllllllllllllll!ﾞ;;::: : : : : : ::..!llllllllllllllllllllllllllllllllllllllllll;;;;;;;;;;;;;;;;;;;;;;;;;;
;:;:;:;:;:;;;ﾞﾞ!lllllllllllllllllllllllll";;;;;;::: : : : :: 　 ;;.;!!llllllllllllllllllllllllllllllllllllllll,;;;;;;;;;;;;;;;;,,iiiii
;:;:;;;;;;;;;;;;;ﾞﾞ!lllllllllllllllllll,,,llllliii;:: ::;:;:.lll!llllil..;''lllii!ﾞﾞ!!lllllllllllllllllllllllllllllll.;;;;;;;;iiiilllll
;:;:;;;;;;:;;;;;;;;;;;..ﾞﾞ!!!lllllllllﾞﾞﾞﾞﾞﾞﾞ´;::: : ::;:;;;;;;~゛::::.::.:;:;:;;lllllllllﾞﾞﾞllllllllllllllllll,,;;;;;
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ﾞ!lllll;;:: : ::;;;;;: : : : : : : : : : : :::;;lllllllll!.;;lllllllllllllllllllli;ililllllllllll
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;llllll!;:: : :;:.;;:: : : : : : : : : : : ::;:;lllllllllliilllllllllllllllllllllllllll
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;.illllllllli.::.::.::;::::: ::: : : : : : : : : :;:;illlllllllllllllllllllllllllllllllllllllllllllllll
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;illlllllllllll,,:: : : ;:.....、;::::: : : : ::;:;;lllllllllllllllllllllllllllllllllllllllllllllllllll
;;;;;;;;;;;;;;;;;;;;;;;;;;;;.,llllllllllllllllii,_: : :::;:;::: : : : : ::;:;;;;;;lllllllllllllllllllllllllllllllllllllllllllllllllll
;;;;;;;;;;;;;;;;;;;;;;;;;;..lllllllllllllllllllllllii_:: : : : : : ::;:;;;;;;:;:;,llllllllllllllllllllllllllllllllllllllllllllllllllll
;;;;;;;;;;;;;;;;;;; 　 iilllllllllllllllllllllllllll..;; 　 ;;;;;;;;__,,,,iiiilllllllllllllllllllllllllllllllllllllllllllllllllllll
;;;;;;;;;;;;;;;;......;;,,llllllllllllllllllllllllllllllliiii,,,iillllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
;;;; 　 ;;;;;.;;..._llllllllllllllll!!ﾞﾞ~,,,llll!.｀lllllllllllllllllllllllllllllllllllllllll!lllllllllllllllllllllllllllllllllllll
.._,,,,,iiiiiiiii''ﾞﾞﾞﾞﾞﾞllllllllllllllllllllllllllllliii,,;;;'ﾞ!ﾞlllllilllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
_,ﾞlll!llllllllli丶;;;;;ﾞlllllllllllllllll,l!llllll!ﾞﾞﾞ;;;;;.ﾞ!!!lllllllllllllllllllllllllllllllll!lll!lllllllllllllllllllllllllll
lllllllliilﾞllllliiii,,,＿.!llllll.ﾞllllll!;;;!lll_;;:;;;;;;;;;;;;.,lllllllllllllllllllllllllll!!!!ill!!lllllllllllllllllllllllllll
;;;;;;;;;;llllllllﾞ~ﾞﾞﾞﾞﾞﾞ;;;!!lll,;;!!lll;,,_ﾞ!ll!;;;;;;;;;;;,iillllllllllllllllllllllllll!ﾞ";;;;;'lllllllliilllllllll
;;;;;,　llllllll;;;;;;;;;;;;;;;;;'ﾞ!l;;;;ﾞ!lilll;;llll;;;;;;;;;.,llllllllllllllllllllllllllll!;;;;;;;;;;;;!!!!llllllllllllllllllllllll
;;;;;|,iiil!!ﾞ!l,,,,,,＿;;;;;;;;;;;;;;;;;ﾞ!llllll!!;:;;;;;;;illllllllll!llllllllllll!ﾞ";;;;;;;;;;;;;;;;;;;;;;ﾞﾞ!llllll
,,,ill!!~;.;;ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ!ﾞ;;;;;;;;;;;;;;;;;~!lll";;;;;;;;llllllllllll,llllll!!ﾞ;;;;;;;;;;;;;:;:;:;:;:;:::.::.;:,,llllllllllllllll
ll!!;;;;.;;|;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;llllll!!!!ﾞﾞﾞ´;:;:;:;:;:;:;:...,iiiiiiiiiiiiiiiiiillllllll
´;;;;;;;;.;;;iiiii,,,,,_.;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ﾞlllll;;;;;;;;;;;;;;;;;;;;;;;;;;;;￣~ﾞﾞﾞﾞlllllllllllllﾞlllllllllll
;;;;__,,,,,,illlllll!!lll!lllliiiii,,_,;;;;;;;;;;;;;;;;;;;;;;;;;;!!llii_;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iilllllllllllll
,,,,ﾞﾞﾞﾞﾞ!!lllllllllllllllliilllllllllllli,,_;;,,,;;;;;;;;;;__,,,,,,llll,,,,,,,,,iiiiiiiiiiiiiiiiiiiiiilllllllllllllllllliilll
llllllllllllllllllllllllllllllllllllllllllllllll,,ill;;;iiiillllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
lllllllllllllllllllllllllllllllllllllllllllll!llllllﾞﾞﾞllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllllll
ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ

比較のために、こちらに手を加えたシーマ様を貼り付けると……

　　　　　　　 　 　 　 　 　 　 ＿____
　　　 　 　 　 　 　 　 ,..-‐'"´　　　￣ﾞﾞ" -..,,
　　　 　 　 　 　 _..-'´　　　　　　　　　　　　 ｀ゝ､
　　　　　　　 ／ 　　　　　　　　　　　　　　　　　 ｀'､
　　　　　　／　　　　　　　　　　　　　　　　　　　　　ヽ
　　　　　./ ::.::.　　　　　　　　　　　　　　　 　 　 　 　 ヽ
　　　　 /::::::::::::::　　　　　　　 　 　　　　　　　　　　　　 ｌ
　　　 ./;::::::::::::::::::::::::　　 　,.. -　-.:i;:::::::: 　 　 　 　 　 　 !
　　　 .!::::::::::::::::::::::::::::::::::./ 　　　　 .ｌ::::::::::::::　　　　　 　 ..ｌ
　　　 ',,::::::::::::::::::::::::::::､./ 　 　 　 　 ヽ::.::.::::::::::::: ::.::. ::.::.::::.ｌ
　　　 .:.ｌ,::_;::::::::::::::::::/　ﾞ　　　　_..-‐'":＼、:::::::::::::::::::::::::::::::.!
　　　　 : ".ｌ.::::::::::::::/.iﾆj　　 　:::::‐/ﾞ'￣" ｀'‐:::::::::::;:;::::::::::::::',
　　　　　　 .ﾞ.ｰ''ｰ､.! .´´ .､　　 　 　￣　 : :;:|::::::::,'´ !::::::::::::::|
　　　 　 　 　 　 ､ ',　　　,!　　　　　　　　 :::|:::::::::!:/;::::::::::::::::l
　　　 　 　 　 　 !　.ｌ　　 ′　　　　　　　 : ::!::::::::|":::::::::::::::::::.!
　　　　　　　　　!　　ｌ,　　　　　　　　　　 : ::|::::::::,!:::::::::::::::::::::::l
　 　 　 　 　 　 !　 .:.lヽ　　 .ー''　　　　　,ﾉ'|::::::::|:::::::::::::::::::::::::',
　　　　　　　　 l　 　!::::ヽ　　　　　 　 ,／:::.|::::::::l;::::::::::::::::::::::::::',
　　　　　　　　 !　 :::!:::::::::ﾞl-,,,　　_,／゛;:,..‐,!:::::::,!::::::::::::::::::::::::::::.!
　　　　　　　 /lﾞ　 ::｝:::::::::i ､'''｀-―ｰ'',ﾞ..-',!::::,i;:l、:::::::::::::::::::::::::::.!
　　　　　　 ./ .|　 : |::: 　 .!i‐ﾐ''ｯ,! ,,''ﾞﾞ,.. ‐/:::/;::l:.ゝ-,:::::::::::::::::::::::l
　　　　　 ._,./ '!　　ｌ .. ‐'" ',,,.`":! .',./ :::./:::/;:::,!:,,_;::::ﾞ'ｰ､、::::::::::::l
: -ｰ''''ﾞﾞﾞﾞl _..- .|　　l |　　　　,./ :!　../ ﾞ/:::/;:::::.!:::::::ﾞﾌ'- ,,,｀''ｰ..､;:',
　　　　　l、　　',　｜|　　　.|゛　 l　 : ./ :,i"',:::::lﾞ　 :/::::::::::::｀''-､､｀''ｰ､、
　　　　　　,ﾞ;;;;､ ヽ | .',　　 .,!　 .,!　 ,i/:./ 　.ｌ::/　./ 　::.::.:::::::::::::::;:lﾞ''ｰ'′
　　　　　,'　　　　ﾞ'il、.ｌ,　　.!　 .!　.i!/:/　　 .!/ ./　　　 i;;一''''''ﾞﾞ゛:::::::::
　　　　, .,!　　　　　　 .ヽ　.|　.,'　 ! |:/　　　" ,,'　　　　　 ｀''‐:::::::::::::::::
　 . ／ ._,,二ﾆ;;　　　　　ヽ,〉 /　 | lﾞ:|　　　 ./ 　　　　　　　 ! ,i:::::::::::::
　./ 　 'i　　　　　　　　　　　/　 .│,!._,,, ／ 　　　　　 .＿,,,/ l　 　:::
　　　　 ヽ,,_　　　　　　　　 /　　 .!::| 　 　 　 　 　 ｀-｀-ｯ　 ,!
　　　　　　 . ｀ﾞ''ｰ､、　　　./　　　.ｌ:',　　　　　　　　　　/ 　/
　.,i--､、　　　　　 .｀'､　　ｌ　　　　 ﾞ'ゝ　　　　　　　_,..ヾ　 /
　.|　　 .｀''ｰ- ....,,,,,_　 ',　/　　,./ ''''^ﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞﾞ￣￣　　　　,!
　 ﾞ'-､ 　 　 　 　 　 ｀´ │　.'ﾞ,,　　　　　　　　 　 　 　 　 ',
　　　　　　　　　　　　　 ﾞ

明らかに違いますよね。
どう、手を加えたかといいますと、必要な線を書いて、影を塗っただけです。画像を見た方が早いと思うので見比べてみてください。



絵が上手い人が手を加えれば、もっと美人になると思います。
で、この線を引く作業ですが、こればっかりはマウスではかなり時間がかかってしまいます。無くても出来ることは出来るんですが、やはりタブレットがあった方が望ましいです。

タブレットを購入するとフォトショップの抱き合わせが着いてくると思います。デジカメとか、スキャナを購入してもついてくるおまけなのですが、 AAを作るのに必要な機能はレイヤーとブラシツールだけですので、十分使えると思います。

トレースする

先ずはアスキーアート化したい画像を読み込みます。

レイヤーの不透明度を選択して、半透明にします。70%ぐらい。
元の絵の上にレイヤーをもう1つ追加します。ここがトレースする線を描く作業レイヤーになります。

基本的には、必要になる線をブラシツールを使って上からなぞるだけです。間違えたらCtrl+Zでやりなおし。
なれないうちはタブレット独特のすべりと言うか、思った位置に線が引けなかったりすると思いますが、すぐ慣れます。

これから新たに購入されるのであれば、 がお勧めです。タブレットに画面がついていて、編集画面がそこに表示されるので、直接書いているのと同じ感覚でお絵かきが出来ます。

線は少し太めで、色は000000……真っ黒ですね。AAEにはこれの方が認識しやすいみたいです。

必要な線が全てなぞれたら、次は影を塗り塗りしていきます。
色は999999かCCCCCCが比較的綺麗なAAにしてくれる暗さになります。それ以上明るいと認識してくれなかったり、lllllだらけになって、これが意外と見苦しい。ロゼットで確認済みです。

と言うわけで、999999からCCCCCCの間を使われることを推奨します。もしくは両方使って白、灰、暗い灰の三色……＋線の黒で4色ですか。これ以上色を増やす意味もあんまりないです。

出来上がったらWeb用に保存して、アスキーアートエディターのオートトレースに読み込んで実行してみてください。

その前に999999ってなにさ

色の指定のことです。上から二桁ずつ、赤の99、緑の99、青の99をそれぞれ意味します。数字が大きいほど明るくなり、小さいほど暗くなります。

最大は255なのですが、コンピューターは16進数で処理しているのでFFになります。000000が黒で、FFFFFFは白です。

Photoshopですと、画面の右にあるカラーパレットのR、G、Bがそれぞれ赤、緑、青になります。

CCCCCCはR204、G204、B204ですね。

風景写真や動物をAAにしたい

この場合も基本は全く同じです。
欲しい輪郭をブラシツールでなぞっていって、出来上がったら保存してポン。です。

ブログにAAを貼り付けたらずれた

もしくは、改行が変なところに入ったり、行間が大きかったりして綺麗じゃない。って事があると思います。

もしブログのカスタマイズが出来るのであれば使用しているテンプレートのスタイルシートに下記を入力してみてください。 入力先は本文を表示しているクラスとかタグの部分が望ましいです。

font-size:12pt; line-height:18px; font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif; padding: 0 2% 2em 1em;
意味わかんねっすｗｗｗｗﾌﾋﾋｗｗｗｻｰｾﾝｗｗｗ
って方は、こっちをとりあえずテンプレートのスタイルシートの一番下に貼り付けてください。

div.aa{ font-size:12pt; line-height:18px; font-family: "Mona","IPA MONAPGOTHIC","MS PGothic","ＭＳ Ｐゴシック","MS Pｺﾞｼｯｸ","MS Pゴシック",sans-serif; padding: 0 2% 2em 1em; }

で、上のものをコピペしてもらった後、AAを貼り付けるときに<div class="aa"></div>の間にAAをコピペしてください。

以下コピペ用簡易テンプレ <div class="aa"> ---- ここにAAを貼り付けてください。 ---- </div>

それでもまだずれる場合は、AAがでかすぎる可能性があります。画像のタテヨコを小さくするか、手作業ではみ出ている部分を消すか……あとはテンプレートを変更してみてください。 3カラム⇒2カラムにするだけで保存できるものが変わってくると思います。

横幅を460ピクセル以内に押さえておけば、ほぼ全てのブログで保存が可能とは思います。

ブログのテンプレートがいじれねぇぜ！　って所を借りられているのであれば、素直にお引越しされた方が良いかもしれません。 お引越しをされるのであればはてなダイアリーがお勧めです。 と言うのもですね、はてなダイアリーにはaa記法というイカれた素晴らしい機能がありまして。 上記のような面倒なことを一切しなくても綺麗にAAが貼り付けられます。

ちっちゃいのを作りたい！

申し訳ない。
正直オートトレースで小さい画像を自動的にAA化した場合、100%に近い確立で難解なものが出来上がります。。。

小さいものは手作業でお願いします。その方が絶対綺麗だし可愛いです。

詳しくはクマでも分かるトレースAAの作り方をご参考にされてください。

参考

• アスキーアートエディター
• クマでも分かるトレースAAの作り方
• AA index@Harmonia!!
• はてなダイアリー
• aa記法

関連

• アスキーアート index
• BLEACH
• ケンイチ
• ガンダム：MS
• ネウロ