超便利!ドリームウィーバー(Dreamweaver)のExtractで画像書き出し。CSSコピー

ホームページ制作

普段はillustratorをつかってサイトを作るので普段Extractを使うことはないんですが、今回PSDデータがきたので、使ってみました。

Extractってなに?

PSD をモバイルおよびデスクトップ向け HTML ベースの Web デザインにすばやく変換する方法について説明します。CSS、画像、計測値、フォント、カラー、グラデーションなどを、Photoshop から直接 Dreamweaver に抽出します。

引用:adobe Dreamweaver CC 内の Extract

なんか便利そう!!!

Extractを使うメリット

  • 画像の書き出しが楽
  • CSSがコピーできるから調整が楽
  • テキスト入力しなくてもいいので楽

Extractのデメリット

  • 特にないけど、しいて言うならPSDファイルをしっかり作らないといけないところ。
    ボクはPSで作ることがないので、レイヤー管理とかが苦手。
  • Dwでたまに画像の書き出しエラーがでる。

Extractの使い方は簡単でした。

  1. DwのExtractを開いてPSDデータをアップロードする
  2. 読み込んだPSDデータから画像・CSSを書き出す

こんだけ!Photoshopのレイヤー単位でも書き出しが可能だし、単体でも書き出し可能!
おまけにテキストコピーとかもできちゃう。

んーこの感じからするとAdobe的には、Photoshopを制作ツールとして使いたいんかなぁ。
まぁそうだよね。illustratorはベクター画像なわけだし。SVGとか作ったりとか、画像の拡大とかは楽でいんだけどねぇ。
レイヤーって概念も薄いから触りやすい。

Photoshopはレイヤー管理しっかりしてないとホームページみたいにレイヤーが増えまくると大変なことになる・・・・
紙媒体出身なので、ずっとイラレ使ってたけど、photoshopの方がいいのかもなぁ。

とはいえ、今更・・・・
あといいのは、よくMacからデータが送られてくるので、フォントがずれたりするんだけど、
Photoshopだと開いただけではフォントがくずれない!っていうメリットもある。

たまにPNGとかで送ってくる人もいるけど、それはやめてほしい・・・

んーまぁでも、illustratorがいいかなー。ファイルサイズとかあほみたいにでかくなるけど。
慣れたものの方がはやい!!

まとめ

PSDが、レイヤーとかもきれいに整理されてるデータなら使うのもあり。
色のコピーとかめんどくさいんですよねぇ。
時間短縮にもなるので、使わない手はないと思います。

気に入った記事であれば、ぽちっとお願いします<(_ _)>