Introduction to Shape Layers #04 - Morphing - [After Effects/Tutorial]

Тәжірибелік нұсқаулар және стиль

This is about "morphing," the smooth switching of shapes.
There are several ways to morph, and we will introduce two of them here.
What you will learn in this video
・Morphing with the Rounded Rectangle Tool
・Correct value to put in the radius of a rounded corner
・How to convert a shape into a Bezier path
・Morphing by copying paths
・Points to keep in mind when morphing
▶ Table of Contents
00:18 What is Morphing?
00:42 Morphing with rounded rectangle
03:22 How to Morph to a Specified Shape
06:04 Pitfalls of Scaling by Deformation
06:47 Ending
Next time: Introduction to Shape Layers Part 5.
We will discuss "offset paths.
========================================
■Supplementation
There is a free script that is used as an adjunct in the video.
Please check the following video for more information.
⇒ • 作業効率が確実にアップする無料プラグイン4選...
As for "Motion Tools", it has gone from free to paid, so if you haven't installed it yet, you can download it here.
Use keyframe speed or a graph editor to slow down and speed up the process.
We have explained in the past how to create a slow and fast effect without using tools.
Use Expressions to deal with commonly used "Elastic".
◆Use Expression
Copy the expression from the document at the URL below and paste it into the property you want to bounce.
docs.google.com/document/d/1x...
Example) If you want to bounce the size...
Alt-click on the stopwatch icon in the size property.
You will then be able to enter an expression. Copy and paste the expression from the Google document above.
========================================

Пікірлер: 67

  • @user-hy3kv5vo1w
    @user-hy3kv5vo1w2 жыл бұрын

    本日もありがとうございます! 「これはどうやるんだろう」と思っていたことが実現できるのはとても楽しいです。

  • @user-nv1hf5bo6n
    @user-nv1hf5bo6n2 жыл бұрын

    今回もありがとうございます。できるとうれしくなってきます。

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    いつもありがとうございます! できることが増えると楽しくなりますね!

  • @user-vt5ei1dn8t
    @user-vt5ei1dn8t3 жыл бұрын

    AE触り始めだったのでめちゃくちゃ勉強になりました!ありがとうございます!

  • @PuttiMW

    @PuttiMW

    3 жыл бұрын

    見ていただきありがとうございます! なにかわからないことがありましたら一緒に悩みますのでコメント頂けると嬉しいです!

  • @87redltd
    @87redltd2 жыл бұрын

    なるほど、パスの形状を貼り付けるんですね!! 見るまでは自分でベジェをいじって形を変えるのか、他のシェイプレイヤーに変形する方法があるのかな?と思ってました。 動画ソフトならではのやり方って感じがして面白いですね!!

  • @user-kw8ob5ou1d
    @user-kw8ob5ou1d2 жыл бұрын

    シェイプの大きさを今までスケールで変更してましたが、それによって後々エフェクトをかけるときに不具合が起きるとは...1つ勉強になりました、ありがとうございます!

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    結構スケールで済ませてしまっているチュートリアルなんかもありますが、後々のことを考えると結構危険だったりしますね。 パス関連の動作もスケールによって意図しない結果を生むことになります… 私は基本的には最終調整でのみスケールでの拡大縮小を行うように教えてもらいました!

  • @user-kw8ob5ou1d

    @user-kw8ob5ou1d

    2 жыл бұрын

    @@PuttiMW ご丁寧にありがとうございます。この続きも楽しく拝見させていただきます!

  • @hosana7
    @hosana7Ай бұрын

    出来ました、レンチ先生ありがとうございます。

  • @user-yt6gj6tx7o
    @user-yt6gj6tx7o2 жыл бұрын

    再生リストから動画を順番ずつ再生していたのでプラグイン入れてたっけ!?と謎に焦ってしまいました笑 プラグインを入れたことがなかったのでとても勉強になりました!

  • @ichiryu-kazuaki
    @ichiryu-kazuaki2 жыл бұрын

    いやー、知らなかった。ありがとうございます。

  • @Aquilonel
    @Aquilonel3 ай бұрын

    仕事の本番を終えて帰ってきました。 コンサートを始める前のスポンサーさんの広告枠映像で、猫のシルエットを動かしたんですけど、これをやっていたら⚪にしたり、⭐ にしたりもできましたね・・・直前はかなり大変だったので、無理ぜずプティさんが教えてくれた方法でぺジェで動かして大好評でした。 引き続き楽しんで勉強させていただきますので、よろしくお願いします。PhotoshopやIllustratorから対象のアウトラインをとって、それを単純図形にモーフィングしたい場合は、同じレイヤー内にパスをおけば良さそうでうですが、オブジェクトを回しながらモーフしたい場合は、トランスフォームで回転のキーフレームを打てば良いでしょうかね・・・やってみます。

  • @PuttiMW

    @PuttiMW

    2 ай бұрын

    お疲れ様でした!! 良い結果に繋がったようでよかったです!仕事の合間に学習を詰め込むのは中々真似できることではないので、純粋に凄いです! 単純な形状であれば、After Effectsに画像を読み込んでオートトレースなんかも使えるかもしれません。イラレで作業した方が良さそうではありますがw

  • @Aquilonel

    @Aquilonel

    2 ай бұрын

    ありがとうございます。 全て基礎の応用です。 そこを我慢というか楽しめないとダメだと思っています。

  • @MariMoch-VALORANT
    @MariMoch-VALORANT2 жыл бұрын

    AEですごく悩んでいたんですがすごくわかりやすくてどんどん覚えられます...!ありがとうございます!

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    ありがとうございます! 良く使う機能については一通り学習できるように動画をアップしていますので、是非活用ください! もし躓く個所がありましたら、お気軽にコメントください!

  • @MariMoch-VALORANT

    @MariMoch-VALORANT

    2 жыл бұрын

    @@PuttiMW ありがとうございます!1つ質問があります!おすすめされていたスクリプトを導入したのですが毎回AE起動時に呼び出すという形なんでしょうか?動画内みたいにパネル?に埋め込んで使いたいです!

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    @@MariMoch-VALORANT 私の環境だと、一度パネルを呼び出した後に、好みの場所にドッキング(パネルをレイアウトにくっつける)すると、次回以降のAe起動で表示されていますね… ドッキングしても消えますか?

  • @MariMoch-VALORANT

    @MariMoch-VALORANT

    2 жыл бұрын

    @@PuttiMW 返信ありがとうございます!パネル呼び出したらぢドッキングできました!ありがとうございます!

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    @@MariMoch-VALORANT 良かったです!よく使うものはドッキングしておくと楽ですね!

  • @user-xy6fr1dj3b
    @user-xy6fr1dj3b Жыл бұрын

    めっちゃわかりやすい!声も聞きやすくて最高です!!

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    動画を見てくださり、ありがとうございます!! 投稿初期は特にゆっくり話しているので、眠くなってしまうかもしれません…笑 今後もどうぞよろしくお願いいたします!

  • @user-mb8ni9yv4u
    @user-mb8ni9yv4u Жыл бұрын

    自分用でメモさせてください。 2周目完了🎉

  • @gaku5747
    @gaku57472 жыл бұрын

    プッティさんの作成したサンプルで見られるような円形シェイプが液体のように揺らぐエフェクトをつけるのはどのような方法で行っているのでしょうか?? こちらもパスのコピーでしょうか?

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    コメントありがとうございます! こちらは「タービュレントディスプレイス」というエフェクトを使用して揺らめきを作っています。 他にも、「エコー」というエフェクトを使用して動いた際に図形がブラーで伸びるようなイメージも付け加えています。 後ほどTwitterに解説動画をアップしてみますので、ぜひお試しください!

  • @gaku5747

    @gaku5747

    2 жыл бұрын

    ご丁寧に返信・解説ありがとうございます😭 タービュレントディスプレイスとエコーですね!早速触ってみます😌 解説動画も楽しみにしています!!

  • @teacher0914
    @teacher0914 Жыл бұрын

    分かりやすい説明ありがとうございます。丸などの簡単な形から三角などのシンプルな形へのモーフィングは理解できましたが、葡萄の形からワイングラスにモーフィングというような複雑な形になると、一つのレイヤー内に内包されている複数のシェイプがそれぞれのパスを持っているため、どれをベジェパスに変換すればいいのか分かりません。  このような場合、葡萄やワイングラスといったシェイプはadobe illustrater で作成してAEに放り込んだ方が方がいいのでしょうか?お忙しい中、恐縮ですが、返信いただけると幸いです。

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    いつもありがとうございます! After Effectsのパスは割と簡易的なもので、複雑なパスや細かい編集は苦手だと思います。 もちろん時間をかければ可能ですが、adobe Illustratorなどを活用した方がいいかもしれませんね。 葡萄からワイングラスへのモーフィングは難しいかもしれません。 うまく誤魔化すための技術が必要になりそうです… 葡萄は、複数の球体が連なっているイメージなので、それだけシェイプの数も多くなります。 ワイングラスは、作るイメージにもよりますがシェイプの数はそこまで多くないので、まずモーフィングの対象となる、シェイプの数が合いません。 なので、どのシェイプがワイングラスへと変形するのかを決めてモーフィングを行い、その他の不要なシェイプは上手く誤魔化して消すといった処理が必要になりそうです。

  • @teacher0914

    @teacher0914

    Жыл бұрын

    @@PuttiMW ご丁寧にありがとうございます!adobe illustratorで作ってみようと思います!

  • @user-jb7eu1ys9u
    @user-jb7eu1ys9u Жыл бұрын

    こんにちは、いつもわかりやすい動画にお世話になっております! □→〇、〇→☆はできたのですが、 □→〇→☆のように連続したモーフィングはどのように作成するのでしょうか? ・□→〇のパスに〇→☆のパスをコピペ ・□→〇のパスの中で星を作成してからパスをコピペ 上記の手順でパスは打てるのですが、画面上では□→〇から動きが出ません。 ベジェパス→ベジェパスの変形は一度きりのような制約があるのでしょうか? お手すきの際にご教授いただけますと幸いです。 よろしくお願いいたします…!

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    動画を見てくださり、ありがとうございます! パスの変形に制限はありませんので、シンプルにパスのコピーが上手くできていないのだと思われます。 私の方でも試してみましたが、□→〇→☆の変形は可能でした! 再度、手順を確かめながらパスのコピーを行ってみてください。

  • @sucrekoko2008
    @sucrekoko200811 ай бұрын

    とても丁寧な説明ありがとうございます。質問ですが、4:50の右クリックでペジェパスに変換する所ですが、私のブレンダ―には右クリックしても、ペジェパスに変換という項目がありません。他に、星をペジェパスに変換する方法はあるのでしょうか。

  • @PuttiMW

    @PuttiMW

    11 ай бұрын

    お使いのAfter Effectsのバージョンが余ほど古くなければ、機能としてはあるかと思いますが、どのバージョンを使用していますでしょうか? 一応、他にベジェパス化された星形シェイプを作る方法を書いておきます。 ①平面レイヤーを新規作成 ②平面レイヤーに星のマスクパスを作成 ③レイヤーを展開し、マスクパスの項目を探し選んでコピー(Ctrl+C) ④新規シェイプレイヤーを作成 ⑤シェイプレイヤーを展開し、コンテンツの追加から「パス」を追加 ⑥パス1の中にある、「パス」を選択した状態で、ペースト(Ctrl+V) これでベジェパス化された星型を作成できます。

  • @sucrekoko2008

    @sucrekoko2008

    11 ай бұрын

    @@PuttiMW お返事本当にありがとうございます。試してみます。

  • @Siyu65i
    @Siyu65i10 ай бұрын

    ネットでダウンロードしたpng画像の素材をモーフィングさせて変形させたいのですが pngの画像をシェイプにする事は出来るのでしょうか???

  • @PuttiMW

    @PuttiMW

    10 ай бұрын

    png画像をシェイプにする機能はありません。 なので頑張ってトレースしてシェイプを作るか、オートトレース機能を使用してマスクを作り、マスクパスをシェイプレイヤーのパスに貼り付ける方法が考えられます。

  • @HIROMY...
    @HIROMY...11 ай бұрын

    いつもお世話になっております。 初歩的な質問で申し訳ありません! 平面レイヤーを作成後、シェイプレイヤー楕円形ツールをwクリックしたのですが、現れない時があります。 なぜでしょうか? あとは、マスクというのが出現したりして、だいぶ混乱しています。 なぜマスクが出てきたのでしょうか? それと、いつも一番最初に平面レイヤーで背景を作ると思うのですが、それはなぜでしょうか? 平面レイヤーがなくてもアニメーションは作製できると思うのですが、必須の作業なのでしょうか?

  • @PuttiMW

    @PuttiMW

    11 ай бұрын

    いつも丁寧にありがとうございます!! 初歩的な質問大歓迎です。 そしてとても良い質問だと思いました! ①平面レイヤー作成後、楕円形ツールをダブルクリックしても現れない こちらの説明不足でした、楕円形ツールなどシェイプレイヤーを作成するときは、タイムラインパネルか、コンポジションパネルのいずれかが選択されている状態でないと、なにも起きません。 なので、タイムラインかコンポジションパネルを選んだ状態で行ってみてください。 私はタイムラインの何もないところをクリックして選択状態にしています。 選択状態になるとパネルの枠が青色になります。 ②最初に平面レイヤーをつくって背景にする理由 コンポジション作成した際は、実は背景が透明になっています。 背景の色をコンポジションを作る際に設定することが出来ますが、これは見た目だけで実際には透明のままとなっています。 この状態で書き出すと設定によっては背景が真っ黒になってしまいます。 なので、背景が透明である必要がない場合は、平面レイヤーなどを作成して背景にしています。

  • @HIROMY...

    @HIROMY...

    11 ай бұрын

    @@PuttiMW いつもご丁寧なご回答をしていただき、本当にありがとうございます! とてもわかりやすく、大変スッキリしました🥰 これでまた前に進むことができます。感謝しかないです! またお世話になると思いますが、よろしくお願いいたします🙏

  • @hoshinogen1
    @hoshinogen12 жыл бұрын

    円形を整列で真ん中に置き、アンカーポイントも中心に置いているのですが、星をダブルクリックすると円とは違う場所にアンカーポイントがきてしまいます。修正しようとしても、星も円も一緒に動いてしまうのですが、どうしたらよいでしょうか?

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    動画を見ていただきありがとうございます! 「円形を整列で画面中央に置く」といった手順は動画内にはないかと思います。 円形は楕円形ツールをダブルクリックで作成しないと不具合が起きます。 整列で中央に移動した際に、アンカーポイントなどに余計な数値が入ってしまうからです… 動画内の手順通りに進めていただければ解決できると思いますので、是非お試しください。 ドラッグで作成してはいけない理由やそれによって起きるトラブルなどをまとめた動画もあるので、お時間ある際にでもチェックしてみてください。 kzread.info/dash/bejne/g5mV1qqHf6zXirA.html

  • @hoshinogen1

    @hoshinogen1

    2 жыл бұрын

    @@PuttiMW そもそも、違うやり方を加えてしまっていたからなんですね、失礼致しました!コンポジションを作り直して1からやってみたら、できました。ありがとうございます!

  • @PuttiMW

    @PuttiMW

    2 жыл бұрын

    @@hoshinogen1 うまくいったようで良かったです! シェイプレイヤーは少しの操作ミスで結果が変わることもあるので辛いですね… また何か不明点ありましたら、お気軽にお声がけください!

  • @ytamtam7139
    @ytamtam713910 ай бұрын

    分かり易くて大変勉強になります。質問ばかりですみません。 質問1 2:11 1秒かけて円形に変形したい〜30フレーム移動させると画面から図形が消えてしまいます。 (秒数を短くすれば円形で設定できますが) 質問2 Motion Toolsは使えるのですがAeのワークスペースにはめ込む事ができません。どうしたら良いでしょうか?ご教示下さい。

  • @PuttiMW

    @PuttiMW

    9 ай бұрын

    動画を見てくださり、ありがとうございます。 返信が遅くなり、申し訳ありません。 質問①について 画面から図形が消えるのは、パッと一瞬で消える感じですかね? 画面を見てみないとわからないことではありますが、考えられることとしてはレイヤーのアウトポイント(レイヤーのバーの終点)の外に、キーフレームが出ているとかでしょうか… レイヤーの再生範囲をドラッグなどで伸ばせば解決すると思います。 質問②について 普通にドラッグすれば、ドッキングできるはずですが…なぜでしょう… Motion Toolsはどこから起動していますか?ウィンドウ>エクステンションから起動していますでしょうか?

  • @ytamtam7139

    @ytamtam7139

    9 ай бұрын

    @@PuttiMW Putti Monkey Wrenchさん 丁寧な解説返信ありがとうございます。 質問①ですがこの回答がヒントになりました。 仰る通りでコンポジションを確認したら3秒のはずが1秒位になっていました。最初から作り直したら上手くいきました。 質問②ですが基本的な事ができてませんでした。 Motion Toolsの文字のところをドラッグしたらドッキングできました。 ウインドウ>エクステンションから起動する事ができました。 2件とも解決しました。 ありがとうございました。

  • @PuttiMW

    @PuttiMW

    9 ай бұрын

    うまくいったようで良かったです!! またなにか不明点などありましたら、お気軽にコメントください~!応援しています!

  • @ytamtam7139

    @ytamtam7139

    9 ай бұрын

    ご丁寧に返信頂きありがとうございます。 これからも宜しくお願い致します。

  • @tity_t
    @tity_t Жыл бұрын

    コメントを全て見たのですが 同じ質問が無かったので教えて頂けたら嬉しいです。 コンテンツから、長方形パスを開いてサイズの左の値を400にすると、もう片方が225になり正方形にできません。 何かの設定で固定されているのでしょうか? 最初のコンポジション作成→平面は長方形でやられてますよね。 また詰まってしまいました😢

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    動画を見てくださり、ありがとうございます! すみません。説明が省略されていましたね… こちらサイズですが、最初の状態だと「縦横比」が固定されています。 つまり片方の値を変えると、同時にもう片方の値も縦横比に合わせて変化してしまいます。 なので、まずは「縦横比のロック」を外しましょう。 値を入力する左隣に、鎖のようなアイコンがあると思います。 こちらをクリックして見てください。すると鎖アイコンが消えます。 この状態は、「縦横比のロック」が外れている状態で、値を片側ずつ調整することが可能になっています。 左右の値とも同じ数値を入れれば完成です。 最後に「縦横比のロック」を再度クリックして有効にしておきましょう。 ちなみに動画では、どちらか一方の値を一度「0」にして、角丸長方形の縦横比を、無理やりリセットしています。 「0」にして確定した後、再度好きな数値を入れると、正方形作成できます。 お試しください。

  • @tity_t

    @tity_t

    Жыл бұрын

    早々にありがとうございます! 無事に最後までできましたー😭 星に変わって感動です。本当に本当にありがとうございます🙇‍♀️

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    @@tity_t 無事最後まで作成できたようで良かったです! またお気軽にコメントください~!

  • @tity_t

    @tity_t

    Жыл бұрын

    @@PuttiMW ありがとうございます🙇‍♀️💕

  • @user-oq6ts6eb8n

    @user-oq6ts6eb8n

    Жыл бұрын

    ちょうど同じところで躓いたので質問されてる方がいて助かりました🙏

  • @user-pl1je4tu2r
    @user-pl1je4tu2r Жыл бұрын

    5:45 の部分の貼り付けができないのですがどうすればいいでしょうか...

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    星も楕円形も「ベジェパスに変換」は行われているでしょうか? 「パス」という項目が表示されていれば大丈夫なはずですが… あとはショートカット自体が機能しているか確認してみてください。

  • @user-pl1je4tu2r

    @user-pl1je4tu2r

    Жыл бұрын

    @@PuttiMW 試してみます!(追記)やはり貼り付けできませんでした Ctrl + Vのショートカットキーになっていて、ベジェパスに変換もできていました (追記2)行けました!

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    @@user-pl1je4tu2r なぜいけたのでしょう…謎が残りますが、一旦うまく作業を進めれたみたいで良かったです!

  • @lab3422
    @lab3422 Жыл бұрын

    大変お世話になっております!とりあえず言われるままにやってみたらできたのですが理解が追いつかないです^^; 星形をベジェパスに変更して、キーフレームを打ったら記憶できる…?というのが理解できていないです。

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    いつもありがとうございます! 少し長くなりますのでお手すきの際にチェックしてみてください。 星の形状や、四角形や楕円形はそれぞれのツールを使って簡単に作成できますが、 それらの形状は自由に編集できるパスではない状態です。 なので簡単にサイズを変更したり、比率を変える程度のことはできますが四角形を星形に変えるといったことはできないということですね。 なので、まずは自由に形状を編集できるようにパスに変換します。 それが「ベジェパスに変換」というものです。 次に「キーフレームを打って記憶する」という部分ですが、 そもそもキーフレームと言うのは、今の状態を記憶、記録する機能と思ってください。 開始から0秒の時点で円形の図形のパスにキーフレームを打ちます。 すると、キーフレームを打った時間では、円形の形状を記憶したことになります。 次に時間を1秒進めて、星形のパスをコピーして貼り付けます。 すると、0秒では円形のパスを記憶、1秒では星形のパスを記憶した状態になります。 こうすることで0~1秒の間で、円形から星形へ変化する動きを作ることが出来るということになります。 星形のパスをコピーしなくても、頑張れば円形のパスを編集して星形にできると思いますが非常に面倒な作業になります。なので一旦星形を作り、そのパスを活用したのが今回の作例となります。

  • @lab3422

    @lab3422

    Жыл бұрын

    @@PuttiMW いつも丁寧にありがとうございます!! 普段イラレとフォトショでチラシを作る仕事をしておりまして、イラレ感覚が抜けず作った図形がそもそもベジェではないということに思い至りませんでした! 丁寧な動画をさらに噛み砕いて説明してくださり感謝感謝です><!!

  • @PuttiMW

    @PuttiMW

    Жыл бұрын

    @@lab3422 いえいえ、理解の助けとなっていれば嬉しいです。 「普段イラレとフォトショでチラシを作る仕事」ということで、基礎ができている分、Aeで少し変わった仕様があると「あれ?」となることはありそうですね… しかし、デザインという基礎がある分、Aeを使った表現の成長速度も速いと思いますので羨ましいです! また何か疑問がありましたら、お気軽にコメントください!

  • @lab3422

    @lab3422

    Жыл бұрын

    @@PuttiMW ありがとうございます!!!

  • @Aquilonel
    @Aquilonel3 ай бұрын

    回ってモーフして回って戻るのをつくてみました。kzread.info/dash/bejne/hKB5w7BwYNjgkdY.html

  • @PuttiMW

    @PuttiMW

    2 ай бұрын

    回転も加わってモーフィングがより自然にみえますね🌟

  • @Aquilonel

    @Aquilonel

    2 ай бұрын

    一つ他のお粗メーターも動かしてみようかな?と思うのがオリジナルの始まりですよねぇ。 複雑なのは再現するのがやっとですが。

Келесі