見出し画像

立体的な文字の作り方(Figma)

今回の記事では立体的な文字の作り方について記載します。
なお、今回の方法では『Blend』というプラグインを使用します。

また、エンボス加工風の立体的なデザインの作成方法については以下の記事に記載しています。


作成する立体文字

今回は下画像のような文字を作成していきます。

プラグイン概要

Blendはパスに沿ってオブジェクトを複製配置できるプラグインです。

パスとオブジェクトを選択した状態でBlendを適用してみます。

するとパス上にコピーオブジェクトを複数配置できました。
また、Blendポップ内の各項目を設定することで複製数や間隔を調整することができます。

Blendを使った立体的な文字の作り方

まず、使用するテキストと立体的にした際の厚み分の斜めパスを作成し、それらを適用した状態でBlendを適用します。

すると下画像のように複製されたオブジェクトが斜めに重なります。
重なりが滑らかになるように、『Number of copies』の数値を適当に調整します(数を増やすほど滑らかになりますが、その分複製数が増えて重くなります)。
最初に作成したパスは削除します。

あとはグループ内最前面のオブジェクトの塗りを変更すれば完成です。

応用例

テキストのデザインを変えるとまた変わった立体風文字になるので、色々と試してみてください。


左上:最前面オブジェクトの線に黒を追加
右上:最前面ではなく少し下の重ね順のオブジェクト数個の色を黒に
左下:線のみのオブジェクトを複製後、最前面のオブジェクトに塗りを追加
右下:Blend適用後にプラグイン『Skew』を使用して傾きを調整

まとめ

以上、立体的な文字の作り方でした。

この記事が気に入ったらサポートをしてみませんか?