• 締切済み

ホームページのデザインについて

ページのデザインを、イラストレーターまたはフォトショップで作った場合(文字等のレイアウトも含めて)、それをそのままペ-ジのデザインとして使うにはどうすればいいのですか? やっぱり部品ずつでレイアウトしていくのでしょうか? Dreamwever4を使っています。

  • Malco
  • お礼率70% (120/170)

みんなの回答

  • sight
  • ベストアンサー率53% (199/370)
回答No.11

私の意見として、いくつか整理させていただきます。 ・一枚の画像ファイルとして出力し、クリッカブルマップとしてリンクなどを設定することはおすすめしません。  理由は、当然ファイルサイズが大きくなるから。全体を読み込むまでにどれだけ待てば良いのでしょう。  そして、もう一つの理由は、全然ユーザーフレンドリでないから。  最近、プロの作ったページでも、メニュー部分を一枚の画像で作り、クリッカブルマップとしているものも見受けられますが、言語道断ですね。画像を読み込み中や、画像の読み込みを切っている場合は使い物になりません。ちゃんとスライスで切って、分割された画像でALTの設定などをしていれば、このような場合も閲覧者のストレスを抑え、機能することができます。 ・Macromedia Flashは・・・おすすめしません。  デザイン面では優れていますが、基本的に上の後者と同じ理由は当てはまりますし、閲覧者がプラグインのインストールが必要になります。一回flash使ったページ見れば入っているでしょうが、それでもうっとうしいですね。どうしても、というのなら、トップページに300×300くらいの小さめのサイズで使い、見たくない人はスキップできるような手段も講じる必要があると思います。基本的に、Flashのページは、「見ると効果的だけど、べつに見たくなかったら見なくてもかまわない」とった作りをするべきだと思います。  もう一つ、ちょっとしたミスで、結構ヘンな挙動をします。たとえば、IEで正常に使えるページを作っても、NNでは暴走を始めるFlashページ・・・なんてのもあります。FLASHに関して素人の人が、が一回限りで使うのでしたら、やめた方がいいと思います。試用期限過ぎたら作成済みのページの修正もできなくなるし・・・。 >PhotoShop6.0/ImageReady3.0とゆうのを持ってないので、ちょっとわからないのですが・・・ とのことですので、それ以前のバージョンでしょうか。PhotoShop5.5にもImageReady2.0がついていたように記憶していますが、HTMLの出力/スライスの作成機能があったかな・・・? 画像作成側のソフトがHTMLの出力/スライス作成機能を持っていれば一番楽なんですが、そうでなければNo.6の方のおっしゃるように、一枚の画像として出力したものを読み込んで、スライス作ったりできるソフトがあればよし。 なければ、ちょっと面倒ですが、部品ごとに保存するしかないでしょうね。 とにかく、ページを分解した形で出力すれば、その合計のファイルサイズは全体を一枚の画像ファイルとしたときよりも小さくなるはずですし(細かく最適な圧縮方式、画質が選べるから)、閲覧する方にしても、見やすいです。

Malco
質問者

補足

アドバイスどうもありがとうございました。 イラストレーターに「属性」とゆう機能がありました。そこで、部品に直接URLをつけることができました。それを「web用に保存」したら、1枚の絵が30~40KBになり、それをDreamwever4で開くことができました。画像も重くないし、一応この方法でやろうかと考えています。 いろんな方法を教えていただいて、本当にありがとうございました。 ここでみなさんへのお礼とさせていただきます・・・。

  • PCboy
  • ベストアンサー率30% (150/490)
回答No.10

 間違いました! 200KB前後まで です。

  • zoh
  • ベストアンサー率34% (273/789)
回答No.9

>画像サイズが大体500KB以下だと、最新のIE5.5などのWebブラウザを使ってる分には、表示スピードにそんなに時間はかかりません!! (PCboyさん) とのことですが、どういった接続環境を想定しての回答でしょうか?500KBytesの画像ファイルは、アナログ回線による56Kbpsの接続でしたら、データのみで考えても(headerのデータサイズやnegotiationにかかる時間、伝送遅延は除くと言うことです)「(500000*10)/56000≒89.3」となり、この計算のみで約1分半、実際には確実に2分程かかる事になりますが…。(「*8」でなく「*10」なのは、理由はおわかりですよね?) またIEは、5.5になって、RenderingSpeedが通信速度を越えるほどを速くなったのでしょうか?少なくとも56kbps程度の接続速度では、500KBytesの一枚の画像を表示するに場合において、IE4.xやNN4.7xとの速度差は体感できるほどの物ではない(実際には1%無い)と思いますがいかがでしょう?

  • PCboy
  • ベストアンサー率30% (150/490)
回答No.8

 普通の、ホームページに<>タグを使って貼り付けても 画像サイズが大体500KB以下だと、最新のIE5.5などのWebブラウザを使ってる分には、表示スピードにそんなに時間はかかりません!!  <Body Background="cosmo1.jpg">などのように、普通のHTMLタグ貼り付け方法で充分です!!(^o^)丿  

  • zoh
  • ベストアンサー率34% (273/789)
回答No.7

某所でwebsiteを作成している、zohです。 専門家の意見としては、先に回答されているような「全部を一枚の画像として扱う」方法はお勧めしません。その画像がいったい何KBytesになることやら。べた塗りが多い画像を色数の少ない「*.gif」で保存すれば別ですが、「Illustrator」「PhotoShop」を使っていると言うことはそれなりに凝った画像になっていると思われます。まだまだアナログ/ISDN程度の接続環境でご覧になる方も多いと思いますので、内輪だけの限られた人にあらかじめ「重いサイトだよ」と言って、我慢してみてもらうのであれば別ですが、多くの人に見てもらいたいのならそれはやめるべきです。恐らくあまりの重さに読み込み途中でキャンセルする人が多発します。 「じゃあ、どうすればいいの?」ですよね。お答えします。 「macromedia FLASH」を使うのが良いと思います。「Dreamweaver 4」との親和性も高いはずです。そして、これなら「*.eps *.ai」を読み込むことが出来ます。オブジェクトごとに扱えますし、線は線として、塗りは塗りとして扱えます。また、多くのPCに再生プラグインがインストールされています。まずは書店で「おしえて!macromedia FLASH 5」と言う本を買ってきましょう。そうすれば、30日間フルに使える体験版が使えます。本の解説もとてもわかりやすいです。もしくはmacromediaのサイトから体験版がダウンロードできます。参考URLからどうぞ。 ついでに、「おしえて!macromedia FLASH 5」は↓こんな本です。 http://shopping.yahoo.co.jp/shop?d=jb&id=30797781 …しかしながら、全面にイラストをちりばめた一枚絵なら、FLASHを使うメリットはあまりないかも知れません。

参考URL:
http://www.macromedia.com/jp/software/flash/
  • none123
  • ベストアンサー率30% (49/162)
回答No.6

ドリームウィーバーということなのでもしかするとファイアーワークスとかもお持ちでしょうか? もし持っているなら、ファイアーワークスにPSDファイルを読み込んで、ファイアーワークスの機能で、スライスとかを行うのはどうでしょう。ドリームウィーバーと連携が取れるはずです。イラストレータのデータが読み込めたかどうかは記憶にないのですが、ベクトルデータも扱えたのでもしかすると読み込めるかもしれません。

  • PCboy
  • ベストアンサー率30% (150/490)
回答No.5

 これは、簡単な事ですよ。 フォトショップで、その作ったイメージデータを画像(形式)で保存してやって、フリーソフトのホームページエディターなどを使って、<imag src>タグで、その画像を貼り付けてやれば良いです。  フォトショップは、Gif形式でもJpeg形式でも保存出来るので、どちらでもお好きな方で保存してやると良いです! その保存の際、Jpeg形式の場合は、パーセントで保存画質の設定などが出来るようになってます。

  • next-co
  • ベストアンサー率28% (43/149)
回答No.4

>1枚の画像としてはりつけたら、その中の部品(ボタンなど)は設定できなくなりますよね? クリッカブルマップを使用すれば、画像の任意の場所をクリックするとリンクさせたりすることができます。 Dreamweverを使用していませんから、解かりませんが多分この機能は付いていると思います。

  • piyohiko
  • ベストアンサー率30% (7/23)
回答No.3

>>ペ-ジのデザインとして使うにはどうすればいいのですか? ここらへんがよく分からないのですが、作った画像を背景にしたいのであれば bodyのところに"background"で置けばいいんじゃないかなと思います。

Malco
質問者

お礼

ありがとうございます。 backgroundeに置いた場合、その絵の中のボタンとかは指定できないですよね?(意味わかりますか?←説明下手ですいません) ページ全体の構成をイラストレーターで書いたんです。ボタンやロゴやイラストを。ロゴやイラストはそのまま背景として使えると思うけど、ボタンは別ではりつけないといけないですよね?その場合、自分で作ったボタンは、その画像にHTMLソースをつければ、ちゃんと機能するのですか・・・?

  • sight
  • ベストアンサー率53% (199/370)
回答No.2

PhotoShop6.0/ImageReady3.0には、デザインされた画像をスライスで切って(部品)HTMLにまで書き出す機能があります。 一度この機能を作ってページを作成し、変更したい箇所があればDreamweverで読み込んではいかがでしょう。 スライス作成機能のないバージョンのPhotoShopの場合は部品を作成して、Dreamweverでちまちま配置していくしかないのではないかと思います。

Malco
質問者

お礼

ありがとうございます。 PhotoShop6.0/ImageReady3.0とゆうのを持ってないので、ちょっとわからないのですが・・・。 部品すべてを画像にしてレイアウトしようかと考えています。

関連するQ&A

  • ホームページや素材のデザイン

    私は、デザイン能力が全くありません。 最近ホームページを作ろうと頑張っていますが、いつもデザインから先へ進むことができないのです。 ページのレイアウトデザインも素材のデザインも全くだめなので・・・ 知人からは「デザインは考えるものじゃない、閃くものだ」とか言われました。それはそうかもしれませんが・・ そこで質問なのですが、こんな私でもWEBデザインが身につく良質な書籍はありませんか? レイアウトならこの書籍、ロゴ作成ならこの書籍などなんでもかまいません(両方のっているなら最高です)。 一応、ソフトはドリームウィーバー、ファイヤーワークス、イラストレータ、フォトショップは持っています。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • フォトショップ、又はイラストレーターを使ったWEBデザイン

    こんにちわ、kaituといいます。 WEBデザインをするにあたって、 いつも主にフォトショップで素材を作って その画像をDreamweaverの方にもっていき、 サイトデザインをしています。 独学なのもあり、効率があまりよくないので、 フォトショップやイラストレーターを使った WEBページレイアウト作成講座(ページ全体等) のあるサイトを探しています。 よろしければ回答お願いします。

  • 2色使いのデザイン。

    こんにちは、現在マックでイラストレーターとフォトショップを使ってチラシのデザインを作っていますが、クライアントから2色使いで作成を依頼されましたが、2色とは基本的にどういうことですか?すみません素人です。CMYKだと4色ですね、特色とマゼンタの2色でっと言われました。それはフォトショップで写真などをどのように操作すれば良いのですか?イラストレーターで最後に作成する場合はイラストレーターの黒文字も色とみなすのですか?この場合イラストレーターの文字の色とフォトショップの特色1色とマゼンタで3色になってしまうのですか?特色の色は決まっています、どのように写真を2色にできますか?どなたか回答お願い致します。

  • 手書き文字&イラストをデザインに取り込みたい

    手書き、もしくはスタンプでの文字(やイラスト)を イラストレーターやフォトショップに取り込んで、 その後、ソフトでまた加工、レイアウトしたりして (文字の書いてある紙の色や質感などは残さずに、 文字(結構細かい)だけをとりこんで、 ファイルにレイアウトしたいのです。) 印刷物にしたいのですが、取り込み方の方法が いまいちわかりません。。 どなたか知っている方、 いらっしゃいましたらよろしくお願い致します。 ちなみにIllustrator9.0、photoshop5.5を使用しています。

  • トライバルをデザインするならフォトショップかイラストレーターどちらが良いですか?

    トライバルをデザインするならフォトショップかイラストレーターどちらが使いやすいですか? フォトショップは、使った事がありますがイラストレーターは、使った事がありません。

  • パッケージデザイン

    グラフィックデザイン(DTP)の場合ですと、イラストレーター、フォトショップ、クォーク(もしくはインデザイン)が、三種の神器といわれますが、パッケージデザイン(容器)に必要な、アプリケーションって何なのでしょうか。

    • ベストアンサー
    • Mac
  • デザインだけの作成費

    ホームページのデザインだけの作成費(フォトショップやイラストレータ、PSD、AIデータ含む) は1サイト(10ページ)あたりいくら位が相場なのでしょうか? (大小50パーツ位/サイト) また、デザインだけの作成をしている業者はあるのでしょうか? ほとんどが専属か、フリーで収入を得ているのでしょうか?

  • フォトショップでのWEBデザインで質問

    WEBでのデザインの話なのですが。。。(XDなどは使わずフォトショップで全体のイメージを作る場合のお話です。) フォトショップだとイラストレータのように文章のスタイルがコピーできず困っています。 文章の中の1部分だけ変えたい時に、コピペした文章を持っていってもそのままスタイルが反映されない(文字の大きさがコピペしたスタイルより小さくなっていたり)現象がおこるのですが、もしご存知であれば防止する是非教えていただきたいのですが可能でしょうか? フォトショップでデザインを作る場合文章の反映などに時間がかかってしまっていて、属性のところから再度同じpt数に設定し直したりしています。非効率だとは思っているのですが他に方法を知らずずっとこの方法でやっています。。。 何か良い方法などあれば教えてくださると助かります!!

  • イラストレーターでWEBデザインする時

    WEBデザイナーをしています。 私はイラストレーターの方が文字の装飾などパーツを作るのに便利なので、 全てのデザインをイラストレーターで行っています。 そこでものすごく木になることがあります。 クライアントから素材として大きな画像をもらうことがあります。 この場合は、フォトショップで使用する大きななどに調整してイラレにもって行きます。 さらにイラレ上でこの画像に文字をのせたり、マスクをかけたりデザインをしてから、 デザインが仕上がった段階でスライスに入ります。 当たり前ですが、一旦フォトショでjpgで書き出して、さらにイラレのスライスでもjpg書き出しをするので、 写真画像があまりきれいではありません。 大きなままイラレに持ってきて、イラレ上で縮小して書き出せば、そこそこキレイなのですが、 イラレを保存する時にかなり重くなってしまいます。 イラストレーターでWEBデザインをされる方は写真画像の書き出しなどはどのようにされているのでしょうか? 良い方法、もしくはやはりイラレでデザインすべきでないなど、教えていただければうれしいです。 よろしくお願いします。

  • ホームページ制作

    ホームページを作る際にまず イラストレーター、フォトショップを使って、 際とデザインをしてから、サイトを作ったほうがいいと 言われたのですが、 具体的にどのようなメリットがあるのでしょうか? 普通にラフに紙にデザインを描くのではダメなのでしょうか? またイラストレーターフォトショップを使って創った画像を 切り取ってサイトを作るというのですが どうやって画像を切り取ったらいいのでしょうか?