Design / Hard Typographic Artwork - 01.HUMAN編

新シリーズ「Hard Typographic Artwork」です。
キレのあるハードなタイポを使ったアートワークを、毎回テーマを設け、作成していきたいと思います。

オリジナルアートワーク

前回のアートワークのエントリで、大きな画像サイズでアップしましたが、
結構、いい感じなので、しばらく、大きなサイズで掲載していきたいと思います。
(LiteBoxで遷移せずに拡大画像を表示できるのは、テンポがいいのですが、
サイズを小さめにしないといけないので、感動が少し落ちます。)

制作手順の解説

だいたいこうゆうアートワークを作ってる方は、PhotoShopが多いですが、
私は、Webデザインも、アートワークも、簡単なメモも、すべてFlash×Fireworksで作成してます。

このサイトで公開している、DRAWシリーズや、拡張パネルを駆使して作成してますし、
それ以外にも3ds maxや、未公開ツールも、たくさんつかってます。

ざっくりとした手順は以下。

1. メイン写真を選ぶ（個人的なストックやら、素材集やら）
2. FLASHにて、ピクセルごとに色を取得し、配列にする
3. 配列をFireworksにオブジェクトとして取り込む（ここまでは、純粋にオペレーション）
4. オブジェクトをタイポに変換
5. オリジナル拡張パネル「transformer」を使用して、全体をみながら、調整していく
6. 背景やら、タイトル画像やらの、演出作業をへて完了()

写真からタイポに変換するのって、、、

結構、古典的なお題だと思いますが、だいたいコードによる生成でおわってます。
Hard Typographic Aarworkシリーズについては、
コードジェネレート半分、手による調整が半分と、いいとこどりでやってます。

未公開ツール

未公開ツールに関しては、『作って、試して、直して、試して』の繰り返しをしてる最中なんで、
ツールが落ち着いてきたら、公開します。
でも8割がたは、公開してるツールつかってます。

Fireworkでアートワーク作成してます

利点

1. ビットマップ、ベクターの垣根がなく、同列にあつかえる
2. カスタマイズ範囲が広い
3. Javascriptをつかって、作業の自動化ができる

Javascriptをつかった、作業の自動化に関しては、イラストレーターでもできますが、
Fireworksの場合は、拡張パネルのように、Flashで入力インターフェースを作成し組み込めるので、
汎用的に、自動化ツールが作れます。
（イラレ＝コマンドライン、Fireworks＝GUI　みたいな感じ）

そのうち、イラストレータや、フォトショップでも、できるようになると嬉しいな。

欠点

1. イラストレーターや、フォトショップと比べて、存在が地味
2. 大きな画面サイズにすると、急激に重くなる
3. いつADOBEのラインからはずれるかわからない

問題点

Fireworkをそこそこ使ってるかたは、気になってると思いますが、
ベクターオブジェクト（パスやらタイポ）をいっぱいつかってると、えらく動画が重くなります。
1000オブジェクトくらいあると、選択だけで、10秒。移動するとなると、数分くらいの待ち時間の覚悟が必要です。

「もうこれ以上、編集しない。ここはFIX」ってところは、ビットマップ化するか、グループ化しましょう。
ここらへんの手順をクリアしないと、Fireworkで大量のオブジェクトを扱うアートワークはツラツラです。
（そこだけは、イラストレーターがうらやましいです） ■2008/07/0追記 ちょっと、スペルミス、修正しました。