XDでスライスしてみよう（初心者&コーダー向け）

最近はXDを使っているところも、少し増えてきたように思います。
XDでスライスするのに必要な、基本的なやり方をまとめておきます！

目次

• 基本的なスライス手順
• 書き出すときの設定
• 余白込み（好きなサイズで）でスライスする手順
• 最後に

基本的なスライス手順

１、上のメニューから、表示＞レイヤー（⌘Y）もしくは、左下のマークをクリックして、レイヤーパネルを表示します。

２、スライスしたい写真を選択する

３、写真のレイヤーを選択されているのを確認し、ファイル＞書き出し＞選択済み（⌘E）で書き出しの設定画面が出ます。

４、お好きな設定で書き出してください。

書き出すときの設定

jpg書き出し

フォーマット:JPG
画質：100%（任意）
書き出し先：デザイン
設定サイズ：1x
※等倍と２倍サイズ両方必要な場合は、書き出し先：Web、設定サイズ：1xにしてください。

png書き出し

フォーマット：PNG
書き出し先：デザイン
設定サイズ：1x
※等倍と２倍サイズ両方必要な場合は、書き出し先：Web、設定サイズ：1xにしてください。

svg書き出し

フォーマット：SVG
画像を保存：埋め込み
ファイルサイズを最適化

余白込みや、好きなサイズでスライスする手順

１、長方形ツールで、書き出したいサイズの四角を作る。

２、レイヤーの順序を、四角（上）、写真（下）にする。

３、四角と写真を両方選択して、オブジェクト＞シェイプでマスク（⌘+shift+M）する。

４、ファイル＞書き出し＞選択済み（⌘E）で書き出しの設定画面が出ます。

５、お好きな設定で書き出してください。

最後に

いかがでしたか？
今回紹介したことをおさえれば、なんとかスライスはできるかな？と思います。
XD案件が今後も増えるかもしれませんので、慣れていきましょう(*^^*)