プロが教える店舗&オフィスのセキュリティ対策術

いつも有り難うございます。
HPの管理もどきのようなことをやっている個人事業者です。(独学レベルです。)

イラストレータでページ自体(.ai)を作成されたデータがあります。
これをweb上に公開・管理運営するように依頼されました。 
質問は、どのような手順で行えば良いか、です。
 ・ページは全体で8枚ほどです。(それぞれ.aiで作成されています。)
 ・デザインは崩したくないです。
 ・ページをトップページからリンクでつなげます。
    (その他、ページ内のイラストや文にもリンクを付けたいです)
 ・写真が50枚程度あり、またこれからも不定期で更新していきたい。
 ・写真は拡大したい (HPビルダーでの作成・操作はできます)
 ・持っているソフトはHPビルダー10、イラストレータ9.0
 

現在思い浮かんでいる手順は、
イラレ上で、ページ内のイラストや文面を細かくデータに分割・保存 → HPビルダーで配置し直し、リンク作成(htmlファイル作成) → アップロード
この手順は、非常に作業に手間がかかり過ぎるように感じています。


技術的には、タグが多少解っており、CSS等が使いこなせていないレベルです。 他の質問や各ソフトの紹介解説をみても、私の状態にあうかどうかが良くわかりません。  ご回答いただけるとありがたいです。

A 回答 (3件)

Photoshopを使った場合も基本的には同じような感じです。


先程、紹介したURLに載っているように、
・データ書き出しでPhotoshop形式で書き出す。
・そのデータをPhotoshopで開いて、ツールパレットの一番したのボタン押してImageReadyに渡す。(直接ImageReadyで開いてもいい)
・ImageReadyのスライスツールでパーツごとに分ける。
・あとは、JpegやGIFで書き出す。一応HTMLも書き出してくれます。
・それをビルダーで編集

↓ImageReadyでのスライス例
http://www.too.com/ec/tutorial/slice/index.html

ようはIllustratorで個別にWeb用に保存としていたのを後からやっているだけ。

ImageReady使えるようになれば、ロールオーバー(マウス重ねると絵が変わる奴)やアニメーションGIFが作れるようになります。
ビルダーでも出来るかもしれませんが。


繰り返しになりますが、印刷物と違って、Webページは見る側の環境に大きく左右されるので、レイアウトにはズレが生じます。
どうやるにしても、Illustratorのデータを100%再現するのは難しいです。
SEOやアクセシビリティを考慮しないなら、FlashやPDF、画像にすることで100%再現する事はできますが…。

どんなソフト使うにしても、貴方が思い浮かべていた手順のように、
ボタンや見出し等の装飾されたもの、写真やイラストをJpegやGIFで保存して、文章は一旦Illustratorからメモ帳等にでもコピー&ペーストしておいて、
Illustratorのレイアウトを参考にして、
ビルダーで新規にレイアウトを作り、適切に配置するしかありません。
CSSを使えば、ある程度レイアウトを制御できますが、ブラウザによって解釈が異なるので、ちゃんとやらないと悲惨なことになります。

相手には印刷物とwebページは全く違う事を説明をしておいた方がいいでしょうね。
    • good
    • 0
この回答へのお礼

dezimacさま

再度の詳しいご回答ありがとうございました♪
私の知りたかったことが、すべて聞けたようです。 そしてスマートな説明で、本当にわかりやすかったです。 
重ね重ねありがとうございました!

依頼主とこのtopicをみて、相談しながら、これから先を考えていきます。 

また次回、よろしくお願いします~(^o^)/

お礼日時:2007/02/01 23:19

ちょうど同じ悩みがあります。


私も今、友人のホームページを作っています。
実は広告系のデザイナーなので、初めて今回HPを作りました。
やっぱり使い慣れている、イラストレータでラフを作りました。
(友達にもそのラフを見せてデザインの了解を得ました)
ところが、そこからWeb用にデータを作るのが、ほんとに大変でした。ぜんぜん再現できないのです。
問題1
オブジェクトの重なりがフレームに落としこめない。
私はできるだけ、一枚のjpgに書き出して、背景で配置しています。
(flashをつかうとできるらしいのですが・・時間も無く。)

問題2
フォントの行間が、設定できない。種類も選べない。
(これはCSSで対処できました。でも字間は無理みたいでした)

問題3
写真を切り抜いて、重ねることはできない。
(私の技術ではです・・)

文字はなんとかなりそうですが、問題はフォトショップが無いことですね。使いやすい画像ソフトがあればいいのですが・・無料のものでもjpgが作れればいいと思います。プロじゃないし。

動かないところはできるだけ、1枚背景にしてしまうことをお勧めします。リンクがある文字だけ別で作るのはどうでしょうか?
(更新を自分でやる前提で)まずはテキストを除いて、イラストレータでjpg書き出してみてはどうでしょうか?
それを画像ソフトで適正な処理をするのです。

まったくの素人意見です。私もいい解決法を探しているところです。
    • good
    • 0
この回答へのお礼

早速のご回答ありがとうございました。

同じ悩みをお持ちでしたか! 
このように問題点を書き出し、その結果を書いていただいただけで、とってもすっきりいたしました。 ありがとうございます。

依頼主と共に、このご回答を参考にさせていただきます。 
ありがとうございました。

お礼日時:2007/02/01 13:38

Photoshop(に付属のImageReady)があればいくらか楽なんですがね。



パーツ単位でWeb用に保存して、ビルダーで配置し直して再構成するしかないと思いますよ。

Illustratorはボタンとかのパーツを作るには適していますが、もともとWebページをレイアウトするソフトじゃないですからね。
チラシとか印刷物を作るならIllustratorでいいけど。
Webページは印刷物と違って見る環境にも影響されるので、PDFやFlash、画像にでもしない限りレイアウトは多少なりともズレてきますね。

http://www.too.com/ec/tutorial/t2_2/ai9web1.html
    • good
    • 0
この回答へのお礼

早速のご回答ありがとうございました。
書きそびれましたが、photoshop5.5 を持っています。
ただほとんど使用したことがなく、今までの画像処理でしたらMSofficeのPictureManagerなどで事足りていました。

photoshopを利用する場合は、どのような手順になるのでしょうか?
よろしければ引き続きご回答いただけるとありがたいです。

お礼日時:2007/02/01 13:34

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!