グラデーションの作成と変形

Adobe Animate入門シリーズを続けましょう Adobe Animate入門シリーズを続けましょう 前回までで、ワークスペースの管理 様々な描画ツールの使い方 シンボルの作成 クラシックトゥイーンの作成方法について説明しました ムービークリップについても確認できましたね 今回はアートワークをアップグレードするための パワフルなグラデーションの使い方を紹介します 私は様々なプロジェクトでグラデーションを使用しています アートワーク、インターフェイスのデザイン これもAnimateのグラデーションで作成したデザインです インターフェイスとアニメーションをご覧いただいています これはモーターのアニメーションです Animateで最初から描きました 3Dに見えますが グラデーションで3Dに見せているだけです このポンプのアニメーションも グラデーションで3Dを模しています Animateで作成しました すべてグラデーションの効果です このグラデーションは、ビットマップからベクターに変換したものです 上の画像はビットマップです 小さいサイズでスケーラブルにするため、Adobe Animateを使い リサイズして描き直し グラデーションで元の画像を模しています 様々なグラフィックで同じ手法を使っています このランチトレイの食べ物も Adobe Animate 2020のグラデーションで作成しました では作成してみましょう 始める前に、Adobe Animate 2020の 環境設定をいくつか変更するため 「環境設定を編集」を使用します macOSでは「Animate／環境設定」から 「環境設定を編集」を選択します Windowsでは「編集／環境設定／環境設定を編集」です UIの外観を「快適」から「コンパクト」に変更して タイムラインとツールを コンパクトにします 次に、「環境設定」に戻り 「エキスパート環境設定」を選択します 設定パネルがコンパクトになります 最後に、シリーズ最初のビデオで作成した ワークスペースに戻します この状態で始めましょう ボートにはまだグラデーションは適用されていません ライブラリにある Boatをダブルクリックして 編集画面を開きます このカラーをグラデーションに変更します カラーパネルを開くと 現在は「単色」になっています これを「線状グラデーション」に変更します 下部にグラデーションと2つのカラー分岐点が表示されます 左側の分岐点が黒 右側の分岐点が白です 分岐点をクリックすると 上部の三角形が黒になり 選択されているカラーが表示されます 小さい白のセレクターをクリックすると その16進コードが表示されます 選択中の三角形は黒になります 分岐点2つのグラデーションです 分岐数と中間のカラーを増やすには 途中の分岐点をクリックして ダブルクリックでカラーを変更します 新しいグラデーションができました 削除するには、クリックして パネルの外へとドラッグします ここで必要なのは2つだけです 既に使用しているカラーでグラデーションを作成するため ここをダブルクリックすると、web対応の216色が表示されます そこからボートと同じ茶色と その濃い色を探すのは大変です そこで、パネルの外側にある ステージ上の茶色を選択します 次の分岐点でも同様におこないます まだグラデーションではなく、単色です グラデーションにするには、2つ目の分岐点をクリックするか または1つ目の分岐点でも構いません 色相、彩度、明度の スライダーで使用する色を暗くします ここでは茶色です 黄土からこげ茶色へのグラデーションができました パネルを閉じます バケツツールを選択して クリックでボートにグラデーションを適用します クリック＆ドラッグで グラデーションに角度をつけたり ボート全体に広げたりできます グラデーションの変形ツールを使用する方法もあります 自由変形ツールを長押しするか Fキーでアクセスできます グラデーション変形ツールは非常に強力なツールです グラデーションをクリックすると、中心点が表示されます グラデーションの中心位置を示しています 外側のハンドルでグラデーションを長くし または短くして、ボートの幅に合わせます 上部では、中心点をドラッグしてグラデーションを回転できます 少し伸ばしましょう 良さそうですね 明るい部分からボートの先端に向けで暗くなりました 内側も、スウォッチで同じ操作を繰り返します この分岐点をダブルクリックし ボートの内側のカラーを選択します 2つ目の分岐点でも、明度の値を暗くします このようになります パネルを閉じます バケツツールを使って、ボートの内側を塗ります グラデーション変形ツールを使い クリック、どうでしょうか グラデーションをクリックします 回転して、ボートの内側が暗くなるようにします 狭くして、トップにハイライト 内側が暗くなるようにして 奥行きを表現します ここも同様に 回転します こちらもサイズを調整し 回転します 中心点を移動して 狭くして 下部が暗くなるようにします このような感じです シートに移りましょう カラースウォッチを開き ダブルクリック 画像のカラーを利用すれば 再設定するよりずっと簡単です 今は緑から緑へのグラデーションです 次の点をクリックし 明度スライダーを下げて 緑を暗くします 基本的に、黒か白を追加して 明るさを調整し、バケツツールを選択します グラデーションを追加して、グラデーション変形ツールで 微調整します 回転して、少し狭くします 後ろが暗くなるようにします こちらも回転して 少し狭くします このような感じです 最後に線を消しましょう グラデーションができたので ボート底部の線は不要です 選択して削除します 左側も削除します 右側も削除します シートの裏側も不要なので 削除します この線も不要です 削除します ボート上部の輪郭線だけが残りました その部分をダブルクリックして 輪郭線をすべて選択します 2つのシートとボート上部の輪郭線です プロパティパネルで線の太さを変更します 3～4ピクセルの太さにしましょう ボートの上部を明るい色にします これでどうでしょうか ボートの縁に見え ハイライトを加えたことで 厚みと奥行きが感じられます プレビューしましょう ちょっとした3Dボートのように見えますね Adobe Animateのグラデーションの効果です 同じ手法で帆と水面も編集してみてください 水面では複数の分岐点を使って 濃紺から薄い青 水色から白へ さらにアルファ透明度を加えるといいでしょう また次回お会いしましょう