こんにちは。私はステラモリスです。チュートリアルへようこそ。 Clip Studio Paintでアニメーションキーフレームを使用して、アニメーションに興味深い効果を作成する方法を紹介します。テキストや画像で使用できます。

 

このチュートリアルを作成することを選択した理由

しかし、最初に、私がこのアイデアを思いついた方法と、それについてチュートリアルを行うことにした理由を皆さんと共有したいと思います。当初、別のトピックについてビデオチュートリアルを行う予定でしたが、ビデオ編集アプリの検索には本当に多くの時間がかかりました。これには、機能、使用方法、アプリの使用中にユーザーが抱えていた一般的な問題の調査が含まれ、どの機能を取得するかを絞り込むのに役立ちました。それらのほとんどは購入したバージョンでのみ利用可能な機能を備えていますが、私は本当に無料または本当に手頃な価格のものを探していました。私は自分のビデオをプロフェッショナルで面白いものに見せたかったのです。これを実現するのに役立つアプリが必要でした。多くの比較と分析の結果、私は1つの特定のアプリを決定しました。アプリに名前を付けるつもりはありません。これまでのところかなり良いですが、私はまだ私を悩ませている1つの小さな問題に遭遇します。画像をインポートして、上に移動して画面に表示したいと思いました。縦向きの画像で、YouTubeの動画は横向きなので、ズームインしてから下から上に移動すると、画像全体を表示できると思いました。しかし、トランジションエフェクトを適用すると、画像の中央領域の一部しか表示されません。そのため、画像の上部と下部が含まれていなかったため、画像全体が表示されませんでした。画像全体を見せたかったので、これはイライラしました。そこで、クリップのヒントに進んで、他のヒント、特に最初に計画していたのと同じトピックのヒントを確認しました。次に、「キーフレーム」というトピックのチュートリアルに出くわしました。それを読んだ後、Clip StudioPaintでこのエフェクトなどを作成できることにすぐに気付きました。次に、これらの効果をどのように作成したかについてのチュートリアルも行うという別のアイデアを思いつきました。たぶん、そこにいる誰かが私のものと同様の問題を抱えていて、Clip StudioPaintも持っています。

 

使用するハードウェアとソフトウェア

このチュートリアルは、Samsung Galaxy Tab S6LiteのGalaxyStoreのClipStudioPaintアプリを使用して作成されました。 Galaxy Storeからダウンロードしたアプリには、このチュートリアルが使用して作成された6か月間の無料オファーが付属しています。この特定のデバイスへの投資の主な決定要因の1つとして、タブレットとClip Studio Paintアプリの両方での経験を本当に楽しんでいます。それは、Clip StudioPaintを使用できることでした。私が使用しているCSPのバージョンはClipStudio Paint EXなので、タブレットで25フレームより長いアニメーションを作成することができます。皆さんも試してみてください。

 

アニメーション用のCSPドキュメントの設定

まず、Clip Studio Paint（CSP）をアップアップしてから、[ファイル]> [新規]に移動します。ダイアログボックスが表示されたら、パラメータを入力して[OK]をクリックします。新しい空白のキャンバスが表示されます。寸法を変更する場合は、[編集]> [画像の解像度を変更]に移動します。ダイアログボックスが表示されたら、変更を加えます。

 

私は通常、どのプラットフォームで共有するかを念頭に置いてディメンションを作成します。たとえば、YouTubeビデオで使用する場合、YouTubeのアスペクト比は16：9になります。

 

アニメーションは、アニメーションフォルダを使用することでCSPで可能になります。ただし、キーフレーミングは通常のレイヤーとアニメーションフォルダーの両方で使用できます。このチュートリアルでは、アニメーションフォルダーではなく、簡単にするために通常のレイヤーを使用します。したがって、通常のように、レイヤーパレットの上隅にある[新しいラスターレイヤー]アイコンをクリックするか、[レイヤー]> [新しいレイヤー]> [ラスターレイヤー]に移動して、新しいレイヤーを作成します。

 

その後、通常はすべてのレイヤーが表示されるレイヤーパレットと下のタイムラインパレットに新しいレイヤーが表示されます。タイムラインパレットが表示されない場合は、[Windows]> [タイムライン]に移動します。ドロップダウンメニューのタイムラインオプションの横にチェックマークが付いているはずです。横にチェックマークがない場合は、クリックすると追加されます。

 

これで、タイムラインパレットがかなり空白に見え、作成したレイヤーがそこにないことがわかります。また、そこにあるボタンアイコンのほとんどは灰色であり、クリックできるボタンアイコンはクリックしてもアクションを実行しません。これを修正するには、[アニメーション]> [タイムライン]> [新しいタイムライン]に移動して新しいタイムラインを「作成」する必要があります。または、タイムラインパレットの左上隅にある[新しいタイムライン]ボタンをクリックすることもできます。

 

[新しいタイムライン]ダイアログボックスがポップアップ表示され、タイムラインの名前、フレームレート、再生時間などを指定できます。戻ってこれらに変更を加える場合は、[アニメーション]> [タイムライン]> [設定の変更]に移動すると、これらの変更を行うためのダイアログボックスが表示されます。

 

これで、すべてのレイヤーが、トラックとタイムライン、およびクリック可能なボタンの一部とともにタイムラインパレットに表示されます。 CSPが自動的に作成した新しいアニメーションフォルダも表示されます。不要になるので削除できます。

 

ぼやけたアニメーション？

レイヤーに何かを描いてから再生ボタンを押すと、アニメーションがぼやけて表示される場合は、解像度を72dpiに調整する必要があります。 [編集]> [画像の解像度を変更]に移動します。ダイアログボックスが表示されたら、幅と高さの値を書き留めます。次に、以下の解像度を72dpiに変更します。幅と高さの値が変更されていることに気付くでしょう。次に、それらを、書き留める前の値に戻します。 [OK]をクリックします。再生ボタンをクリックすると、アニメーションがぼやけることはなくなります。

 

あなたの画像とテキスト

レイヤーに画像を描くことができます。ただし、イメージがすでに作成されている場合は、別のCSPドキュメントから貼り付けることができます。まず、[ファイル]> [開く]に移動し、新しいドキュメントで開く画像を選択します。次に、[レイヤー]> [レイヤーからの選択]> [選択を作成]または[選択]> [すべて選択]に移動します。次に、[編集]> [コピー]に移動します。次に、前のドキュメントに戻り、[編集]> [貼り付け]に移動して貼り付けます。画像のコピー元のドキュメントを閉じることができます。

 

イメージをCSPにインポートする場合は、[ファイル]> [インポート]> [イメージ]に移動します。次に、必要なファイルを選択します。これで、キャンバスに画像が表示されます。

CSPでテキストを作成する場合は、ツールパレットの[テキスト]アイコンをクリックし、ツールのプロパティパレットを使用してテキストの設定を調整します。次に、キャンバスをクリックして入力を開始します。新しいテキストレイヤーがテキストとともに表示されます。

 

キーフレームとは何ですか？どのように機能しますか

キーフレーミングは、コンピューターアニメーションで使用される手法であり、ソフトウェアに任せて、あるキーフレームと別のキーフレームの間をスムーズに移行します。

 

CSPでキーフレーミングを行うには、最初にそのレイヤーでキーフレーミングを有効にする必要があります。これを行うには、[アニメーション]> [トラックの編集]> [このレイヤーでキーフレームを有効にする]に移動するか、タイムラインパレットの[このレイヤーでキーフレームを有効にする]ボタンをクリックします。

 

これを行うと、タイムラインパレットの[キーフレームの追加]、[キーフレーム補間]、および[キーフレームの削除]ボタンをクリックできるようになります。

 

[キーフレームを追加]ボタンをクリックすると、タイムラインの現在の位置にひし形のアイコンが表示されます。このひし形のアイコンはキーフレームです。クリックしたときに行われた設定がすべて保存されます。

 

キーフレームが追加されると、オブジェクトサブツールをクリックしてから画像またはテキストをクリックすると、変換用の長方形のフレームが画像またはテキストの周囲に表示されます。このツールは、画面の左側にある[ツール]パレットに移動し、[サブ]ツールパレットを選択して、[オブジェクト]サブツールをクリックすると表示されます。長方形のフレームを変更することで、画像やテキストのサイズを調整できます。オブジェクトサブツールのツールプロパティパレットに移動すると、「変換」と「レイヤーの不透明度」という見出しと、それぞれの右側にチェックボックスが表示されます。変換チェックボックスがチェックされていることを確認してください。さらに、変換見出しの横にある「プラス」記号をクリックすると、追加のパラメーターが表示されます。調整可能な位置、スケール、回転角、回転中心のパラメータがあります。しかし、最も重要なのは、左側にチェックボックスが付いた「アスペクト比を維持する」という見出しがあることです。画像やテキストの移動中に誤ってアスペクト比を変更したくない場合は、このチェックボックスをオンにすることをお勧めします。

 

キーボードショートカット

以下はあなたに役立つかもしれないいくつかのキーボードショートカットです。

 

• 45度の角度で垂直、水平、または斜めに移動するには、Shiftキーを押しながらハンドルをドラッグします。

 

• Ctrlキーを押しながらハンドルをドラッグすると、画像を拡大および縮小できます。

 

• Ctrl + Shiftキーを押しながらハンドルをドラッグすると、元のアスペクト比を変更せずに画像を拡大/縮小できます。

 

• Ctrl + Altキーを押しながらハンドルをドラッグすると、中心点を変更せずに画像を拡大/縮小できます。

 

*回転中にCtrl + Shift + Altキーを押し続けると、45度の角度で回転できます。

 

私のようなタブレットを使用していて、キーボードを持っていない方は、CSPの画面の右側にある矢印ボタンからキーにアクセスできます。だからあなたは不利になることはありません。

 

現在私の知る限り、CSPは、キーフレームを使用した変換と不透明度による変更のみを許可します。ただし、それらを使用してアニメーション化する場合でも、ワークロードを軽減できます。

 

 

基本が邪魔になったので、今度はエフェクトの時間です。キーフレーミングが有効になっているレイヤーに既にある画像またはテキストで中断したところから始めます。

 

効果＃1-移動

レイヤー上の画像またはテキストを使用して、タイムラインパレットに移動し、タイムライン内でキーフレームを配置する領域をクリックしてから、[キーフレームを追加]ボタンをクリックします。キーフレームであるひし形のアイコンが、タイムラインのその領域に表示されます。ひし形のアイコンをクリックしてから、[オブジェクト]サブツールに移動し、そのツールのプロパティパレットに移動します。 「変換」と「レイヤーの不透明度」という見出しと、それぞれの右側にチェックボックスが表示されます。変換チェックボックスがチェックされていることを確認してください。次に、カーソルを長方形の枠の近くに移動して、カーソルが移動アイコンに変わるようにします。次に、画像を移動先の場所、つまり左または右のどこかにドラッグします。現在の位置から直線で移動したい場合は、Shiftキーを押しながらドラッグします。次に、タイムラインの別の領域に移動して、別のキーフレームを追加します。キーフレームをクリックし、オブジェクトサブツールを使用して同じことを行いますが、画像またはテキストを移動先の場所に移動します。再生ボタンを押すと、2つの位置からスムーズに移行します。

 

これを垂直に行うには、同じ手順を実行しますが、画像を左右ではなく上下に移動します。同じ手順が対角線にも当てはまります。 Shiftキーを押しながら斜めにドラッグすると、45度の角度で移動することもできます。また、ショートカットなしでフリースタイルにすることもできます。以下の例を見てください。

効果＃2-異なる速度

キーフレームを追加すると、タイムライン上のセル間のセルの量によって、キーフレームが一方から他方に移行する速度が決まります。異なる速度を作成する別の方法は、キーフレームの間に等間隔で配置し、キャンバス上でそれらの間に異なるスペースを配置することです。後で使用する場合は、タイムライン上の領域にキーフレームを作成し、画像またはテキストを、タイムラインのその領域のキャンバス上にあると思われる場所に、必要な速度で移動します。キーフレームをさまざまな距離だけ離して配置することで作成されたさまざまな速度の比較を下に表示できます。

 

また、徐々に増減する速度を作成することもできます。これを行うには、複数のキーフレームが必要になります。各キーフレーム間の速度は異なる必要があります。それらは、速度が増加または減少するか、あるいはその両方である可能性があります。これは、以下の例と、それがビデオをより面白くする方法で確認できます。

 

非常に速い速度を得るには、キーフレームを互いに非常に近くに配置する必要があります。

これは、以下のグリッチ効果で確認できます。

 

効果＃3-回転

キーフレームがすでに追加されている状態で、別のキーフレームを作成します。次に、この2番目のキーフレームをクリックし、オブジェクトサブツールを使用して画像を回転させて上下逆にします。画像の中心を変更するには、Altキーを押すと、中心を中央から目的の場所に移動できるようになります。 Ctrl + Shift + Altキーを押しながら回転すると、180度の角度で完全に逆さまに回転します。次に、現在ある2つのキーフレーム間のセルの「数」を数えます。次に、この「セル数」だけ離れた別のキーフレームを追加します。この3番目のキーフレームをクリックしてから、もう一度[オブジェクト]サブツールを選択し、前述のキーの組み合わせを使用してさらに180度上に回転し、円を描くように移動します。最後に、再生ボタンを押すと、キーフレームからキーフレームにスムーズに完全に回転するのがわかります。繰り返しになりますが、速度はキーフレームが互いにどれだけ離れているかによって決まります。したがって、速すぎたり遅すぎたりすると思われる場合は、戻ってキーフレームをタイムラインの別の領域にドラッグして速度を調整してください。

 

効果＃4-ズーム

必要な距離だけ離れた2つのキーフレームを追加します。キーフレームのいずれかをクリックしてから、オブジェクトサブツールを使用してサイズを拡大または縮小します。再生ボタンをクリックすると、画像またはテキストが大きくなったり大きくなったりします。特にキーボードショートカットを使用して、さまざまな種類のズーム効果を作成できます。

 

効果＃5-フェード

2つのキーフレームを追加します。 2番目のキーフレームをクリックしてから、オブジェクトサブツールを使用してキャンバス上の画像またはテキストをクリックします。ツールプロパティパレットに移動し、[レイヤーの不透明度]見出しの横にあるチェックボックスをクリックします。スライダーを動かして不透明度を調整します。再生を押すと、画像またはテキストが2番目のキーフレームで徐々に不透明になります。速度について説明しているエフェクト番号2の情報を使用して、フェードの速度を変更することもできます。以下に例を示します。

 

効果＃6-消える/再び現れる

注：「消える」とは、画像またはテキストがキャンバスに表示されなくなることを意味します。同様に、「再表示」とは、画像またはテキストがキャンバスに表示され始めることを意味します。

 

画像またはテキストがタイムラインの最後まで表示されないようにするには、カーソルが移動アイコンに変わるまでそのトラックのタイムラインの最後にカーソルを合わせ、タイムラインの現在の位置から停止させたいより近い領域。これで、[再生]をクリックすると、画像またはテキストがアニメーションの最後まで表示されなくなります。

 

これを行う別の方法は、キーフレームの後にキーフレームを作成して、後で非表示にすることです。次に、このキーフレームを前のキーフレームに非常に近づけます。次に、オブジェクトサブツールに移動し、ツールプロパティパレットで、[レイヤーの不透明度]見出しの横にあるチェックボックスがオンになっていることを確認します。不透明度がゼロになるようにスライダーを動かします。これで、再生ボタンを押すと、画像またはテキストが画面にすぐに表示されなくなるはずです。色あせている場合は、キーフレームが互いに極端に接近していないことを意味します。

 

画面に表示を開始するという前の効果の逆を行うには、同じ手順を実行しますが、前のキーフレームの後に不透明度がゼロのキーフレームを配置する代わりに、その前に非常に近くに配置します。

 

これは、いつでもどこでも実行できます。それは最初、中間、または最後にある可能性があります。彼らは両方を行うことさえでき、消えて再び現れることができます。

下でグリッチインおよびグリッチアウトするラインをアニメーション化する際に、これがどのように便利であるかがわかります。

 

効果＃7-自由変換

オブジェクトサブツールを選択し、モードを設定して変換を解放します。 CSPで作成したテキストの場合、無料の変換オプションは使用できません。テキストをラスタライズするか、レイヤーを画像素材に変換する必要があります。ラスタライズするには、[レイヤー]> [ラスタライズ]に移動します。画像素材に変換するには、[レイヤー]> [レイヤーの変換]に移動し、レイヤータイプを[画像素材レイヤー]に変更します。その後、長方形フレームのエッジを少し移動して、このレイヤーでキーフレームを有効にします。これにより、キーフレーミング中に自由に変換できます。これを実現するには元の画像を変更する必要があるため、変換する前にレイヤーを複製することをお勧めします。そうすれば、自由な変換が有効になったら、複製を参照として使用して、複製にもう一度似せることができます。オブジェクトサブツールを再度選択してツールのプロパティパレットを見ると、エフェクト番号1で説明した「アスペクト比を維持する」という見出しがここで長くなっていることがわかります。そのため、キーフレーミング中に自由な変換を実行している間は、画像またはテキストのアスペクト比を維持することはできなくなりました。もう一度複製を使用して、参照として使用することでこれを支援できます。これで、いずれかのキーフレームで自由変形すると、再生ボタンを押すと、画像またはテキストが徐々に自由変形するのがわかります。これを使用して、次のようなクールな効果を作成できます。

 

効果＃8-スキッシュ

このエフェクトは、キーフレーミング中にフリートランスフォーム機能を使用して作成されます。したがって、上記の効果番号7の手順に従って、画像またはテキストの複製の作成も含むキーフレーミング中に自由変換を有効にします。ただし、2つのキーフレームがすでにタイムライン上に適度な距離を置いてスキッシュ効果を作成するには、2番目のキーフレームを自由変形して、高さは減少し、幅は増加します。また、下端の長さを上端より長くし、側面の端を内側に傾斜させます。 3番目のキーフレームを追加し、2番目のキーフレームに似せます。ただし、toエッジと下端の幅が少し小さく、サイドエッジの高さが少し高く、内側への傾斜が少ない点が異なります。 4番目のキーフレームを追加し、複製を参照として使用して、最初のキーフレームに似せます。次に、5番目のキーフレームを追加しますが、高さを少し高くし、幅を少し広くします。次に、6番目のキーフレームを追加し、もう一度、複製レイヤーを参照として使用して、最初のキーフレームに似せます。再生ボタンをクリックすると、画像またはテキストが下向きに押しつぶされてから上向きに押しつぶされます。スクイーズは好きなだけ追加でき、心臓が望むだけダイナミックに追加できます。以下に例を示します。

 

スライドショー

これが完成したエフェクトのスライドショーです。いくつかの効果を組み合わせると、本当にクールな結果が得られることがわかります。

著者からの言葉

時間を割いて私のチュートリアルを読んでいただき、ありがとうございます。これがお役に立てば幸いです。

 

私はそこで最も活動的であるため、DeviantArtで私を見つけることができます。