【Figma】まんがの背景効果用に、画像素材をつくってみた その2
先日の記事のつづき。
うちのこのかわいさを前面に出すべく、そんなかんじのトーンを作りためています。
【Figma】まんがの背景効果用に、画像素材をつくってみた
Figmaで、まんがの背景効果に使える画像素材をつくってみたおはなし。タイリングできるパターンや、ちょこっと置けるほわほわ系。
かわいいね！！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
また、「どうせ作るなら、ちゃんと印刷まで意識したものにしよう」…ということで、こちらの記事を参考に、使用するグレーも固定しました。(前回作ったぐるぐるにも適用しておきました)
指標があるのはありがたい…感謝！
グレースケール漫画に最適なトーン濃度（%）の決め方 | hikarium
hikarium.com
＼最適なグレー（灰色）の濃度ってどれ？／ というわけで、Web漫画のトーンについてまとめました。
Figma は「ローカルスタイル」によく使う色、テキストスタイルなどを保存しておけるので (クリスタのカラーパレット的な機能)、一度登録しておくとべんり。
フレームを選択すると、その中で使われている色をすべてピックアップしてくれるのもメチャクチャありがたいです。
スタイル名で「/ (半角スラッシュ)」を使うと、自動でカテゴリ分けしてくれるのも優秀👍
こんなかんじで、いろいろバリエーションを増やしていこうとおもいます(`･ω･´)
ちょっといま、絵を描くまでいくような心身状態にないので…
とはいえ、なにかつくりつづけていないと悪循環になるのはわかっているので…
しばらくは素材づくりのほうに取り組むかもです。
【Figma】まんがの背景効果用に、画像素材をつくってみた
Clip Assets にたくさんの素材が出品されていますが、なんとなくこう、「ポップ」「かわいい」「あほっぽい」ところで使えそうな、しっくりくるものが少なく… (→ 結局いつもハニワくんになる)
なんかうまいこと、自分で調達できないかナー…と、Figmaでつくってみることに。
かわいい！！！
✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
つくりかたメモ
正方形の中に、ぐるぐるを敷きつめ…
(切れてしまうパーツは、複製 → マスク適用 → 反対側に平行移動)
パターンができたら、それをコンポーネント化。
複製 → 周囲にタイリングして、バランスを整えます。
中央のオリジナルのフレームをコンポーネント化しておくと、編集した内容が周囲の複製したものすべてに反映されるのでべんり👍
あとは、画像として書き出し → クリスタ側で画像素材として登録すれば、タイリング・拡大縮小・回転など自由自在につかえます。
やったね✌(‘ω’✌)三✌(‘ω’)✌三(✌’ω’)✌
いろいろつくれそう
ほわほわ系効果もできるかナー…と。
エフェクト > レイヤーブラー を駆使して、ほわほわにしてみたり、★の図形を丸っこくかわいくしてみたり。
ペン > 鉛筆 ツールだと、ペンタブをつかって手描きもできますね。
クリスタのような手ブレ修正はついていないので、ちょっといつもの感じとちがいますが…
まとめ
しっくりくる素材がない、まんが作品に独自色を出したい…なんてときは、こんな感じで自作の素材をストックしておくとよいかも。
【Figma】テキスト全体にグラデーション枠線を適用するメモ
本職デザイナーではないのですが、Figmaにはかなりお世話になっています。
最近公開した素材の解説画像も、Figmaで作っていたりします。
(それまではクリスタで作っていたのですが…Figmaは余白サイズがすぐわかったり、オートレイアウトしてくれたり、コンポーネント化できたり…ちょっとした画像調整もできるし、超便利✨)
とはいえ、手当たり次第で使っているので (のうすじ)、実は基礎的なところがわかっていなかったりします。
これまでハマって実現できなかったこと
いままでハマっていたのが、「複数行のテキストの枠線 (境界線) に対して、全体にナナメの線形グラデーションをかける方法」がわからないということ。検索の仕方が悪いのか、調べてもなかなか目当ての方法が出てきません。
２行のテキストをグループ化、グループに対してグラデーションを適用した場合、水平方向 (各行個別) であれば実現できるのですが…
今回は「テキスト２行全体で」ナナメグラデーションをかけたいのです。
(クリスタだと、フォルダにまとめて → フォルダに対して「境界効果」を設定すれば全体に適用できるので、そのノリだったのですが…)
しかも、グループに対してのグラデーションでは「グラデーションを回転」ができないらしく…
テキスト要素それぞれを選択することで、ようやく「グラデーションを回転」が効く仕様のようで…。
(回転できるのも 水平方向 or 垂直方向 のみなので、今回の要件を満たさず)
いろいろ試してみるものの…
試行①：２行のテキストをグループ化、それぞれラスタライズ、全体のグループに対してグラデーションを適用
試行②：↑の各行ごとのグループを解除して同階層にしたうえで、全体のグループに対してグラデーションを適用
いずれもNG。
解決！
しばし考え…本日思いついた解決法がこちら。
テキストを複製して、下のほうにだけ目的の線幅で枠線を追加 (色は何でもOK)
２つのテキストグループの間に、目的のグラデーションを適用した長方形を追加
(長方形のグラデーションであれば、好きな角度に調整可能！)
下の方のテキストと長方形を選択し、「マスクとして使用」
できました！🙌
この方法、テキストをアウトライン化しなくてもできるので、あとでテキストを修正したくなった時も楽ちんです。(上下２レイヤー分修正しないとですが…)
さっそく活用
さて、やっと方法がわかったので、さっそくつかってみます！
かわいいね！！
なんでつくったかというと、本サイトのHOME最下部のバナーリストに加えるためです。
(メインのブログではなく、日々のらくがきなどはTWEETコーナーにポイポイしていることが多いため…)
かわいいね！！！！
応用として、上のテキストだけ若干ずらすと、本記事のサムネイル画像のような感じにもできます👍
かわいいね！！！！！！！
まとめ
以上、手当たり次第にFigmaを攻略している (のうすじな) 人のメモでした。
Figmaを使い始めた方のお役に立ったら幸いです。
現在、仕事が絶賛繁忙期で…
こころが荒んだり、そもそも体力が残っていなかったりして、全然更新できていないのですが……
今後も自分の城をゆっくりしっかり発展させてゆきます…。