【XD】PDFに書き出す方法を紹介！

この記事は上記の課題に向けて作成しています。

web制作の現場ではXDで作成したデザインをPDFに書き出すことがあります。

XDでは簡単にPDFに書き出すことが出来ます。

この記事ではXDでPDFに書き出す方法を紹介します。

この記事を読むメリット

• XDでPDFに書き出す方法がわかる

IllustratorでPDFに書き出す方法はこちら

あわせて読みたい

【Illustrator】PDFに書き出す方法を紹介！ IllustratorでPDFに書き出す方法を知りたい この記事は上記の課題に向けて作成しています。 デザイン制作をしていると頻繁にPDFの書き出し作業を行います。 Illustrator...

XDでPDFに書き出す方法

早速XDでPDFに書き出す方法を紹介します。

XDでPDFを書き出す方法は2通りあります。

XDでPDFを書き出す方法

• すべてのアートボードの書き出し
• 一部のアートボードの書き出し

すべてのアートボードの書き出し

すべてのアートボードをPDFに書き出す場合は下記の手順で行います。

1. メニューバーから「ファイル」→「書き出し」を選択
2. 「すべてのアートボード…」を選択
3. フォーマットから「PDF」を選択

①メニューバーから「ファイル」→「書き出し」を選択

上記にあるメニューバーから「書き出し」を選択します。

②「すべてのアートボード…」を選択

次に「すべてのアートボード」を選択します。

③フォーマットから「PDF」を選択

フォーマットから「PDF」を選択して青いボタンを押します。

すると全てのアートボードがPDFで書き出されます。

一部のアートボードの書き出し

一部のアートボードのみPDFに書き出す手順は下記の通りです。

1. 書き出したいアートボードを選択
2. メニューバーから「ファイル」→「書き出し」を選択
3. 「選択したオブジェクト…」を選択
4. フォーマットから「PDF」を選択

①書き出したいアートボードを選択

始めに書き出したいアートボードを選択します。

②メニューバーから「ファイル」→「書き出し」を選択

続いてメニュー上記から「書き出し」を選択します。

③「選択したオブジェクト…」を選択

「選択したオブジェクト」を選択します。

④フォーマットから「PDF」を選択

先ほど同様にフォーマットから「PDF」を選択して青いボタンを選択します。

選択したアートボードのみPDFで書き出されます。

XDでPDFに書き出す方法の説明は以上です。

PDFに書き出す際はアウトライン化するのを忘れないでください。

XDでアウトライン化する方法は下記の記事を参考にしてください。

あわせて読みたい

【簡単】XDでアウトライン化する方法を紹介！ XDでアウトライン化する方法を知りたい この記事は上記の課題に向けて作成しています。 XDのデザインデータを渡す場合アウトライン化する必要があります。 アウトライン...

XDでPDFに書き出す際の注意点

XDでPDFに書き出す際に注意点があります。

PDFに書き出す際の注意点

• マスクした画像はPDF上で崩れてしまう

マスクした画像が崩れる

XDでマスクをかけた箇所はPDF上で崩れてしまいます。

Illustratorではこのような現象は起こりませんがXDだと起きてしまいます。

※この現象はおそらくXD側のエラーだと思います。使用するPCによっては綺麗に書き出せることもあります。

そのためマスクを使用した場合は注意が必要です。

マスクした場合の対処法

マスク機能を使用した場合の対処法を説明します。

マスクを使用した際の対処法

• 一旦「JPG」で書き出しその後「PDF化」する

JPGなら崩れないため一旦JPGで書き出します。

①JPGで書き出す

アートボードを選択しJPGに書き出します。

「ファイル」→「書き出し」→「選択したオブジェクト…」→「JPG」で出来ます。

②書き出したJPGをPDF化する

続いて書き出したJPGを1つのPDFファイルにします。

「I LOVE PDF」というツールを使用します。

①「JPEG PDF 変換」を選択します。

②JPG画像を選択します。

③「ひとつのPDFファイルにすべての画像を結合する」にチェックを入れます。

以上で1つのPDFファイルを作成出来ました。

この方法でマスク部分の崩れの影響を受けずにPDF化することが出来ます。

マスク機能を使っている際はこの方法でPDF化してください。

※ちなみにXDでマスクをかける方法については他の記事で説明しています。気になる方はこちらの記事を読んでみてください。

TAKATO BLOG

AdobeXDで画像をマスクする方法を紹介！ XDで画像をマスクする方法について紹介します。XDではシェイプでマスク以外に2つの方法でマスクすることも可能です。

画像を書き出す方法については別の記事でまとめています。

あわせて読みたい

AdobeXDで画像を書き出す方法を紹介！ XDで画像を書き出す方法を知りたい。 この記事は上記の課題に向けて作成しています。 デザインからコーディングに移る際XDで作成したデザインデータから画像を書き出し...

未経験でwebデザイナーになるには？

XDの勉強している方の中にwebデザイナーを目指している方はいませんか？

僕自身未経験でwebデザイナーになりました。

僕が実際にどのようなことをしてwebデザイナーになったかまとめました。

あわせて読みたい

未経験からwebデザイナーになるためにやったことを紹介！ 未経験でwebデザイナーになるには何をすれば良いの？ この記事は上記の課題に向けて作成しています。 未経験でwebデザイナーを目指している方が多いかと思います。 僕自...

webデザインを独学で学んでいる方向けにこちらの記事もまとめました。

あわせて読みたい

webデザインの独学は何から始めれば良いか紹介！ webデザインの独学は何から行えば良いの？ この記事は上記の課題に向けて作成しています。 webデザインを独学で行う方は何から行動すれば良いか悩みますよね。 そんな方...

XDでPDFを書き出す際は注意が必要

最後にまとめです。

XDでPDFを書き出す方法

• 「ファイル」→「書き出し」→「すべてのアートボード」→「PDF」を選択
• マスク機能を使用している場合は「JPGに書き出し」→「PDF化する」

XDでPDFに書き出すのは基本的に簡単です。

マスク機能を使っている場合はJPGに書き出してからPDF化してください。