前回はお世話になりました。

[3380]前回はお世話になりました。 投稿者:Qoo~ 投稿日:2004/02/09(Mon) 16:12
Illustratorでwebページを作成の際の質問を依然させて頂いた者です。前回は丁寧にお答え頂きありがとうございました。大変助かりました。それで、作成中に又つまずいた事があったので、お伺いいたします。
 写真をIllustratorに配置する際、epsの画像を貼り付けても、最終的にwebページに立ち上げる際に不都合はないのでしょうか?
どうしても、まだまだ知識不足の為、景にグラデなどを使う際、写真の景を透明化にするために、gifにして配置するとギザギザと後ろの白い景が見えてしまうので・・・・
よろしくお願い致します。
Re: 前回はお世話になりました。 投稿者:がれーじm 投稿日:2004/02/09(Mon) 19:15
web用のデータを作るのでしたら、epsはまずいのではと思います。
デフォルトのプレビューは、低解像度の物だと思いますので、埋め込む等必要になります。
epsは商業印刷のみ使う方がいいと思います。
自分の場合ですが、最終的なweb用のデータは必ずといっていいほどPhotoshop側に持って行って処理します。
Illustratorも多少webに対応していますが、細かい調整が出来ません。
奇麗な線画像も出来づらいです(Flash書き出しは別ですが)
バージョンも9以降でしたら、文字の属性もPhotoshopに書き出せますのでPhotoshop側で作業していきます。
Illustratorは複雑なシェイプ(パス)を作る意外ほとんど使いません。
どうしてもIllustratorでレイアウトするのでしたら、配置画像はPSD、又はJPEGに統一して作業、表示する画面の倍率も100%、最終的にはPhotoshop形式レイヤーを保持で書き出しPhotoshop側で微調整するのが好ましいと個人的に思います。

web用に保存する際には、景となる色を”透明部分あり”にチェクし、マットという部分にその景色を指定すると、違和感無く画像が出来ます。(既知でしたらすいません)

亭主様、こんばんは、
最近時々、おじゃまさせて頂いております。自分ですが、亭主様が思われている方とは、全くの別人です(笑)
フリーで活動している一オペレーターみたいなもんです。
中々、アプリ関係のことを相談する相手がいないもんで、いろいろ探しているうちに、他の板で教えて頂きました。
たまに、書き込みさせて頂きますのでこれからも宜しくお願いします。
追記 投稿者:がれーじm 投稿日:2004/02/09(Mon) 19:26
>gifにして配置するとギザギザと後ろの白い景が
写真画像の景を無くしたPhotoshopネイティブのデータを配置すると透明のまま配置出来ますよ。gif画像を作るのは、本当の最後の最後です
Re: 前回はお世話になりました。 投稿者:Qoo~ 投稿日:2004/02/09(Mon) 22:47
丁寧にお答え頂きありがとうございました。
photoshopで仕上げると言うのは、全体の構造をイラストレーターで作って、レイヤー保持してphotoshopに持って行けばよいのでしょうか?レイヤーを保持する時、後々加工したい物はレイヤー分けした方がいいんですよね。昔、それをチャレンジした事があるのですが、いざ保存する時にレイヤー保持の所にチェック出来なかったので、1つ1つのレイヤーの中にサブレイヤーを一つのみにして行ったのですが、それでも駄目でした。
 それで断念したのですが・・・どうすれば良いのでしょうか?知識不足ですみません。
それと、photoshopからimagereadyに以降して最終的に処理した方が良いって何かの本に書いてあったのですが、どうなのでしょうか?
 度々、すみません。よろしくお願い致します。
Re: 前回はお世話になりました。 投稿者:亭主 投稿日:2004/02/09(Mon) 23:47
最初に、がれーじmさんへの返信から、

>亭主様が思われている方とは、全くの別人です(笑)
フリーで活動している一オペレーターみたいなもんです。

そうでしたか。いやNo 3383を読んでいるうちに、つまり、
>web用のデータは必ずといっていいほどPhotoshop側に持って行って処理します。
と言う辺りから「ん………??」と思って、結局最後で「あっ、そうだったのか、どうりで」てな訳で納得しました。

まあ、門外漢が自分の思い入れだけで展開している、独りよがりのサイトです。
幸い多くの方々の助けを得て、この掲示板がIllustrator習得を目指す皆さんのお役に立てていることを、管理人として感謝しています。
がれーじmさん、今後も宜しく!!

ところで、亭主は、がれーじmさんとは逆に、Web用の画像の扱いも含め、Photoshopは殆ど使っていません。
Qoo~さん、双方を参考にしながら良い結果を得てください。

問題を2つに分けて説明します。

1)
>後ろの白い景が見えてしまうので・・・・
この問題は、Web画像に限らず、写真などビットマップ画像をIllustratorなどに配置する際にしょっちゅう出てくる問題で、この掲示板でも形を変え繰り返し出てきます。
その対処は、前回も掲載したとおり、
*http://Illustrator-ok.com/bbs_log/faq/contennts/faq_convert_1.htm#c5
を参照して下さい。
つまりPhotoshop上で、画像に選択範囲を設定し、それをコピベなり、ドラッグ&ドロップして、Illustratorに持って来ても、それだけでは選択画像の周囲に、四角形の景部分が白く残るのです。
その解決法は、Photoshopでは「クリッピングパス」、Illustratorでは「クリッピングマスク」です。
具体的手順は上記URL参照。

2)、Webページへの画像配置の問題ですが………。
Webページ作成のテクニックは色々有って、条件や表現意図によってそれぞれ使い分ける可能性と必要が有ります。
勿論亭主はその全てに精通している訳では到底ないのですが、思いつくままに幾つか挙げて見ましょう。

No.3364のイメージが、静的なもので良いのなら、イメージ全体をIllustrator上で作成し、「Web用に保存」すれば良いと思います(その「イメージ作成」の際、写真の配置に上記のクリッピングパスなり、クリッピングマスクのでテクニックが必要になります)。
「Web用に保存」の際、グラデーション効果を生かす為には、jpegで書き出すべきですが、反面jpegではロゴやタイトルの輪郭部分に「ブロックノイズ」が発生し、輪郭が汚く曖昧になります。
それを避けるテクニックとして「スライス」が有ります。
つまり、一つのイメージファイルをスライスし、それぞれのスライスファイルごとに、画像形式や画質、色数を設定できる機能です。

Qoo~さんの場合、この辺の機能を使いこなすことで問題の解決が得られると思います。

私の場合、今全くスライスを使わず「レイヤー」で処理しています。
例えば、グラデーション景上に、透明レイヤーを配置し、そこに透明gif画像を配置します。
このメリットは、JavaScriptによって、当該レイヤーを移動したり、表示・非表示することで、動的なページを作ることができます。

*http://Illustrator-ok.com/apple_club/index.html
こちらは、「リンゴ」イメージを、リンクボタンへの「オンマウス」や「オンマウスアウト」で表示・非表示切り替えしています。

その他、フラッシュを使うことで、より一層のインタラクティブなページを作ることもできるでしょう。

イメージ一つの扱いでもWebでは、色々の方法が有ります。
Re: 前回はお世話になりました。 投稿者:がれーじm 投稿日:2004/02/10(Tue) 01:56
Qoo~様こんばんは
全体の構造をイラストレーターで作って、レイヤー保持してphotoshopに持って行けばよいのでしょうか?

HPのデザイン等を作る時ですが、(自分の場合)
やっぱりPhotoshopで全体の構造をつくります。Illustratorは複雑なパスの部品のみです。webは画面で見る画像ですから、Photoshopで作る方が奇麗に早く出来ます。テキストの画像を作ってみると特にわかります。
Illustratorはペクトルデータなので拡大しても奇麗なままです。ここが一番問題で、ついつい実際の解像度と違うサイズでつくってしまい。実現出来ないページレイアウトが出来上がってしまうことが多々あります。中々イメージに近づくにはコツがいります。
Photoshopは100%以上になるとビットが目立ってきますし、又、表示サイズ100%が一番奇麗ですから最終のイメージ通りに作業出来ます。
Illustratorでも同じといえば同じなんですが。

>レイヤーを保持する時、後々加工したい物はレイヤー分けした方がいいんですよね。昔、それをチャレンジした事があるのですが、いざ保存する時にレイヤー保持の所にチェック出来なかったので、1つ1つのレイヤーの中にサブレイヤーを一つのみにして行ったのですが、それでも駄目でした。

Illustratorのファイルの作り方によってPSD書き出しの時うまくレイヤーが保持されない、テキスト属性が保持されないことが、多々あります。バグなのかはわかりませんが。(現在CSに移行していますが多少よくなっているような気がします。)このために、Photoshopでほぼ最初から作り直すことも多々あります。
webは奥が深いですよ~、自分はもういやになってしまいましたが。
作るより、見る方が楽しい(笑)

あと、参考書等を購入してその通り出来るがやってみるといいですよ。
それで解らない時は、このような掲示板がありますから。
自分も何度も助けてもらったりしています。

Illustratorの板なのによけいな書き込み多かったですが、許してやってください。
Re: 前回はお世話になりました。 投稿者:Qoo~ 投稿日:2004/02/10(Tue) 08:15
皆様、こんなにご親切にお答え頂いて、ありがたくて泣きそうです★とても参考になりました。色々、皆様のご意見を参考に頑張って行きたいと思います。又、何かつまずく事があればよろしくお願い致します。
Re: 前回はお世話になりました。 投稿者:BH 投稿日:2004/02/10(Tue) 10:23
IllustratorでWEBページを製作とのことですが、書き出しの最終は
HTMLということでしょうか。
でしたら、GoLiveというソフトを併用することをお勧めします。
こちらですとPhotoshopIllustratorのデータを読み込み
自動的にWEBページに最適なファイルに書き出すといった機能が
あったはずです。

DreamweaverとFireworksの互換性?のような感じですよ。
そうでれば、配置画像の形式を悩むことが少なくなるかと思います。
この記事の書き込み元へのリンク (コメントや質問などはこちらへどうぞ)