[デザイン] Figma で月の呼吸 壱ノ型 闇月・宵の宮 の剣閃を10分で作る

Figma とは

Figmaは、ブラウザで実行されるインターフェイスデザインアプリケーションですが、実際にはそれだけではありません。チームベースの共同設計プロジェクトには、おそらくこれが最適なアプリケーションだと言っても過言ではありません。

https://webdesign.tutsplus.com/articles/what-is-figma–cms-32272

無料でワイヤーフレームやUIのプロトタイピングが作れる、ブラウザ上で動作するツールです。

フィギュアの方 ではありません!

三日月の形を作る

まずは月の呼吸の最大の特徴である三日月状のエフェクトを作ります。
手始めに大きさの異なる円を二つ作ります。

以下のように「Shape Tools」からEclipse を選択します。

Eclipse を選択

で、円を二つ描きます。
大きさは一つを200×200、もう一つを170×170としました。
(分かりやすいように片方を赤く塗っています)

円を二つ描く

それを右と下の境界が重なるように配置します。

右と下の境界が重なるように配置

両方の円を同時選択した状態で、以下のように「Subtract selection」をクリックします。

「Subtract selection」をクリック

すると、このように三日月状のシェイプができました!

三日月状のシェイプができた

そのままだと、以下のように2つのシェイプの状態が残ってしまっています。

2つのシェイプの状態が残ってしまっている

そこで「Flatten selection」をクリックします。

「Flatten selection」をクリック

すると1つのシェイプになりました!

1つのシェイプになtっtったった

次に色を塗っていきます。

グラデーションで背景色をつける

シェイプを選択した状態で以下のように「Fill」の真下の四角部分をクリックします。
すると、背景色の詳細な設定ができるツールチップが表示されます。

「Fill」の真下の四角部分をクリック

ツールチップの左上にあるように現状の設定は「Solid」で、単色のみ設定できる状態です。
グラデーションを付けたいので以下のように「Linear」を選択します。

「Linear」を選択

すると以下のような表示になります。
これが線形のグラデーションができるようになります。

「Linear」の初期表示

まずグラデーションの軸を調整します。
以下のように、三日月の角度と軸を一致させます。

三日月の角度とグラデーションの軸を一致させる

背景色を塗っていきます。
ツールチップの左右のつまみを選択し、それぞれ黄色に塗っていきます。

次にシェイプの中央にグラデーションを付けていきます。
以下のように色のバーの真ん中あたりをクリックします。

真ん中あたりをクリック

すると、ツールチップに吹き出しのようなものが一つ増えます。
この吹き出しはグラデーションを制御する目印で、
その場所ではこの色にしてください、という設定ができます。

gぐグラデーションの中央を白色に設定

真ん中を白に指定して完成です!

これで月の呼吸の特徴的なエフェクトが一つできました。

月の呼吸の特徴的なエフェクト

ここからは飛ばしていきます!

斬撃の本体を作る

斬撃の本体は微妙に楕円形にしようと思います。
大きさは一つを800×700、もう一つを700×600としました。

斬撃の本体用の楕円

これをこうして、

斬撃の本体を三日月型にする

こう!

斬撃の本体に色を付ける

三日月のエフェクトを散りばめる

あとは、最初に作った黄色いエフェクトをコピペし、大きさや角度を色々変えて、
本体の斬撃の上に散りばめてやります。

するとこうなりました!

月の呼吸 壱ノ型 闇月・宵の宮 の剣閃

枠線やシャドウを付けて完成

なんとなく寂しいので、枠線とシャドウを付けます。

まず枠線を付けます。
以下のように全シェイプを選択して、「Stroke」の右の「+」をクリックします。

「Stroke」の右の「+」をクリック

すると以下のようになりました。
デフォルトのストローク設定ですが、一気にアニメ塗りっぽくなりましたね!

アニメ塗りっぽくなった

続いてシャドウを付けます。
同じように全シェイプを選択して「Effects」の右の「+」をクリックします。

「Effects」の右の「+」をクリック

すると以下のようになりました。
これもデフォルトの設定ですが、ちょっとディテールが凝ってきた感が出始めました。

ちょっとディテールが凝ってきた感

これにて完成とします!

最後に

月の呼吸 壱ノ型 闇月・宵の宮の剣閃をざっくり会得できました🙌

以上です。お疲れ様でした!

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。