アイコン

2015-11-26

HTMLの基本構成まだ自分で0からしてるの?PhotoShopからHTMLとCSSを直接書き出す方法

僕は、HTMLのコーディングをするときにDreamweaverを使って作業するのですが、
普通、photoshopやイラレのデータでページのデザインを受け取り、それをWeb用に書き出して位置を調整しつつコーディング
・・・という感じで結構大変なんですよね。このコーディング、Photoshopから直接できないものか・・・と前から考えていました。

調べてみると、ありました!みんな考える事同じようだ・・・(笑)

なんと!PhotoShopの機能をフルに活用すればHTMLとCSSの書き出しまで、全て自動ですることが可能なんです!

 

その方法とは、JavaScript(JSX)を使います。
配布しているサイトはコチラ。
↓↓
KnockKnockさん:[ http://www.knockknock.jp/archives/456 ]
リンク先の「PSD Exporter」

ps-html_1

Download ZIPからダウンロードできます。

ps-html_2

ZIPフォルダの中にはサンプルPSDも入っているのでレイヤー構成など参考にするといいと思います。

少し古い記事になりますが、CC2015で動作を確認済みですので、問題なく使えます。

 

詳しい説明はリンク先のサイトに記載されていると思うので軽く説明します。

このスクリプトを使用するときに気をつけるのは、
1.レイヤー名とファイル名が「半角英数」と「アンダーバー」「ハイフン」以外の文字を使用しないこと。誤って使用してしまうとエラーになってしまい、書き出す事ができません。
2.レイヤーの種類がラスターレイヤーとテキストレイヤーのみであること。(スマートオブジェクトの場合は無いものとして扱われてしまい、書き出してくれません)
3.レイヤー名はこのままidとして位置を指定するのに使われるので、被らないようにすること。

の3つです。

画像レイヤー(IMGタグ)

レイヤー名に記述を足すことで、そのレイヤーを背景にしたり、形式などを変えて書き出すことができます。

例)背景:*bg.jpg
  png:aaa.pngなど

ps-html_3sample.psd

テキストレイヤー(Pタグ)

テキストのフォントや大きさ等の情報がCSSに書き込まれます。ただしテキストを部分的にフォントや大きさを変えていたりしても、一番最初の文字の情報だけが適用されるようです。

部分的に変えたい場合はレイヤーを分けて書き出すか、コーディングの時に個別で設定するようにしてください。

レイヤーフォルダ(DIVタグ)

フォルダは、DIVタグに変換されるので、1つの要素としてまとめたい、という場合に使用してください。

また、画像レイヤーやテキスト、レイヤーフォルダにマスクを適用すると、書き出し範囲を指定することもできます。

ps-html_4sample.psd

使用方法

使い方は、ファイルメニュー<スクリプト<参照でダウンロードしたフォルダの中にあるpsdexporter.jsxを開きます。

ps-html_6

ここで、画像の形式や画質、画像、HTML、CSSを書き出すかどうかなどを、まとめて設定することができます。
※レイヤーに個別に形式などを設定した場合はそちらが優先されます。

ps-html_7

OKを押せば自動で書きだしてくれますが、レイヤーとフォルダの構成が慣れてこないと上手くいかないかもしれません。
僕も最初使ったときは、大変なことになってました(笑)

実際に使って作業したページ例がコチラ
↓↓
https://cubelic3.jp/material_gallery/
画像が大量にあるようなページでも短時間で仕上げることができます。
このページは単純な構成ですが、画像が300枚以上あり、全てバラバラで個別に位置を調整していて普通にやったらとても時間がかかります。

ですが、このスクリプトを使えばPSDデータを受け取ってからたった2時間ほどで完成させることができました。

レイヤー名やフォルダ構成さえしっかりすれば、多少複雑な構成になっても問題なく使えると思います。

使いこなせれば、とても便利なので是非使ってみてください。

 

11/27追記:ちなみにこのやり方なんですが、コチラの記事で紹介した方法と合わせると更に便利になりますので、試してみてください!

 

フォトショップをもっと詳しく学びたい方はこの講座がオススメ