dreamweaverとイラレ、フォトショップ。

元々DTP系のイラストレーターです。
素材つくりにはイラストレータのみで、フォトショップは画像処理のみで使っています。イラストレータが使い慣れているので、フォトショップでやることもイラレに頼ってしまっています。コーディングはdreamweaverを使っています。

今はWEBの勉強もしはじめたばかりで、まず自社のホームページをリニューアル製作中です。
これは2作目ですが、まだフォトショップのことがいまいちわかりません。

今はイラストレーターでホームページのレイアウト、素材、バナーすべてを作っています。
それをフォトショップにもっていきスライスしています。
しかし、修正するときなど、イラレのデータをフォトショプで開くとレイヤーを維持できてない場合が多く、一枚の画像になってしまっているので、いちいちイラレで修正し、またフォトショップで開いてスライスしています。

普通はどのような手順でWEB作成するのでしょうか？
レイヤーの維持ができないのがおかしいのでしょうか？
データが複雑で維持できません、と出たりします。

それから、自分の作りたい画像はたぶん、イラレで作ったものをフォトショップで立体的にしたり、少し手を加えるといいと思うのですが、私には簡単な画像処理能力しかなくて、スキルアップしなければいけないと思っています。

本屋でフォトショップの参考書などみても、画像処理などの説明ばかりで、イラストを書くことを説明している、オススメの本はどれかわかりません。どのように習得していってらいいでしょうか？？

イラレは10とcs4、フォトショップは5.5とCS4、dreamweavercs4使用です。
win、macどちらも使っています。


どなたかアドバイスお願い致します。

No.1 回答者： icerub 回答日時： 2010/03/28 19:06

CS4からJpeg書き出し＆スライスではダメなのですか？

AiとPSの方向性は違うし機能も違うけれど、全てをPSに渡すのは無駄のような気がします。

No.2 回答者： ORUKA1951 回答日時： 2010/03/28 21:45

DTPからこの世界に入られた方に、一般的に見られる誤解というか、ウェブへの認識違いがあるようですね。

　とにかく、この誤解を解いて、根本的な発想の違いをクリアしないと、全く先に進むことはできません。

　ウェブとDTP/ワープロの根本的な違いは
★いかに表現(プレゼンテーション)するかがDTPの世界
★いかに情報を的確に伝えるかがHTMLの世界
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より

　HTMLは、文書の内容に従って、その文書を構成する要素が、どのように構成されているかを示す構造化言語というものです。
　一般的にHTMLは、
　　　　　　　HTML
　　　　　　　　／＼　
　　　HEAD　　　　　　BODY
　　　　　　　　　　　　　　／＼　　＼
　　　　　　　　　　　　　Ｈ　　　P　　P
と階層づけられた、文書の構造を示すものです。ＨＴＭＬの制作とは、このマーク付けをする作業以外の何物でもありません。
　そのうえで、その階層構造を唯一のよりどころにして、それをどのように表現(プレゼンテーション)するかという作業になります。
　その場合も常に忘れてはならないのが、HTMLは構造化言語だということ。それを間違うと
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
# メーカー独自拡張のHTMLを使う。
# テキストを画像に置き換えて表現する。
# 余白制御のために画像を用いる。
# ページレイアウトの目的で表を用いる。
# HTMLでページを作らずにプログラムに頼る。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Style Sheets in HTML documents (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )］より
　という重大な失敗作を一生懸命作成してしまうことにしかなりません。
＞ 今はイラストレーターでホームページのレイアウト、素材、バナーすべてを作っています。
＞それをフォトショップにもっていきスライスしています。
＞しかし、修正するときなど、イラレのデータをフォトショプで開くとレイヤーを維持でき
＞てない場合が多く、一枚の画像になってしまっているので、いちいちイラレで修正し、
＞またフォトショップで開いてスライスしています。
　は、まさにそれをされているようにしか見えません。

　お客さんに提示するイメージを作成するのはイラストレーターに勝るものはありませんが、だからといって、それは、ウェブサイトの制作のにとっては、スクリーンと呼ばれる出力端末用のイメージを示す指示図以上の物ではありません。
　「それを、どうにか(たとえばスライス)してページを作ろう」などと考えてはならないのです。

　大規模なサイトになるとDreamweaverのような、Webオーサリングツールは、サイトを管理する上で極めて有効なのですが、HTMLの根本的な理解を補助してくれるものではありません。それどころか、基本を知らないとデザインを優先して、あたかも印刷物を作るような気持ちでページを作成してしまいます。

＞普通はどのような手順でWEB作成するのでしょうか？
　まず、テキストエディタで情報だけを文章にします。ワードやイラストレーター、あるいはTEXではなく、文字通り、「べた」のテキストデータを作成します。飾りがない分、文書としてきちんとしたものができるでしょう。
1) これをDreamweaberをお持ちなら、そのまま作成したいHTMLのDOCTYPEに流し込みます。
2) それを文書構造に従って、マークアップしていきます。
　　ある部分は、見出し(レベルは1-6)、ある部分は、本文とマークアップします。
　　本文内には、段落や引用分や箇条書きなどのブロック要素や、強調したい語句、引用語句などがありますから、やはり適切にマークアップします。
　　本文以外にもサイトナビゲーションとか、脚注に当たるものなでもありますから、それらも汎用ブロック<div>などでマークアップして、リンクやデザインのためにidやclassを割り当てます。
　★この作業は、どのようなタグでマークアップするかは文書を理解している著者自身が行います。要素名が決まれば、具体的なタグはオーサリングツールが補助してくれます。
　ある部分を選択状態にして、「引用」を選択すると<blockquote>というタグで囲んでくれる。でもそれが引用文か否かは著者しか知らない。そのとき、CSSでどのようにデザインするか、CSSで何ができるかは著者が知っておかないと効率が悪い。

3) 画像(あくまで挿入するものや背景であって、デザインのための画像は使ってはならない！！

4) マークアップができたら、Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )や、The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )で文法チェックをする。必要なら修正

5) イラストレーターで作成された指示ずがあれば、それを目標にスタイルーシートを作成していく。

6) 色々なブラウザはむろん、解像度(ウィンドウサイズ)の異なる端末でテスト、最近は各社携帯電話での表示も確認する必要がある。

7) 転送

というのが大きな流れです。
　私自身は、今はタグなどはよく使うものは、ほぼ覚えてしまったのでオーサリングツールに頼ることは、ほとんどありません。かえってまどろっこしいし、オーサリングツールの方が限界があって。特にCSSが主体の最近のサイトでは、オーサリングツールはほとんど役に立たないです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的であることから、一部のウェブデザイナーには見直されつつある。ただし入れ子になったテーブルやスタイルシートを多用したサイトを、最初からテキストエディタでコーディングするのは煩雑であるため、デザイン重視のサイトの構築には、なおWebオーサリングツールを併用するのが一般的である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Webオーサリングツール - Wikipedia( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83% … )］より
　・・・私は、「スタイルシートを多用したサイト」はテキストエディタの方が断然有利だと思いますけどね。

＞今はイラストレーターでホームページのレイアウト、素材、バナーすべてを作っています。
　ではなくてもあくまで、素材、バナーだけを作成すべきです。

　色々なウェブデザイナーさんに下請けをお願いすることもあるのですが、実はDTP出身者は使い物にならない人が多いのも現実です。なかなか、DTPの考え方から脱却しにくいようです。それができれば、元々センスがよい人が多いので、すばらしいスタッフになれるのですがね。・・・どうしようもない場合は、請負業務でデザインサンプルだけを作って、発注者へのプロモーション素材制作専門になっていただくしかない。

　頑張ってください。
とにかく仕様書の
2 HTML 4の概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
14 スタイルシート ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
だけはしっかり読んで、カルチャーショックを味わっておいてください。

そして、
はじめてのWebドキュメントづくり ( http://www.asahi-net.or.jp/%7Esd5a-ucd/www/ )
でHTMLとはなにかを、初心者に帰って実際に試してみるのが上達の早道です。

頑張ってください。

No.3 ベストアンサー 回答者： pantaron_ 回答日時： 2010/03/29 14:00

CS4をお使いなら、イラレでレイアウトもバナーも作っているようですので、イラレでスライスしてはいかがでしょう？

私はCS3なのですが、CS3でもできるので、CS4でもできると思います。
私はPhotoshopでレイアウトをつくりますが、ロゴや角丸のバナーなどはイラレで作り、パーツとしてPhotoshopにペーストして使っています。
全部のレイアウトにしてからPhotoshopでスライスしています。
私ももともとDTPをやっていたのでPhotoshopには詳しくないのですが、枠をつくったり色を塗ったり、角を丸くしたり影をつけたりくらいです。
私の知人はイラレでデザインをつくり、100%にしてプリントスクリーン（macだとキャプチャ）を取ってフォトショップで開き、スライスしてコーディングしていました。
レイヤーを生かしたままイラレとPhotoshopの間を行き来するのは大変なので、どちらを主にするかを決めて作業してはいかがでしょうか。