ロゴアニメの作成サンプル

 
◆ペイントショッププロのマニュアルにロゴアニメのサンプルが有りま
したので版に依って操作方法に違いはありますが今回はPSP8〜9と
Anination Shop3で作成してみました。
 
始にツールバーの新規作成ボタンをクリックして「画像の新規作成ダ
イアログボックス」を開きます。
・[画像の巾と高さ]:400×400ピクセル
[キャンバスのいろ]:[透過] 
・[イメージの種類]:[TrueColor24ビット]
・[画像の特性]:ベクター画像
上記の様に設定してOKボタンをクリックすると背景が透明の新規作成
画面が表示されます。
ツールパレットで[図形]ツールを選択し図形リストから
楕円を選び正円を描くためShiftキーを押しながらイメージ画面
の中をドラッグして直径150ピクセル位の円を描きます,そして
[オブジェクト]メニューから[整列]→「キャンバスの中央」を選
ぶと円が中央に配置されます、そしてレイヤーを右クリックして
レイヤーの複製を作成して,これを非表示にしておきます。
前のレイヤーをクリックしてツールパレットで[図形]ツール
を選択し図形リストからギアー3を選択しますが黒ギアーなので
白ギアーを使いたい時はPSP9の図形リストからギアー3を選択し
ます(この場合はjifで保存)。
ギアーの図形を先ほど作成した円の左下になる様に描きます。
(第1図)参照

 第 1 図

 

◆次はC MPANYとOを抜いたテキストを追加します。
テキストツールを選択しマテリアルパレットの前景色を「透過」
にして背景色を「黒」に設定します,イメージ内のオブジェクト
以外の場所をクリックして「テキストの挿入」ダイアログボック
スを開きます。(マウスポインタが十になった時
そして"C MPANY"とOを抜いたテキストを入力「O」の部分にはスペ
ース(2〜3位)を入力します…OKをクリックそしてギアーとテキ
ストの位置関係を第2図の様に調整します。
後から調整する場合は「ベクター選択ツール」を使って調整しま
す。また確定したテキストを変更する場合はマウスポインタの文
字が[A]に変った時クリックします。
テキストはフォントDFG顔真卿体W7サイズ24太字を選びました。
 

第 2 図

◆次にレイヤーパレットで「レイヤー1」をクリックして次に
マテリアルパレットの背景色をクリックしてマテリアルダイアロ
グボックスを開きグラデーションタブをクリックしてダイアログ
ボックスを開きます(第3図)。
次に編集(E)をクリックしてグラデーションの編集ダイアログボ
ックスっを開きます(第4図)。

第 3 図

次に「新規作成」をクリックして「新しいグラデーション」の入力
画面を開き「白から赤」と入力しOKをクリックします。
第4図に戻りグラデーションの左のマーカーをクリックしカスタ
ム(U)のカラーボックスをクリックし右隣のカラーチップをクリ
ックして白に設定します。
次に右のマーカーをクリックし、同じく赤に設定します。
次にこのマーカーを38%の位置にドラッグするか、位置フィール
ドに38%と入力します,OKをクリック。

第 4 図

 

◆次に第3図に戻りスタイルの左から3番目を選択し中心点の項目
心点の項目の横(H)と縦(V)に(30)と入力してOKをクリック。
ベクターオブジェクトのダイアログボックスをOKで閉じると
第5図の様に円が塗り潰されます。
 

第 5 図

◆次に円の上に図形を追加します…[図形]ツールを選択し図
形リストから「星1」を選択しマテリアルパレットで前景色を透
過にし背景色を白にします…其の侭円の外側からドラッグして星
の縦横が50ピクセル位になる様にします…其の後ベクター選択ル
ールに切替えて星の大きさや位置を白いグラデーションの中心に
来る様、調整します。
次にペンツールを選択すると星のオブジェクトにポイントが表示
されるのでツールオプションパレットのモードを選択してCtrlキ
ーを押しながら右と下にドラッグします…図形の無い場所をクリ
ックすると選択が解除されます(第6図)。
 

第 6 図

次にマテリアルパレットの前景色を透過にし背景色を白に設定
してin ernationalと云う[t]の部分にスペースを入れたテキス
トを追加して(文字の大きさ10)星のオブジェクトが[t]の部分に
来る様にします(第7図)
 

第 7 図

次にマテリアルパレットの前景色を透過にし背景色を黒に設定
します…レイヤーパレットから始にコピーした楕円を表示して他
は非表示にします(第8図上)…そして(第1図)の時の様に図形から
楕円を選択して(第8図下)の様に内側の円より大きい円を描きま
す…次にテキストツールを選択し属性ツールバーの配置で"中央
揃え"をオンにします、クリックした点がテキストの中心になりま
す…外側の円の上にカーソルを重ねカーソルの形がに変化し
ところでクリックします…[テキストの挿入]ダイアログが開いた
ら第8図下の様にテキストを入力します…適用ボタンをクリック
してダイアログを閉じます…第8図下の様になります。

第 8 図

◆次に第8図上の非表示を解除して"コピーベクター"内の楕円二
つを非表示にすると第9図の様になります…これで図形は一応完
成です。

第 9 図

◆次に第8図上のレイヤーパレットの"ギアー"を非表示にしてGif
イメージでエキスポートして保存します。
更に"ギアー"のみを表示して他を非表示にしてコピーし新しい"画
像"(画像を縮小して)で張付けしGifイメージでエキスポートし
て保存。
ここでAnimationShop3jを起動して今保存したGifイメージを呼
出しアニメーションを作成します…AnimationShopでワークスペ
ース内の任意の場所を右クリックし"新しいアニメーションとし
て張付け"を選択します1フレームのみ作成されます。
次に[アニメーション]メニューから[フレームの挿入]→[空のフ
レーム]を選択するとダイアログボックスが表示されるので次の
様に設定します。
◆[フレーム数];5
◆[挿入する位置(番号)];2
◆[フレームの表示間隔];10
◆[新しいフレームの設定];[手前のフレームをコピーする]
[OK]をクリックすると,同じフレームが5個追加されます…同じ様にして
"ギアー"のみのイメージを呼出し1フレームのみ作成します。
これを選択し[効果]メニューから[イメージエフェクトの挿入]を選択する
ダイアログボックスが表示されるので次の様に設定します。
◆[効果の設定]で[効果の長さ]を0.5秒
◆[効果の設定]で[フレーム/秒]を10フレーム/秒
◆[効果]ドロップダウンリストで[回転]を選択[カスタマイズ]
ボタンをクリックし[回転エフェクト]ダイアログボックスが表示
されます。[角度]を45に設定し、[余白に使用する色]で[キャン
バスの色]を選択します。[OK]をクリックすると第10図の様にな
ります。

第 10 図

◆次に第10図下のギアーアニメーションの全フレームが選択され
ている事を確認して最初のフレーム内をクリックして、上のロゴ
アニメーションの[C]と[M]の間にドラッグ&ドロップするとギ
アーが全て移動して(第11図)となります。
これで旨く動作しない場合は[アニメーション]→[フレームのプロパティ]
と[アニメーションのプロパティ]で調整し直すと動作する様になります。

第 11 図

これでロゴアニメーションの完成です。
 

BACK