DIVEJavaScriptの設定を有効にしてご利用ください。無効の場合、当サイトを正常にご利用できません。namio.araki前回のテキストレイヤーに引き続き、第二回はシェイプレイヤーを使ってみます。基本はテキストレイヤーと同じなので、前回の記事が分かった人はサクッとできてしまうでしょう。ポイントとしては、Illustratorからパスのペーストに癖があるぐらいです。Effectsで作成したいと思います。CCをオススメします。Effectsではいろいろな方法があるのですが、そのいろいろな方法を今回はご紹介。新規コンポジションを作って、「右クリック→新規→シェイプレイヤー」。レイヤー名は「M」用のシェイプレイヤーとでもしましょうか。次にペースト先となるパスを作っておきます。ペンツールを選択して、コンポジションパネルをクリックします。これをやっておかないとペーストしたパスデータがマスクパスとしてペーストされてしまうのでお忘れなく。2-2.Illustrator(イラレ)からパスデータのペースト前回同様1文字づつ作成します。アウトライン作成してできたパスをコピーします。Effectsに戻り「M」用のシェイプレイヤーを選択したままペーストします。マスクではなく、シェイプのパスとしてペーストできました。ここからは前回同様ですね。前回のキャプチャーを流用しちゃいます。3DレイヤーをONにし、3Dレンダラータブのレンダラーを「クラシック3D」を「レイトレース3D」にします。前回同様に「形状オプション」を、「へベルのスタイル:凸型」「べベルの深さ:5」、「押し出す深さ:40」として、「Y回転」を30にします。ライトとカメラを足すとそれっぽくなりますね。シェイプの線1の「線幅」を1.0に変更してみると、テキストレイヤーの線とは違って押し出した側面すべてがその線の色になります。2-4.「D」用のシェイプレイヤーを作成する「M」同様のフローで行うのですが、注意点が1つ。「D」の文字は外側と内側の2つのパスでできているため、そのまま行うと下記のように1つはシェイプ、1つはマスクとしてペーストされてしまいます。そのため、ペンツールで1か所コンポジションパネルをクリックしたあと、レイヤーをクリックし再度コンポジションパネルをクリックします。下記のように2か所点が見えると思います。連続してクリックすると1シェイプの中の線となってしまうので、必ずコンポジションパネルからフォーカスを外してから再度クリックしてください。タイプラインパネルを見てもシェイプが2つできていると思います。2-4.「D」のパスデータをペーストするそのままペーストしてしまうと、マスクとなってしまうので、タイムラインレイヤーのパスを選択したままペーストします。するとマスクではなくパスとしてペーストできたかと思います。正対だとわかりにくいので、「形状オプション」を、「へベルのスタイル:凸型」「べベルの深さ:5」、「押し出す深さ:40」として、「Y回転」を-30にします。このままだと「D」真ん中のドーナツ部分が塗りつぶされてしまっています。そのためレイヤーのコンテンツ→追加から、「パスを結合」を追加します。追加したらモードを「型抜き」にすれば下記のようにドーナツ型になります。「M」の文字と同様に「線幅」を1.0にあわせてあげて位置調整すれば完成です。線に色をつけると押し出しの側面に色が着色するマテリアルオプションで全体のマテリアルの調整は可能Illustratorからパスデータをコピーするのでどんなパスでも立体化が可能2-END.まとめ前回に比べ複数のパスの場合に手間がかかってしまいますが、3Dアイコンなどテキストデータに限定されずに3D化できるので知っておいて損はないかと思います。Illustratorに限らずPhotoshopからパスのコピーも同様の手順で3D化できます。Effectsにペーストする際、マスクとしてペーストされないようにだけ注意してもらえれば簡単にできると思います。アニメーションライブラリ「Lottie」を使ってみた。Typeではじめる構造化データモンスターダイブの2019年を振り返る。創業10周年を振り返る。