Adobe InDesignのヒント＆トリック：Web用のグラフィックを正確な解像度でエクスポート

Web上でAdobe InDesignで実際にグラフィックを作成する人々がいます。それもできる。

ある状況がありました。友達が私に、JPG形式でエクスポートしてPhotoshopで表示すると解像度が一致しないのはなぜかと尋ねてきたとき。それに私自身、どうしてそうなるのか調べなければいけませんでした。

ステップ1

それを適切に行う方法を簡単に紹介します:

ファイル>新規作成>ドキュメント をクリックし、目的のメディア で、印刷、Web用 またはデジタルパブリケーション かを設定できます。ここではWeb を選択します。

単位はピクセルを使用しており、これは正しいです。ページサイズを指定したり、幅 と高さ を直接入力したりできます。ここでは例として800 × 200 Pxを設定し、OK をクリックします。

ステップ2

ここに作業スペースが表示され、たとえばボタンを作成します。

矩形ツール を使用して形状を描画します。

次に、上から下へのグラデーションを追加します。したがって、タイプ: をリニア、角度: を90°に設定します。

コンターを表示したくない場合は、カラーパネルで設定します。

ステップ3

色が気に入らない場合は自分で設定できます。ただし、現時点ではそれが重要ではありません。

場合によっては、カラーパネル>新しいグラデーションパネルを選択して色を選択できます。これで、すぐに設定され、ダブルクリックで調整できます。たとえば、ブラックスライダーをわずかに右に移動させて、完全な白にならないようにします。

ステップ4

次に、全体をまとめたいので、オブジェクト>コーナーオプションに移動します。

通常はプレビューつきで行うので、すぐに結果が確認できます。その後、丸められたと20 pxを設定します。

次のようになります:

ステップ5

また、表示されるコントゥアを削除し、テキストを追加することもできますが、今回は省略します。

ステップ6

これをエクスポートして、ファイル>エクスポートをクリックして、"button"と名前を付けます。

次に、どのファイル形式を選択するかを選択できます。PNGを選択すると、透過性を保持できるので、試してみましょう。

次は、JPGと同じウィンドウが表示されます。複数のページをエクスポートできますが、この場合は1ページしかないので、関係ありません。

また、品質と解像度を調整できます。ここで常に300 ppiが設定されています - ppiは1インチあたりのピクセル数を意味します。

さらに、透明な背景を選択し、エクスポートをクリックします。

ステップ7

これをPhotoshopで開くと、少し大きすぎることがすぐに分かります。

画像>画像サイズで確認すると、3334 × 834ピクセルです。しかし、このサイズはドキュメント作成時に設定していませんでした!

ステップ8

ですから、再度InDesignに戻り、ファイル>エクスポートをクリックします。今回は"button2"と名前を付けます。

ここで重要なポイント: 解像度に72 ppiを入力する必要があります。これだけです。この値が入力されると、最初に設定した解像度に正確に一致します。

結果として、Photoshopで望んだ800 × 200ピクセルになります。





基本的にこれで終了です。これ以上のことはありません。重要なのは、エクスポート時に72 ppiが入力されていることだけです。