• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

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

投稿者アイコン
2019/05/15
書いた人:
rurippa!
カテゴリ:
Web制作   XD
2,152 views

XDのスライスの方法をまとめまています。初めてXDでスライスするコーダーさん必見です!

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

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

目次

基本的なスライス手順

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

reiya

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

Images

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

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

書き出すときの設定

jpg書き出し

xd_slice_img_jpg01

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

png書き出し

xd_slice_img_png01

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

svg書き出し

xd_slice_img_svg01

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

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

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

sikaku01

2、レイヤーの順序を、四角(上)、写真(下)にする。

スクリーンショット 2019-04-02 16.45.16

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

slice01

slice02

4、ファイル>書き出し>選択済み(⌘E)で書き出しの設定画面が出ます。

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

最後に

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


この記事を読んだ人はこんな記事も読んでいます