こんにちは。1月中旬より出張が重なっている木曽原です。
ホームページを作成するにあたって必ずと言っていいほど必要になるのが画像のトリミングだと思います。トリミングをする際のツールとしては、フォトショップやAffinityなどの画像編集ツールを真っ先に思い浮かべると思いますが、個人的に、そういったツールを使ってのトリミングは、一回でバッチリハマることはありません。
特にスタッフ一覧などのコンテンツの場合、各スタッフのサイズ調整で結構な時間を費やすこともあります。
私がAdobe Xdをメインデザインツールとして使うようになった7、8年くらい前からやっている方法があるのですが、Figmaでも同じことが出来るため、今回はFigmaでのトリミング方法を紹介したいと思います。
Figmaを使ったトリミングの流れ
figmaで長方形を作成します。サイズは右パネルのレイアウトで入力してください。今回は横400px、縦300pxとしました。
トリミングしたい画像を右メニューの塗りにドロップしてください。
下が長方形に画像が入った状態になります。右メニューの「塗り」が画像に変わっていることが確認できるかと思います。
右メニューの画像に変わった部分をクリックすると下記画像のように画像スタイルの選択画面になります。デフォルトは塗りですが、トリミングに変更します。
下部に表示されたトリミングから画像サイズを調整します。
下記が画像サイズを大きくした状態です。マウスでトリミングした箇所に画像位置を調整してください。
画像位置の調整が終わったら、右メニュー下部のエクスポートから形式とサイズを選択して画像を書き出してください。今回はサイズは2倍、形式はJPEGを選択しました。
まとめ
どうでしょうか？これだと最初からイメージ通りのトリミングが可能になると思いますし、例えばスタッフ5名をトリミングする際も同じサイズの長方形を用意して、スタッフ画像が並んだ状態でイメージを確認できるため、作業がスムーズになると思います。
Figmaはウェブ業界では標準ツールとなっています。また、無料で使用することも可能なので、アカウントを作成して使ってみていただければと思います。
次回のENGAWA SALONは1月31日に開催
ENGAWA SALONでは、CanvaやAffinityの操作だけでなく、参加者の質問に対しての疑問も大切にしています。
また次回のENGAWA SALONでも、実際の質問をもとに解説していきますので、ぜひ気軽に参加してくださいね。
次回のENGAWA SALONは 1月31日（土）松阪市公民館 にて開催予定です。
ぜひこちらからお申し込みください。お待ちしています！
