Xdを使った簡単画像トリミング

こんにちは。ここ数日の寒さにさすがに暖房スイッチをオンにしている木曽原です。

先日、Figmaを使った簡単画像トリミングを紹介しましたが、今回はXdを使った方法を紹介したいと思います。

目次

Xdを使ったトリミングの流れ

STEP
長方形ツールで画像サイズの長方形を作成

左メニューの長方形ツールを使って、長方形を作成します。ちなみにデフォルトでは、塗が白、グレーの線がある状態ですが、今回は分かりやすくするために塗りをグレーとして、線を消しています。

STEP
長方形に画像をドロップ

先程、作成した長方形に直接画像をドロップします。この際、長方形サイズより小さいサイズの画像をドロップすると画像がぼやけてしまうため、あらかじめドロップする画像サイズを確認しておいた方が良いと思います。

Screenshot
STEP
画像をダブルクリックして調整する

画像をダブルクリックすると下の画像のように長方形に対して画像の見える範囲が表示されます。

下の画像のように長方形から画像がはみ出した箇所の角(どこでもいい)をマウスで広げると、画像サイズを調整できます。

ドロップした状態でイメージに近いのでれば、次のステップに進んでもらっても大丈夫ですが、多くの場合は調整が必要になると思います。

STEP
書き出し

長方形を選択した状態でファイルメニュー→選択したオブジェクトをクリック。

保存画面が出てくるため、保存場所とフォーマット、画質、書き出しサイズを選択して書き出しをクリック。今回は画像なので、JPEGにしました。書き出しサイズはホームページの場合は高解像度ディスプレイに対応するために2倍以上のサイズで書き出すことが殆どです。

長方形サイズを変更しても画像の対比は崩れない

下の画像のようにXdでは長方形サイズを変更しても、画像の対比が崩れることはありません。これは、Figmaのように塗り、自動調整、トリミング、タイルなどの選択がないからです。

個人的にはXdの方がドロップのしやすさも含めて使いやすいと思います。(開発が止まってしまったのはとても残金です)

Screenshot

次回のENGAWA SALONは1月31日に開催

ENGAWA SALONでは、CanvaやAffinityの操作だけでなく、参加者の質問に対しての疑問も大切にしています。

また次回のENGAWA SALONでも、実際の質問をもとに解説していきますので、ぜひ気軽に参加してくださいね。

次回のENGAWA SALONは 1月31日(土)松阪市公民館 にて開催予定です。

ぜひこちらからお申し込みください。お待ちしています!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

Makoto Kisoharaのアバター Makoto Kisohara 株式会社AMAOTO 代表取締役

地元特産品を主に扱うネットショップ責任者として約6年間従事し、在職中はほぼ独学で楽天ランキング1位やAmazonベストセラーを獲得。2014年7月独立。WordPress専門のホームページ制作、ネットショップの出店・構築・運営サポートなどを行うAMAOTOを開業。年間30近くのホームページ・ネットショップ制作に携わり、制作したホームページは優秀なデザインを紹介するWebデザインギャラリーサイトに多数掲載される。2019年6月、株式会社AMAOTOを設立。代表取締役に就任。三重県商工会連合会、大阪商工会議所、三重県知財総合支援窓口などの専門家として年間30件以上のIT支援活動も行う。

目次