Web制作の画像素材作成にも活躍するPhotoshop。ロゴやアイコンといったパーツのデザインに限って使う人から、デザインカンプの制作~スライスまでこれ1本でこなす人まで……と、その活用法は人それぞれ。だが、Photoshopを簡易Webオーサリングツールとして使う方法があることをご存じだろうか? それを実現するのが、「psd2css」というユニークなオンラインサービスだ。
PSDファイルをCSSレイアウトのWebページに変換する
psd2cssは、その名のとおり、PhotoshopのPSDファイルをブラウザーからアップするだけで、CSS/XHTMLファイルに自動変換してくれるサービスだ。……と、さらっと書いてはみたが、よく考えるとこれはスゴい。Photoshopにある「Web用に保存」機能を使えば、Web用に最適化されたJPEGやPNG画像と一緒にHTMLを書き出すことはできるものの、スライス作業は不可欠だし、作られたHTMLも複雑なテーブルレイアウトで構成されていたりして、残念ながら大幅に手を入れないと使えないことが多い。
ところがこのpsd2cssなら、Photoshopで作ったWebページのデザインカンプを、わざわざスライスしなくても、フルCSSレイアウトのWebページにしてくれるという。しかも、変換後のXHTML(XHTML 1.0 Transitional)は、W3C(World Wide Web Consortium)のバリデーターをパスできる、とも説明されている。この説明どおりだとすると、これはかなり画期的なサービスのはず。というわけで、さっそく実際の使い勝手はどうか、試してみた。
まるで使えない? PSDなら何でもいいわけではなかった!
psd2cssの基本機能は現在のところ、無料で利用できる(ユーザー登録も不要)。有料プランの「Unlimited」(月額19.95ドル=約2000円)を契約すれば、「Drupal」や「Joomla」といった米国で人気のCMSのテーマファイル(テンプレート)へ変換したり、JavaScriptを使ったリッチな画像ギャラリーも作れるとのことだが、まずはシンプルな無料版を利用してみた。
無料版は、psd2cssのトップページから、「参照」ボタンを押してPSDファイルをアップロードするだけで使える。ところが、手っ取り早く変換精度をチェックしようと、手元にあったPSD形式のデザインテンプレートをアップしてみたら、結果はボロボロ。レイアウトは崩れた状態で、画像の分割もまったくうまくいかなかった。
それもそのはず、psd2cssが変換できるのはどんなPSDファイルでもいいわけではなく、ちゃんと条件があったのだ(まぁ当たり前なのだが)。気を取り直して、チュートリアルとドキュメントをちゃんと読んでみると、psd2cssの変換のカラクリにもつながっている、PSDファイル作成にあたっての“ルール”が分かった。
