アニメ署名を作ろう


アニメサンプルの 「万年筆のアニメ署名」 の作成手順です

万年筆アニメ

アニメ署名のコマ画像作成には Windows標準の【ペイント】が便利です。
【ペイント】のように背景透過での合成貼り付けができないJTrimでは
文字の上に筆記用具を重ねていく時に工夫が必要で頭を使います。
今回は、筆記用具の絵フォントを使って【文字入れ】で作ってみましょう。
(時間がない時は手間が省けるペイントでの作成がオススメです)

薔薇ペンのアニメ署名 >>

手描き風フォント

クリックで拡大します ↑

<筆記体フォントについて>

アニメ署名は、使う筆記用具に合わせた手書き風のフォントが似合います。
あらかじめインストールされている筆記体フォントは各パソコンによってさまざまですが、 Script や Handwriting という名前が付いているフォントは手書き風のフォントです。
私のパソコンに入っていた筆記体フォントの一部を紹介します。

画像 11

<JTrimヘルプより>
アンチエイリアス、不透明度は画像が24ビットカラーの場合のみ指定できます。  また、ダイアログが表示されているプレビュー状態では反映しません。

<文字入れのアンチエイリアスについて>

アンチエイリアスは曲線のギザギザを滑らかに見せる機能ですが、 ドットの間に中間色のドットを配置するために文字が滲んだように見えることがあります。
フォントサイズが小さい場合はチェックを外したほうが文字がくっきりとしますが、 フォントの種類やサイズによってギザギザが目立つ場合は、チェックを入れると滑らかに仕上がります。

今回のサンプルでは筆記用具が万年筆なので細い線のほうがいいためと、塗りつぶしがしやすいように チェックを外して文字入れしました。

画像 15

万年筆が上下に動いているように見せるために、 前とはちがう高さに次の万年筆がくるようにしましょう。

<筆記体の筆順について>

筆記体では t の横線や i の点は最後に書くので、miyakoでは i の点の部分が書き終わりになります。
アニメ署名は最後から順に文字を消しながら筆記用具を動かしていきます。
あらかじめ、筆順にそって筆記用具を止める位置(コマ画像を作る位置)を紙にメモしておくと便利です。

コマが多いと滑らかな動きになりますが、作成にもそれだけ時間がかかります。

1)
画像 2

クリックで拡大します ↑

では、さっそく作ってみましょう。
横300×縦150の白の新規作成画面を用意します。
  (サイズは署名の文字数によって調節)
はじめは背景色を白以外に設定しておきます。

【文字入れ】でアニメ署名に使う文字列を入力します。
お使いのパソコンに入っている筆記体フォント中から好きなフォントと好みのサイズを設定しましょう。
サンプルの文字入れです。

 ・フォント⇒Script 斜体 ・サイズ⇒35 ・色⇒黒
 ・アンチエイリアス⇒OFF
2)
画像 3

文字を画面左下までドラッグしてから「OK」します。

上と右には筆記用具が入るのでスペースが必要ですが、左と下はギリギリでもかまいません。

3)
画像 4

クリックで拡大します ↑

再び文字入れで、以下のように設定します。

 ・フォント⇒Wingdings 2 ・サイズ⇒45 ・色⇒黒

直接入力で、Shiftキーを押しながら数字の2のキーを押すと万年筆が入力されます。

4)
画像 5

署名文字の右側にドラッグして「OK」します

5)

画像 6

【塗りつぶし】で万年筆に色を付けます。
左ボタンと右ボタン(右クリック)の両方に色を設定して、許容範囲を調整しながらきれいに塗りつぶしましょう。

画像 8
6)
画像 16

画像 17

不要な余白をなくすために必要な部分を範囲選択し、切り抜きます。
文字の上には万年筆が入るだけの余白が必要です。
切り抜いた画像がアニメの最終コマになります。
  ツールバーの【切り抜き】ボタン → 切り抜き

1コマ目(アニメの最終コマ)が完成しました!
Giamに貼り付けるためにコピーします。
  ツールバーの【コピー】ボタン → コピー

<参考>
これから作成していく各コマは保存しないでGiamに貼り付けていきますが、心配な場合はBMPで保存しておきましょう。
 (Giamから各コマ画像の保存も可能です)

7)
画像 14

Giamを立ち上げて、ツールバーの【コマの挿入貼り付け】をクリックします。 最終コマが入りました!

背景を透過する場合は、貼り付けたあとに【透過色の使用】にチェックを入れます。
背景透過はあとからでもできますが、1コマづつの作業になるので、貼り付けながら設定してしまうと楽です。

<参考>
作成したコマを下に貼り付ける時は【コマの付け足し貼り付け】、上に貼り付けていく時は 【コマの挿入貼り付け】になります。
アニメ署名では最終コマから順に作るので上に貼り付けていきます。

8)
画像 18

【複写/移動】を使って消す方法については
肉球フォント・アニメ にも記載されています。

JTrimに戻って次のコマを作成します。

最初に鉛筆を消します。
JTrimにはペイントのような消しゴムツールはありませんが、その代用になる方法がいくつかあります。

 1)【文字入れ】で白の●、■、を消しゴムに使う
 2)白の部分を範囲選択してドラッグで【複写/移動】
 3)消したい部分を範囲選択して Deleteキーを押す
 4)   〃  【消去】または【切り取り】をする
 5)   〃  【塗りつぶし】で許容範囲100で塗る

3と4の方法では、背景色を画面の背景と同じ色(サンプルでは白)に設定して実行します。
1と5の方法では【文字入れ】や【塗りつぶし】の設定が変わってしまって不便なので、 今回は2と3の方法を組み合わせてやってみました。 細かく消す場合は2、大きくまとめて選択できる場合は3というふうにケースバイケースで方法を使い分けています。

万年筆が消えたら、あらたに【文字入れ】で万年筆を入力して i の点とペン先が重なる位置にドラッグします。
【塗りつぶし】で前と同じように塗ります。
【文字入れ】も【塗りつぶし】も直前の設定のままなので作業が楽です。

最後から2コマ目が完成しました! コピーします。
9)
画像 19

Gimaに移り、【コマの挿入貼り付け】をします。
上に貼りつきました。

【透過色の使用】にもチェックします。
10)
画像 23

JTrimに戻り、【元に戻す】で万年筆が消えた状態まで戻ります。

直前に書いた i の点を消します。

【文字入れ】で万年筆を入力し、最後の文字 O の書き終わりの位置までドラッグして「OK」します。
【塗りつぶし】で万年筆を塗っておきましょう。

最後から3コマ目が完成しました! コピーします。

Gimaに移って【コマの挿入貼り付け】→【透過色の使用】にチェックを入れます。
11)
画像 21

大体の手順がつかめたでしょうか?
これから書き始めのコマまで全て同じ作業の繰り返しになります。

 1)【元に戻す】で 万年筆が消えるまで戻る

 2)直前のコマで書いた文字部分を消す

 3)【文字入れ」で万年筆を入れて色を塗る

細かい部分を消す時に範囲選択がうまくできない場合は、【ズームイン】ボタンを押して 画面を拡大して作業をすると楽です。  うまく消せない場合は無理せずに、消しゴムツールがあるソフトを併用しましょう。

8)〜11)の手順を参考にしてコマ画像を作り Giamに貼り付けていきます。

12)

画像 20

いよいよスタートのコマまできました。
書き出しの部分が少しだけ残るように文字を消し、万年筆をのせます。

完成したコマ画像をコピーします。

13)
画像 25

Gimaに移り、【コマの挿入貼り付け】→【透過色の使用】にチェックを入れます。

全てのコマが入り、アニメ作成の準備ができました。

<参考>
サンプル作品はペンの動きに合わせて細かくコマ画像を作りましたが、 はじめのうちはもっとコマを減らしたり、Hello のような簡単な文字列で練習してコツをつかむのがいいでしょう。

14)
画像 26

【全部選択】をクリック、【ウェイト】と【消去手段】を設定します。
 ・ウェイト ⇒ 25
 ・消去手段 ⇒ 背景色でつぶす

ウェイトの数値はお好みで設定してください。
15)
画像 27

必要に応じてコマごとのウェイトを変更します。
最後のコマ、ペンを離してから書くコマ、書き終わりのコマなどは長めにすると自然な感じになります。
サンプルは以下のようにウェイトを変更しました。

 ・最終コマ ⇒ 500
 ・i の点のコマ ⇒ 50
 ・O の書き終わりコマ ⇒ 50
 ・M のコマの一部 ⇒ 20

それぞれコマを選択して数値を変えます。

16)

画像 28

ツールバーの「ビュー」ボタンビュー を押してプレビューしてみましょう。

白を透過する場合は、ビュー画面で【背景色】を白以外に設定すると透過が確認できます。

17)

万年筆アニメ
万年筆アニメ2

動きを確認したら View画面を閉じ、名前を付けて保存します。
 (必要に応じて 再設定→Viewで再確認→保存)

は〜い、完成です! (25コマ 約 15KB)

<参考>
万年筆を水平に置きたい場合は、次の手順で最後のコマを再編集します。
事前に【オプション】→【その他のオプション】から編集するソフトをJTrimに設定しておきましょう。

 1)最後のコマをダブルクリック
 2)再編集画面で万年筆をドラッグで範囲選択
 3)【任意角度回転】で水平になるように回転
 4)【シャープにする】⇒1 or 2 (回転で劣化するので)
 5)ドラッグで位置を調整
 6)再編集画面を【上書き保存】→【閉じる】

18)
絵フォントサンプル

サンプル作品に使った万年筆の他に、アニメ署名に使えそうな絵フォントを探してみました。
フォントに合わせて筆記用具を選択すると効果的です。

筆アニメ
  

ライン


=*= ちょこっと応用 =*=

文字入れの【縦書き】を使って筆記用具の向きを変えてみましょう。
春らしい写真にセットすれば、写真の上で習字を書いているように見えます。

【春】のアニメ署名

1)
画像 30

基本的な作成手順は↑と同じで、はじめに署名文字を入力します。
書道らしく行書体フォントを選びました。(HG行書体)

今回は筆記用具が右と下にくるので、文字は画面の左上に置きます。
最後は筆記用具が消えて文字だけになるように作るので、これが最終コマになります。

2)
画像 31

フォントで筆を入力し、春の書き終わりまでドラッグします。

【文字入れ】の設定です。
 ・Wingdings 2 (Shift+3)  ・縦書き  ・斜体
 ・アンチエイリアス ⇒ ON

斜体にすることで筆記用具がやや細くなります。
3)
画像 32

万年筆のアニメ署名と同じように、終わりのから文字を消しながら1コマづつ作り、Giamにセットします。
筆順の関係で、筆記用具が文字の上にきてしまうコマが1つありますが、 【塗りつぶし】と【複写/移動】を組み合わせて、文字の上に筆がくるようにします。

4)
画像 33
書き始めのコマまできました。

このあとは万年筆と同じ手順でアニメにします。

5)
【春】のアニメ署名
完成しました! (21コマ 約 30KB)

左のアニメをGiamの画面にドラッグすれば、各コマ画像と設定が確認できます。

6)
写真にアニメをセット

クリックで拡大します ↑

完成したアニメに春の写真をセットしてみました。

セットする手順は 「写真の上でアニメを動かそう」 を参照してください。

 

Tutorial TOP l  薔薇ペンのアニメ署名 >>


Copyright © We Love JTrim All Rights Reserved.
inserted by FC2 system