ＴＯＰへ
【基本知識】
立体顔文字アニメの特徴の一つである大きさに注目して見よう！！
- 掲示板やチャットに貼りつけるサイズとして、あまりにも大きいすぎる画像、画像の容量が大きいものは敬遠されてしまいます。かといって、小さすぎるとなんの画像か判別できない恐れがあります。ちょうどいい大きさはないものかな・・・
- そう考えてると、ちょうどいい大きさは縦・横30pxから40pxの間がもっともいい感じになります。若干大きさがこれよりも外れても構わないのですが、この間の大きさが好まれるようです。
例1  
- 例1をご覧ください。アニメーションさせるために多少の余白を作っていますが、この大きさなら上下左右無理がないですよね。例1では縦横40px*40pxで作成していますので、まずは、参考としてこの大きさで作ってみましょう。
【お絵描きソフトで実際に描いてみる】
いろいろなお絵描きソフトがありますがどうでしょう。このぐらいの大きさならペイントでも十分描けると思いませんか？ではペイントで実際に作ってみましょう。
※もちろん他のソフトでもいいですので使いやすいソフトで描いてみてください。
- WINDOWS98でいう「ペイント」のことです。どうもWINDOWS3.1ではペイントブラシって言ってましたけど。。。WIDDOWS98のペイントは、GIF形式やJPEG形式での保存が可能になりました。これを使えばGIF変換も出来ちゃいます。そのソフトはWINDOWSの標準ペイントソフトでして同梱されているものです。この際これでＧＩＦ変換しましょう！！
※米国ユニシス社ＬＺＷライセンスを取得しているソフトですので安心です。
ちなみに使用開始時には、GIF形式やJPEG形式の保存が出来ないようですが、一度GIF形式やJPEG形式を読みこませると、次回からは保存できるようになるようです。
- WINDOWS98のスタートボタンのプログラム
アクセサリー ペイントの手順でクリックして選択してください。
 がペイントのアイコンです。さあクリックしてソフトを立ち上げましょう！！
- 起動できましたらメニューの表示
拡大 拡大率の設定で800%を選択して拡大しましょう。
- 拡大できましたら、絵を描くキャンパスの大きさを縦横40px*40pxに調節しましょう。キャンパスの一番右下の小さい■にカーソルを合わせると矢印が出るので、それで簡単に調節ができますよ。
- では自由に描いてみてください。保存はメニューのファイル
名前を付けて保存で適当なファイル名を付けて保存してください。
例2 
例2は標準的な立体顔文字アニメの基本顔を描いた例です。いろいろ思考錯誤して描いてみて可愛く仕上げてくださいね。
影ですがあまり難しく考えないでください。影の色は黒か濃い灰色がいいでしょう。
- 出来ましたか？？
しかしながら、これだけではアニメーションできませんので、動かしたことを仮定して別にコマを作ってみましょう。（それぞれ別ファイル名で保存してください）
例3  
（ワンポイト）
コツとして、影は体が1px動いたら、影も1px動かすのが基本です。また、上に浮けば影の左右を1px狭くして、下に沈めば影の左右を1px広くすると自然に見えますよ。
（実際は影の上下も小さくなるのですがキャンパスが小さいので無視していいです）
- GIFファイルは256色に減色する必要があるのですが、使用している色数が多いとうまく減色ができない場合があります。その場合はビットマップファイルで保存して次のステップをご覧ください。
※ペイントでＧＩＦ変換の項目も参考にしてみてください。
【GIFに変換しよう！！】
現在、アニメーションができるファイルフォーマットはGIFファイルのみですので、前のステップで描いたビットマップファイル3枚の画像をGIFファイルに変換しましょう。
ビットマップファイル3枚の画像はフルカラーで保存されているはずです。GIFファイルにするには256色に減色する必要がありますが、市販のソフトではこれらの工程を一度にしてくれます。
※米国ユニシス社ＬＺＷライセンスを取得しているソフトを必ず使用すること。
- GIFに変換する場合には、背景色を透明にする機能を使って透過GIFにしてください。透過したい色を1色だけ指定できますので、背景色を指定してください。
（ワンポイト）
GIFファイルは減色をすると同時に、ファイルサイズを小さくするためにファイルを圧縮して変換されます。GIFファイルの特性として、横に同じ色が続いている場合は圧縮率が高くなります。またグローバルカラー指定をしておくと色数にあわせてカラーパレットを設定するので、使用している色数が少ないほどファイルサイズが小さくなります。
- 例4は透過GIFにした例です。
例4   
どうでしょうか？
ビットマップファイル時には灰色だった背景が、GIF変換後のファイルは背景が白色になっているでしょう。実際は白色ではなく透明色なのです。つまりHTML上で背景色を白色にしているので、その色が透けているのです。これが透過GIFなのです。
透過GIFにしておけば、画像を使うページがどんな背景色であっても問題なく使用できるようになります。是非透過GIFにしておきましょう。
（ワンポイント）
GIFファイル変換したとき、画像によって色が変わってしまうことがあります。これは、256色以上使っている画像を変換するときに、類似色に置き換わる為に起きる現象です。一旦同じソフトで256色に減色し、ビットマップ形式でファイル保存した後GIFに変換すると防げるようです。
※単純な色使いな場合、減色モードは近似値減色法がいいと思います。
【アニメーション化してみよう！！】
GIF変換した3枚の画像ですが、これだけじゃ3枚の静止画像ですよね(爆)。これをＧＩＦアニメーション加工ソフトを使って加工していきます。とはいっても、この段階までくれば画像自体は出来上がっていますので作業的には簡単です。もう少しですので頑張りましょう！！
- ＧＩＦアニメーション加工ソフトはフリーのものでも優れたソフトが多数存在します。どのソフトを使っても全然構いません。好みの操作性のソフトをお使いください。
（ワンポイント）
GIFをアニメション化するための機能しか大抵ついていませんので米国ユニシス社ＬＺＷライセンスに抵触することはないと思います。ただし出来上がり具合を参照するときに独自機能を使っている場合は、ＬＺＷライセンスに抵触する恐れがありますので、作者に確認してください。
- ＧＩＦアニメーション作成は次のような手順で行っていきます。
1. 先ほど作ったGIF変換した3枚の画像をソフトに読みこみます。
2.
サイズ・ディレイ・消去法などの設定をします。
※1.サイズとは画像のサイズです。縦横40px*40pxにそれぞれ指定します。
※2.ディレイとはコマ送りの時間設定です。数字が小さいほど速くなります。
※3.消去法とは指定したコマをどう処理するかの設定です。
3.
アニメーション画像を確認して、ＯＫなら保存します。
簡単ですが、大体の流れはこのようになります。消去法ですがコマの画像を次のコマが表示されるとき消去するか、残すかを指定しますので、立体顔文字アニメの場合は消去するように指定してください。なお、残す指定をした場合は、前の画像が残像のようになって残ってしまいます。
例5 
残す指定をした場合はこんな感じになります。変ですね。作品によって使い分けてください。
- では実際にＧＩＦアニメーションを作成しましょう。
例6 1 2 3 4
ソフトにGIF変換した3枚の画像をソフトに読み込むと、例5のように画像を並べてください。例6では1枚多いですよね。でもよく見てください。2と4の画像は同じものを使っています。別に作る必要はなく、2の画像をソフト上で複製すればいいのです。2のコマを最後に追加する事で、浮遊してるように見せることが出来るのです。
例7 
これはこれでいいでしょう。ただふわふわ感はないですよね。例6の4のコマを外すとこうなります。
例8 
自然な感じでふわふわ感が出てますよね。例7・例8は作品によって使い分けてください。
では、ディレイを速くしてみましょう。
例9 
これは例8の2分の1の速さにしました。このようにコマ送りのスピードも調節できます。
ソフトの使用方法はそれぞれの解説書をご覧頂くとして、立体顔文字アニメの作り方の手順はこんな感じです。GIFアニメーションの作り方と同じですので、簡単なものから雰囲気をつかんでみて下さい。なお先程から出てきている
もGIFアニメーションです。
※ディレイは同じ数値で設定にしていても、ブラウザーによって速さが違います。
|
