バナー作成・保存について

質問

ホームページ作成初心者です。
イラレ・フォトショCS2でバナーを作成してDreamweaver8でホームページを作成したいのですが・・・

作成サイズ（pix)はどれぐらいが適当でしょうか？
ちなみにバナーには社名とロゴマークが入るぐらいです。
また、作成後はどの様に保存してDRE8のimgファイルに移せばいいでしょうか？

回答No.2

vescent · ベストアンサー

#1です。補足を読んだので、分かる範囲内でのアドバイスです。

（FireWorksは私はあまり使用した事無いので、詳しく分からないで申し訳ありませんが）
人によってはフォトショよりも軽い・Dwでの連携がしやすい、等の理由でメインで使ってる人も、Webデザインの現場だと居るので、使ってみると良いでしょうね。
フォトショメインのユーザーの方が多いとは思いますが。

ImageReadyが活躍するのは、ページ丸ごとデザインした場合等です。
スライスという機能を使用して、部分毎に画像に変換して容量を変えたり、名前を変えたりするのに便利です。
あとは、GIFアニメも作れるので割りと楽しいです。

>単純にGIFがいいと思っていましたが、～がいいみたいですね。
そうですね、Webに保存する画面のプレビューで書き出した後の容量は一目でわかるので、出来る限り画像1枚1枚（バナーに限らず）、JPGにしてみたり、GIFにしてみたりすると良いと思います。

>ただ「出来る限り見た目を～教えていただければありがたいです。
これは文章だと難しいですが・・・どこまで知っているか分からないので、順を追って説明してみます。

■Photoshopでの場合
1.Web用に保存、で開く。
2.左上のタブで2アップ（か4アップでも）を選択する。
3.右上のJPEGかGIF等のプルダウンで選択する。
4.右の「画質」の数値を徐々に下げていき、元画像（左）と反映後（右）を見比べる。
5.画質と、画像左下の容量を見比べ、調整をする。（時間/回線速度の数値なども参考に）
6.書き出して終了。

仕事で画像を扱う場合、見た目よりも軽さ重視という場合があるのですが、趣味だとか個人的なサイトならば、見た目重視で自分で判断されると良いかと思います。
いざアップして「重いな」と思ったら修正すれば良いですし。

個人的な目安ですが、JPGの場合は画質60までがギリギリ綺麗な範囲、GIFの場合は32カラー程度かな、という風に思っています。
（仕事内容によっては、更に下の画質40だとか10カラーだとかになる事も）

GIFで容量を落としていく作業（カラーの数を減らしていく）で、例えば256色>32色に落とした時に、元画像の一部分の色が減った事によりバランスが悪い絵になる事があります。
その場合256に戻して、カラーテーブルにて「どうしても外せない色」を選択して、鍵アイコンをクリックして色にロックをかけます。
ロックしてから、カラー数値を下げていくと、より目的にあった色の減らし方が出来ます。

>自分のページ上にアップする～に保存すればよいものでしょか？
このサイズというのは、ピクセルサイズの事でしょうかね？？
どのように見せたいかによるので、あれですが・・・

例えば原寸で大きな画像を見せたいとかなら、ページ用に小さくした画像を用意して、それをクリックしたら元の大きな画像へのリンクになる、という事も出来ますよね。
小さく見せたい分には、どうにでも小さくすれば良いです・・・。

ページ自体のサイズですが、750～1000 x 500～650px程度の範囲で作製すれば、普及されている一般的な環境では、1画面に収まるのでは？と思います。

最後に、多分ですけど、WebpageDesignというカテゴリの方が、詳しい人が居るかもしれません＾＾；
私はたまたま、このカテゴリに立ち寄っただけなので（笑）。

お礼

vescentさん

本当に詳しく、しかも丁寧に回答していただき有難うございました。
入り込めば入り込むだけ、疑問が多くなりvescentさんには貴重な時間を使わせてしまいました・・・。
独学だけでは限界もあるとは思いますが、頑張っていきたいと思います。

仕事はＷＥＢ関係ではありませんが、将来やってみたい仕事なので現在は猛勉強です。（歳はいっていますが・・・笑）

今回ご解答いただいたことを踏まえてページを作成していきます。
どんなページになるか、かなり不安ですが・・・。

vescentさんのような方が、そばに居られたらスムーズに作れるのになぁ～と思います。

また作成中に、どうにもならない時にはご教授をよろしくお願いいたします。

この度は本当にありがとうございました。

回答No.3

9white

こんにちは。

＞作成サイズ（pix)はどれぐらいが適当でしょうか？
これ！といったサイズは無いのですが、ある程度大きさの基準があるようです。参考にされてみてください。

＞また、作成後はどの様に保存してDRE8のimgファイルに移せばいいでしょうか？
バナー自体はフォトショで作成されて、「web用に保存」で大丈夫と思います。jpgかgifにするのが一般的で、写真メインならjpg形式、書かれているように社名とロゴ程度でしたらgif形式をおすすめします。

＞DRE8のimgファイルに移す～
（正しくはDRE8のimgファイルではないのですが）
この保存方法は人によって様々なのですが、

HPフォルダ
　　└index.html
　　└imgフォルダ

このようになっていたら、「imgフォルダ」に作成画像を入れられて、
<img src="img/作成画像名.gifまたは.jpg">
これで表示させます。

「Dreamweaver8　使い方」や「HP支援」などで検索されればもっと有益な情報が得られると思いますよ。

参考URL：

http://www.yuzuriha.sakura.ne.jp/~akikan/kaigai/kaigai7.html

お礼

9whiteさん

お昼時の忙しい時間に、ご解答いただきまして本当にありがとうございました。

参考ＵＲＬを拝見しまして数多くのサイズがあり迷っていますが、とりあえず数種類を作成してみたいと思います。

vescentさんのお礼にも書きましたが、今回が初めての作成で何をするにも疑問ばかりで・・・。
大変ですが出来上がった時の喜びを楽しみに頑張って作成したいと思います。
また、高いSOFTが無駄になってもいけませんし・・・（苦笑い）
本当にお二人のそばで作成すれば良いページが早く作成できると思います。

今後とも初心者ならではの疑問が出てくるとは思いますが、よろしくお願いいたします。
本当にありがとうございました。

回答No.1

vescent

バナーのサイズは、アップする先のサイトの、バナー掲載位置のサイズに依存するので「一概にこのサイズ」という回答は無いです。

写真など、グラデーションや色数が多い物はJPGで保存、
文字やベタの絵などがメインだと、GIFで保存するのが一般的です。
SC2ならば、ImageReadyなどで書き出すのが良いと思います。

大手サイトなどでは、サイズ辺り何バイトまで、という容量が決められているので、出来る限り見た目を保持しつつ、いかに軽く出来るか、という作業になってきます。
それに有効なのがImageReadyなのです（簡単な物ならPsでWeb用に保存、で調整すれば良いですが）。

保存した画像は、Dwの操作画面において画像を読み込む「イメージ」ボタンで読み込むか、テキストモードの「コードビュー」で、直接ファイル名（相対パスが良いかな）を打ち込むかになると思います。

今度発売されるCS3では、そこら辺がもっと簡単な操作で出来るようになってるみたいです。

補足

vescentさん、有難うございます。

ImageReadyは使用したことが無かったので一度チャレンジしてみたいと思います。あとFireworaks8でもImageReadyと同じ事が出来るならばSTUDIO8に同根されているんで勉強してみたいと思います。

保存方法も丁寧に教えていただき、ありがとうございます。
単純にGIFがいいと思っていましたが、種類によりJPEGと使い分けた方がいいみたいですね。
ただ「出来る限り見た目を保持しつつ、いかに軽く出来るか、という作業」が果たして私に出来るかどうか・・・・・？
もしよろしければ、軽くする方法も教えていただければありがたいです。

あと初心者で質問ばかり多くて申し訳ありませんが、自分のページ上にアップする写真なんかは掲載位置のサイズにもよると思いますが、大抵はどれ位のサイズでimgファイルに保存すればよいものでしょか？

お礼を言うつもりが質問ばかりになり申し訳ありませんが、お知恵をいただければ非常にありがたいです。

今回は貴重なお時間で教えていただき本当に有難うございました。