ゴール

ソーシャルゲーム等で利用されるカード画像などで求められるような、定形で大量(数百枚規模)の画像書き出し作業を、一定のクオリティでアウトプットできるワークフロー

今回の要件は下記

  • 画像解像度は2パターン
    • 640×800のjpg画像、画質最優先で出来る限りファイルサイズを小さく
    • 240×300のjpg画像、50kb以下
  • 不要なデータ(メタデータ、EXIFオプション)はすべて削除する
  • 後々のカードデザイン変更にも柔軟に対応可能であること
  • キャラクターイラストの納品形式はPSD

ワークフローの概要

ワークフロー

1.オリジナルPSDデータのフォーマット統一

オリジナルのPSD(納品されたもっともピュアなデータ)を、扱い易くする

  • カンバスサイズの統一(今回で言えば、2500×3000)
  • カンバスサイズに対して、キャラクターの実際の背丈を意識しつつ配置。背景レイヤは削除。
  • イラストデータを拡大・縮小する場合は、事前にスマートオブジェクト化しておく(オリジナルのデータをロスしないように)
  • 調整レイヤなど、「非破壊的」な調整を行う(必要に応じた色調補正)
  • ラベル、レーティング、キーワード等メタ情報の付与

2.PNGフォーマットへのエクスポート

解像度を下げつつ、PNG形式にエクスポートする。ここでわざわざ変換しているのには、下記の理由がある

  • オリジナルのPSDデータはファイルサイズが巨大で扱いにくい(PSDプロファイルが肥大化する)
  • PNGであれば、透過情報を保持でき、かつ画質の劣化が少ない

解像度は適切なものに(1000×1200など)しつつ、PNG変換する作業をPhotoshopでアクションを作成し、バッチ処理で一気に行う(※GraphicConverterのようなツールでも同様の処理が可能)

3.PSDプロファイルの作成

PSDプロファイルとは、最終成果物を直接吐き出す元となるファイル。今回はPhotoshopPSD(FireworksPNGも可) PSDでは、「スマートオブジェクト」を用いることで、いわゆる「シンボル」のようなひな形のような扱いが可能。一つのPhotoshopファイル内で、共通部分は出来る限りスマートオブジェクトを利用するように心がける

  • まず、前項で書きだしたPNGファイルを、レイヤ毎にインポートする。インポートには、デフォルトで用意されているスクリプトを使う(下記画像参照)

上記を実施すると、下記の画像のように、インポートした画像がレイヤとして配置される

4.プロジェクトファイルから、アウトプットファイルの出力

プロジェクトファイルから、jpg形式への出力。下記のように、いくつか選択肢があるので、適切なものを選択する。

  • Photoshop PSDの場合
    • JSXによるレイヤのファイル出力
    • JSXによるレイヤカンプのファイル出力
    • Slicyによるレイヤグループのファイル出力
  • FIreworks PNGの場合
    • Fireworks Pageのファイル出力

今回は、「Slicyによるレイヤグループのファイル出力」を採用する。

5.アウトプットファイルのファイルサイズ最適化

ファイルサイズの要件を満たしつつ、最も高い画質に調整する

  • ファイルサイズに具体的な指示が無く、画質が最優先される場合
    • 「JPEG mini」で余分な情報を削除
  • ファイルサイズに絶対的な指定がある場合
    • 「Graphic Converter」でファイルサイズ指定のバッチ処理を行い、ファイルサイズを削減する

各ツールの個別メモ

JPEG-mini

  • JPEGmini公式HP
  • 見た目をほとんど変えずにファイルサイズを抑制する。それだけのツール。
  • デフォルトの動作が、オリジナルをそのままリプレースする「破壊的編集」であることに注意
  • Linuxコマンドアプリケーション版である「JPEGminiフォトサーバー」というのもあるらしい

Adobe Bridge

画像管理ソフト。Photoshopをインストールすると、一緒についてくる

Fireworks

  • フォトグラファー向けのPhotoshopに対し、FireworksはWeb向け画像制作を前提としている。よって、画像書き出しのようなタスクは相性がいい。
  • Photoshopと比べると、JSXのような高度な自動化機能は無い。
  • モックを作るのに便利な「ページ」「シンボル」「共有ライブラリ」といった機能が充実している
  • バッチ変換(PSDをpng形式に、等)は強力。
  • PhotoshopPSDファイルを完全な形で(レイヤ構造なども維持したまま)開くことができる

Adobe Photoshop

  • Adobe Photoshop CS6 公式HP

  • マルチタッチジェスチャー対応

  • JSXと呼ばれるスクリプトや、アクション→バッチのコンボで、大抵の作業は自動化が可能

  • JSXは、/Applications/Adobe Photoshop CS6/Presets/Scripts/あたりに設置すると、「ファイル」>「スクリプト」から使えるようになる

  • よく使う自動化ワークフロー

    • レイヤーカンプをファイル(jpg等)に書き出す
      • ファイル > スクリプト > レイヤーカンプからファイル
    • レイヤーをファイルに書き出す
      • こちらで配布されている書き出しスクリプトをよく利用させてもらっている
    • 指定ディレクトリのファイルを一括変換
      • 書き出し作業を「アクション」として保存し、対象ディレクトリに対して「ファイル」>「バッチ」>「アクション」で一括変換する

Graphic Converter

  • GraphicConverter

    • Mac App Store版のバージョン更新が滞りがちなので、最新を使いたい場合は直販サイトで購入するほうがよい
  • (JPGのみだが)出力ファイルサイズの指定が可能

  • アイコンプレビューの作成ができる

  • 下記のようなタスクをバッチ処理可能

Slicy

Pixa

  • 大量の画像の管理において、見つけるのを助け、素早くエクスポートすることに特化した画像整理アプリ。
  • マルチタッチジェスチャー対応
  • 既存のフォルダをライブフォルダとして登録可能
  • 手軽にJPG、PNG変換、及び画像解像度変更バッチを実行可能
  • Libraryの位置を環境設定から変更可能。Dropboxと連携させることができる。
  • スクリーン、デスクトップキャプチャ機能(ホットキーで。ただし、ブラウザのスクロールキャプチャ機能は無い)
  • 検索窓で特定のキーワードを用いることで、効率良く検索できる
  • 自動タグ付け、自動グループ分けが強力

その他大事なこと

  • 画像データ、特にオリジナルのPSDは常にバージョン管理されていること。ちょっとした誤操作でデータを失ったり、書き換わったりする危険性が常にあることを意識する。Dropbox上で管理すれば、自動でバージョン管理されるのでオススメ。
  • 画像書き出し作業は、えてして単調な作業になりやすい。常に「効率化」を意識し、チャレンジングな作業と捉えるとよりハッピーになる


blog comments powered by Disqus

Categories

Tags

iPhone Sales

Books

Pinboard