XDのスライス(書き出し)方法

スライス

XDのスライス(書き出し)方法

この記事ではXDのスライスの方法をまとめておきます。
XDはフォトショップやイラストレーター に比べるとシンプルです!

 

スライス方法

基本的には

  1. ファイル名を書き出したい名前に変える
  2. 「command+E」で書き出す
  3. 書き出しサイズ・形式を選択

です!

 

画像を書き出す場合

レイヤー表示に変えておく

まずレイヤーアイコンを押して画面をレイヤー表示に変えておきます。

 

そして書き出したいレイヤーを選択します。

 

ファイル名を書き出したい名前に変える

下のように書き出したい名前に変えます。名前をダブルクリックすると変えられます!
今回は「cont_img01」にしました。

 

「command+E」で書き出す

名前を変えたあと選択したままでショートカット「command+E」(Macの場合)を押します。

すると、このように書き出し画面が出てきます。以下詳細設定方法↓

 

詳細設定

◎フォーマットでは、書き出し形式を選択(PDFはほぼ使わない)

◎書き出しサイズ

xは倍率を示しており、よく使うのは「1x」の等倍か「2x」の2倍だと思います。
(今後仕様が変わるかもしれませんがその時は臨機応変にお願いします🙏)

 

PCの場合、大体はRetinaディスプレイ対応で2倍にすることが多いですが、書き出す画像の元サイズが2倍書き出しのサイズより小さい場合はぼやけてしまうのでその場合は等倍で書き出します。

SPはデザインカンプが等倍(320px、375pxなど)で作られていたら2倍で書き出し、すでに2倍サイズ(750pxなど)で作られていたら等倍で書き出します。

今回はJPG形式で2倍で書き出します。

画質は余程のことがない限り100%でOKです

 

「書き出し」ボタンを押して終わり

あとは「書き出し」ボタンを押したら終わりです^^

 

書き出した画像を確認

書き出した画像を確認し、問題があれば修正します。

詳しくはこの記事に書いています↓

 

文字を書き出す場合

文字を書き出す場合は上であげた画像の書き出す方法の前にひと手間必要です。
それは、文字の「アウトライン化」です!

文字を書き出す必要があるときは、先方がフォントのライセンスを取得しない?場合、その上webフォントを使わない場合です。
その時は対象テキストを全て書き出す必要があるので大変です〜(^^;

なぜアウトライン化する必要があるのかというと、しないとパソコンの環境の違いによってフォントが正しく表示されないからです。
私は始めの頃アウトライン化するのを忘れて書き出してしまったので付箋で注意書きしていました( ̄◇ ̄;)

さて、細々と書きましたが方法を見ていきましょう〜!

 

文字をアウトライン化する方法

ずばりショートカットで「command+8」です!

試しに見出しをアウトライン化してSVG形式で書き出すとします。

 

1.対象を選択した上で「command+8」を押します。

すると、パスになったのが分かります!

 

2.あとは書き出したい名前に変えて書き出します。

先ほどの画像書き出しの手順通り、名前を変えたあと選択した上で書き出しのショートカット「command+E」を押します。

大体テキストは可能な限りSVG形式で書き出します。(拡大縮小してもキレイなので)

テキストシャドウなどレイヤー効果がついている場合などはPNG形式で書き出します!(SVGだと崩れるので)

 

以上簡単にですがXDのスライス方法について終わりますm(_ _)m

 

 

コメント

タイトルとURLをコピーしました