MENU
CLOSE
CODEWEBSITE Edit : 2020.10.14 Update : 2023.01.17

Adobe XDで画像をトリミング(切り抜き)する方法

今更だけど、自分はフロントエンジニアですが、PhotoshopとかAiとかXDを少しは触れないと、全然コーディングが進まないって痛感することがあります。w
これはすごいよく使うのでメモ📝
 

やりたいこと

・以下のように、XDのアートボードに設置された画像をファーストビューの大きさに合わせて切り抜きたい。    

切り抜きたい大きさの長方形を用意

①切り抜きしたい大きさ(ファーストビューの大きさ)に合わせて長方形をつくる
②レイヤーで、「長方形」と「画像」を「Ctrl」を押しながら二つ選択された状態にする。(★写真内の青枠箇所を参照)  

マスクという方法で切り抜く

・2つのレイヤーを選択した状態で、キーボードで「Ctrl + Shift + M」で切り抜く。
・Macの場合は、「Comand + Shift + M」   「長方形」と「画像」でわかれていたレイヤーが、「マスクグループ」になって画像が切り抜かれていました。
あとは、この「マスクグループ」を選択して保存すればOKです。

Web Trends Lab.編集部

KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。