前回の「Tumblrポートフォリオサイト アカウント作成編」に続いて、準備編です。
Tumblrでポートフォリオサイトを作成するには、作品データをすべて画像データに変換しておく必要があります。作品データはIllustrator形式（.ai）、PDF形式（.pdf）、InDesign形式（.indd）となっているので、それぞれの場合の方法を解説します。
Tumblrでの画像のアップロード
- ファイル形式：JPG/JPEG、GIF、PNG
- ファイル容量：10MB以下
- GIFアニメーションの場合は、サイズが1MB以下、幅が500ピクセル以下
- 多くのブログテーマでは500×750ピクセルをサポートしています。それを超える場合はアップロード時にスケールダウンされます。拡大表示は最大1280×1920ピクセルです。
- RGBモード以外の画像をサポートしていません。
Illustratorファイル（.ai）を画像データに書き出す
JPEG形式に書き出す
Illustratorでファイルを開いたら、ファイルメニューから「Web用に保存」を選びます。
別ウィンドウが表示されるので右上の名前の下のプルダウンから「JPEG」を選びます。下の画質はファイル容量を考えながら選択します。画像サイズはTumblrでは1280×1920ピクセルなので縦横比が変わらない範囲で設定します。ウィンドウの左下に書き出した際のファイル容量が表示されるので、参考にしながら画質やサイズを設定しましょう。
設定ができたら右下の「保存」ボタンをクリックします。「保存」のダイアログが表示されるので、ファイル名と場所を設定して保存します。
PNG形式に書き出す
Illustratorでファイルを開いたら、ファイルメニューから「Web用に保存」を選びます。
ウィンドウ右上のプリセットの名前の下のプルダウンから「PNG-24」を選択します。JPEGの時と同様にファイル容量を参考にしながら、1280×1920ピクセル以下に画像サイズを設定します。設定できたら、JPEGと同様に保存します。
PDFファイル（.pdf）を画像データに変換する
Acrobat Proを使用する方法
Acrobat ProでPDFファイルを開いたら、ファイルメニューの「その他の形式で保存」＞「画像」＞「JPEG」を選びます。PNG形式で保存する場合は、「画像」＞「PNG」を選びます。
「別名で保存」のダイアログが表示されるので、必要があれば右下の「設定」をクリックします。
設定では画質などが設定できますが、ピクセル数は設定することができません。
こちらはPNG形式の場合の設定画面です。
Photoshopで画像に変換する
PhotoshopでPDFファイルを開きます。ファイルメニューの開くでPDFファイルを選びます。
PDF読み込みのオプションが表示されるので、Tumblrの仕様に合わせて設定します。トリミングに仕上がりサイズを設定することで判型で読み込まれます。
- トリミング：仕上がりサイズ
- アンチエイリアス：ON
- ファイルサイズ：1280×1920ピクセル以下になるように設定
- モード：RGBカラー
- ビット数：8bit
PhotoshopでPDFファイルが開かれるので、ファイルメニューから「Web用に保存」を選びます。
JPEGの場合は、プリセット下でJPEGを選択しファイルサイズを考慮して、画質を設定します。
PNGの場合は、プリセット下でPNG-24を選択します。
InDesignファイル（.indd）を画像データに書き出す
InDesignからの書き出し
InDesignのファイルメニューから「書き出し」を選びます。
書き出し画面の形式から「JPEG」を選択して、「保存」をクリックします。
JPEGの書き出しオプションが表示されるので、ページの範囲や単ページ／見開き、品質などを設定して「書き出し」をクリックします。
PNG形式で書き出したい場合は、書き出しの形式で「PNG」を選択して保存します。
PNGの書き出しオプション画面では、JPEGと同様に設定して「書き出し」をクリックします。
PDFファイルを画像データに変換する
InDesignから見開きか単ページのPDFを書き出し、Photoshopで開きます。
PDFの読み込みオプションが表示されるので、読み込むページを選択しオプションを設定して「OK」をクリックします。
- トリミング：仕上がりサイズ
- アンチエイリアス：ON
- ファイルサイズ：1280×1920ピクセル以下で設定
- カラーモード：RGBカラー
ページが読み込まれるので、ファイルメニューから「Web用に保存」を選びます。
Web用に保存のダイアログが表示されるので、プリセット下からJPEGを選び、ファイルサイズを考慮して画質を設定して保存します。
PNGで書き出したい場合は、プリセット下から「PNG-24」を選択し、「透明部分」のチェックを外して書き出します。
以上、作品データをすべて画像データ（JPEGまたはPNG）に書き出しておきましょう。IllustratorやInDesignから直接書き出す方法と、一旦PDFファイルを書き出してPhootshopで変換する方法があります。ピクセル数などを制御することを考えると一旦PDFファイルを書き出してPhotoshopで変換する方法の方が良いと思います。
また、ファイル容量と画質を考えると、PNG形式よりJPEG形式の方が良いかと思います。