• ベストアンサー

ホームページに使うパーツの画像の作り方

ホームページ制作初心者です。 現在、dreamweaverやイラレ、photoshopを使ってホームページを手探りながら作っています。 そこでお聞きしたいのですが、タイトルにあるようなホームページの素材(例:バナーやボタンなど)はイラレで作った方がいいのでしょうか? イラレで作るとどうしてもJPEGに変換したときサイズが変わってしまうので、Photoshopで作っていたのですが、なぜか他のサイトと見比べてもかなり画像が粗い(というより白ぼけ)です。 一応JPEGに変換するときは画質(100)を最高にしてるんですが・・・ どうかご助言のほどよろしくお願いいたします。 また、イラレで作った時、変換するとサイズが代わって(大きく)なってしまうのをなんとかしたいのですが。。。合わせてよろしくお願いいたします。

noname#52036
noname#52036
  • HTML
  • 回答数5
  • ありがとう数5

質問者が選んだベストアンサー

  • ベストアンサー
  • Seravy
  • ベストアンサー率47% (118/249)
回答No.5

枠が表示されるのは、リンクを貼った所ですよね? <img ... border="0"> とすれば消えますよ。

noname#52036
質問者

お礼

ありがとうございます。 正直、いまからすべてGIFで作り直すのには少々、というかかなり骨が折れますが頑張ります! もっと早くに質問しておけばよかった・・・orz 本当にありがとうございました。

その他の回答 (4)

  • poposu
  • ベストアンサー率34% (15/43)
回答No.4

<img src="xxxx.gif border="0"> このborder="0"で、青枠が消せます。

noname#52036
質問者

お礼

ありがとうございます。 今からもう一度すべてGIFに変えるのは少々骨が折れますが・・・ 頑張ります! あと、イラレでサイズが変わるの、解決しました!!! 本当に本当にありがとうございした!

  • poposu
  • ベストアンサー率34% (15/43)
回答No.3

ボタンは基本的にJPEGでなくGIFで保存します。 写真など複数の色が必要な画像はJPEGで保存します。 256色以下の画像ならGIFです。 イラレで大きさが変わってしまう場合は 恐らくイラレで設定している枠よりもはみだして作成しているからだと思います。解決方法は、ファイル→WEB用に保存で、右下にカラーテーブルというのがありますが、その右に画像サイズというのがありませんか? そこをクリックしてアートボードサイズでクリップにチェックを付けて 適用を押してみてください。 それで解決できるはずです。

noname#52036
質問者

お礼

ありがとうございます! 早速試してみます。 ちなみにGIFだとIE6で枠ごと青く表示されてしまうのでJPEGにしているのですがなにか解決方法はありますでしょうか?

  • Seravy
  • ベストアンサー率47% (118/249)
回答No.2

んー? えーと、私はPhotoshopでやってますが、、 SAYKAさんのおっしゃる通り、使う時のサイズと作る時のサイズはかならず統一しましょう。イラレで作った時も、かならず一旦Photoshopなどで必要なサイズにラスタライズしてから保存します。 あと、JPEGは輪郭がにじみやすいので、グラデーションのあるような素材でなければGIF、PNGを使うとくっきりなると思いますよ。

noname#52036
質問者

お礼

ありがとうございます。 一度PNGでやっていたのですが、PNGだとIE6で枠ごと青く表示されるんです・・・ で、仕方なくJPEGでやっています。 GIFも試してみます ありがとうございました。

noname#39970
noname#39970
回答No.1

画質ではなく大きさの問題。 100pixel x 100pixel で作った部品を 100x100以外で表示したりすると そうなる。 そうでなく?

noname#52036
質問者

お礼

早速の解答ありがとうございます。 イラレのドキュメントで100*100でピクセル単位で作っているのですが、書き出ししてphotoshopで開くとなぜかかなり画像が大きくなっているんです・・・

関連するQ&A

  • イラレとフォトショップでバナー用の画像を作ってるのですが。

    こんばんわ。初心者で独学なのですが、600*200サイズのバナーをイラレとフォトショップで作ろうと思って作業しています。その際、分からない事が出てきたので質問させていただきました。以下です。 1:photoshopで600*200ピクセルで画像を切り抜いて、それをイラレに配置するとピクセル数がぜんぜん大きくなっている。(600のはずが1300くらいになってました。) 2:イラレの四角ツールで600*200の四角形をつくり、それを台紙として画像を作成したところ、gifで完成品を保存してサイズを確認してみると、600*200ぴったりでなく、微妙に数値が614とかになっている。(画像によって大きさがまちまち)。 画像は、サイトから引っ張ってデスクトップに保存したjpegを、イラレに配置して使いました。 モノによってだいぶ画像の仕上がりサイズにばらつきがあるのはなぜなのでしょう?? 要するに、600*200のバナー用のgif画像を作成したいという事なのですが。photoshopとイラレとjpegの互換性とかが関係あるんでしょうか。正しいピクセル数値で作成するにはどうしたら良いですか? また、photoshopやjpegファイルをイラレに配置する際、サイズの食い違いを避ける為に注意する事はありますでしょうか? すみません。なんだかえらい長々と書いちゃいました。わかりづらい文章で申し訳ないです。お願いします。どなたかぜひご指南ください。お返事お待ちしてます。

  • 版下用データ作成の画像処理について

    初心者の私が社内のカタログ制作(16頁)をするはめになりました。渡された画像Jpgをイラレでレイアウトするのですが、PHOTOSHOPでサイズや画質を加工し、イラレで配置する際の保存形式がわかりません。RGBを変換しないと印刷用には使えないと聞きましたが。また、紙印刷用の版下をイラレで制作する際の注意点も教えて頂きたいのですが。初歩的な質問で済みませんが、あせっていますので、よろしくお教え下さい。

  • 画質を落とさずに容量を減らす画像変換方法について

    私はWEB制作に関わる仕事をしています。 たとえばバナー広告などを制作する際、媒体のほうで容量制限があるため、容量サイズを落とすのにいつも苦労しています。 photoshopなどで画質を落とせば容量も落ちますが、やはり写真などを使う場合はきれいに見せたいし、ロゴなどもつぶれては困ります。 そこで、写真を使ったjpgなどのバナーをgifに画像変換して、画質はきれいなまま容量だけを落としてくれるというツール(ソフト)がある、ということを聞いたことがあるのですが、なんというソフトなのかがわかりません。 どなたか知っている方がいれば、ソフト名を教えていただけますでしょうか。 もしくは、簡単に画質を落とさずに容量を減らせる方法があれば、教えてください。

  • GIF画像で画質が落ちない無料サイト、ソフトあれば教えて欲しいです お

    GIF画像で画質が落ちない無料サイト、ソフトあれば教えて欲しいです お願いします。 目的は ■ホームページ掲載用にJPEG保存での人物画像を2~3枚JIFで動かし1枚の画像を作る ■4枚ほどのJPEG保存画像をJIFで動かしバナーを作る ちなみにネットで見付けたこちらのサイトを使わせて頂いております(画質がかなり落ちます) http://www.bannerkoubou.com/anime/ パソコンにはphotoshop7.0が入ってます

  • ホームページ用の素材の作り方

    こちらホームページ作成初心者のcyainuです。どうしてもわからないことがあったので、こちらに質問させて頂きます!よくホームページ用の素材ってありますよね?バナーとか、アイコンとか。私はホームページによくある、HOMEとか(このサイトでいうと、比べてOK、教えてOK,こっそり教えてOKのようなやつ)を作りたいんですけど、作り方がわかりません!こうゆう素材ってどうやって作ればいいんですか?あと、この名称も教えてくださると助かります。誰か教えてください。ちなみにdreamweaverでホームページを作る予定です。(HTMLタグもわかります)

    • ベストアンサー
    • HTML
  • 画像の背景色とHTMLファイルの背景色

    私がWebページを制作している環境は下記のようになっています。 OSはWindowsXP。 モニターは液晶モニター。 DreamWeaver3でWebページを制作。 FlashMX、FireworksMXを使って、ムービーコンテンツ、画像を作成。 Fireworksで制作した画像をPhotoshop7でJPG形式に変換。(最高画質・低圧縮率で変換) 【ここからが質問です】 DreamWeaverで設定したHTMLファイルの背景色&Flashコンテンツの背景色と PhotoshopでJPGに変換した画像の背景色を 同じカラーコードにしても、 ウィンドウズのプロパティで画面の色を16ビットにすると Webブラウザ上で違った色に見えてしまいます。 (32ビットだと大丈夫) Fierworksで制作したPNG形式の画像をUPすると 色の違いが無くなるのですが JPG形式に変換した画像だとダメです。 このブラウザ上での色の見え方の違いを解決することは出来ないのでしょうか? 仕方のないことなのでしょうか? お分かりになる方、教えてくださると助かります。 よろしくお願いします。

  • HP制作で使用する画像について

    自社のホームページを制作しております。なるべく鮮明な画像を表示させたいと思い、サムネイルを配置、クリックすると大きなサイズの画像(700×1200ピクセルほど)を表示させるように設定しております。 画像容量が大きいためか、どうしても表示が遅くなってしまうのですが、画像の表示サイズは大きく、容量を軽くすることは可能なのでしょうか? 編集ソフトはPhotoshop、画像はjpegに変換して使用しております。 適した画像の編集方法などがありましたら教えてください。宜しくお願いします。

  • ホームページ作成、素材の大きさの設定は??

    Dreamweaverでホームページを作成しようと思いますが、事前にある程度素材を用意しておこうと思っています(Jpeg画像とか、PNGとか、GIFとか)そこで素材の大きさの設定(pixel)方法ですが効率の良いやり方はありますか?プロはどのようにして効率よく素材をはめ込んでいくのでしょうか?素人の私に伝授お願いします。ちなみにDreamweaverで大きさの微調整が出来る事は理解しています。フォットショップで逐一画像のサイズを修正するのが面倒なので、出来れば準備段階で大きさを作って、1発で「ピタ!おおっ!大きさ完璧!」とはめ込みたいです。ムリでしょうか・・・・。

  • ホームページの制作方法について

    初めてホームページを制作します。制作手順について知りたいです。いま考えている方法は、最初にIllustrator(cs4)で画面全体を作って、そこから必要パーツを切り抜きDreamweaver(cs5)ではめ込んでいくという方法です。このやり方で良いでしょうか?ちなみにサイトは物販はなく会社概要や商品紹介が中心で凝った内容と言えば問合わせフォームやトップ画面にフラッシュをはめ込むぐらいです。この方法で問題なければ、もうひとつお聞きしたいのですが、Illustratorで画面を作るときにどうやってサイズを合わせるのでしょうか?例えば横幅980pxのサイトを作る場合、Illustratorでも980pxで作れば合うものなのでしょうか?テストで横幅980pxの画面を作ってJpegに変換、それを直接「ブラウザー」→「開く」で見るとサイズが合わない気がします(アホな質問してますか?)Illustratorで画面を作ってDreamweaverではめ込んだら縦横比率が変な感じになるのが嫌なので制作前にお聞きしたかったです。ビギナーによろしくお願いします。

  • ホームページに画像を使いたいのですが

    現在WEB製作をしています。 イラレで編集して、フォトショップで加工した画像をWEBにアップしたいと思っています。 ドリームウィーバーで編集していますが、画像の形式が現在○○.psdです。 その為、表示させることが出来ないのはわかってはいるのですが、JPEGで保存すると背景透過させていたものが、白い背景がついてしまいます。画質を落とさずにWEB上にアップできる形式というのはないのでしょうか? また、その際にどのようにして、形式を変換させる作業をすれば良いのでしょうか? 分かる方いらっしゃいましたら是非教えていただけると幸いです。