Figmaでラスタライズをする方法と注意点。デザイナー、コーチ、ディレクター / 井川

.

Memo

Figmaでラスタライズをする方法と注意点。

です・ます調の文章でなくてすみません。当初は個人的なメモ書きだったためです。

ラスタライズと解像度。

Figmaは元々Web用のデザインツールのためか、現時点(2023年11月)では「解像度」の設定がない。

「ラスタライズ」は下記の手順でできるが、解像度はおそらく「72ppi」となると思われる。

Figmaのカーニングのショートカット。Figmaのロゴ。

Illustratorでは、テキストや画像にぼかしやシャドウ、透明効果などを使用した場合、印刷用入稿データにする際に「ラスタライズ」を行う。

その際の解像度は「300〜350dpi」が基本となっている。

Illustratorでラスタライズを行う画像。


Figmaのラスタライズ方法。

ラスタライズしたいオブジェクトを選択する。

選択ツールで、シャドウやぼかしをかけたオブジェクトを選択。

Figmaでオブジェクトを選択した画面。

「Main menu(メインメニュー)」 > 「Quick actions(クイックアクション)」 からクイックアクションバーを開く。

クイックアクションバーを開く。

Figmaのメインメニューの画面。

「ラスタライズ」と入力する。

キーボードから「ラスタライズ」などと入力し、「選択したレイヤーのラスタライズ」をクリックする。

Figmaのクイックアクションバーの画面。

英語で利用している場合は、「rasterize」などと入力し、「rasterize selection」をクリック。

Figmaでのラスタライズ。英語版の画面。

ラスタライズされる。

ラスター(ビットマップ)化された、一枚画像となる。

Figmaでオブジェクトをラスタライズした画面。

ただし解像度がおそらく72ppiと低いので、商用利用の印刷には向かないと思われる。


Figmaのクイックアクションバーのショートカット。

クイックアクションバー。

クイックアクションバーは、ショートカットからでも開くことができる。

  • Mac: 「command」 + 「/」 or 「command」 + 「P」
  • Win: 「Ctrl」 + 「/」 or 「command」 + 「P」

モニター用は72ppi、印刷用は300〜350dpiが目安。

「ppi」と「dpi」。

スマホやパソコンなどのモニターの場合と、紙への印刷の場合の単位はそれぞれ違う。

が、単位が違っても、数値は同じ扱いができる。(例: 72ピクセル = 72ドット)

  • 「ppi(pixel per inch)」は、1インチあたりのピクセル数。(モニター用の単位。)
  • 「dpi(dot per inch)」は、1インチあたりのドット数。(印刷用の単位。)

Figmaでカーニングとトラッキングができると聞いた猫。

以上、参考になれば幸いです。


Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いています。(元々はメモ書きでしたので順次見直し、更新しています。) 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 写真は主にUnsplashPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、購入素材、もしくは自前のものを使用しております。

デザイナー、ディレクター、講師、コーチ / 井川宜久

AI 関連メモ。

ChatGPT 関連メモ。
OpenAIのロゴ。
Bard 関連メモ。
Googleのロゴ。
DALL·E 関連メモ。

免責事項について

  • 記事ページ(Memosのページ)は当初は文字通りメモ書きでした。その後、修正や更新をしております。
  • 事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ早急に対応いたします。
  • 一個人のポートフォリオサイトですので、万一損害・トラブル等が発生した場合でも、一切の責任を負いかねます。