WEB用画像の書き出しはどれを使いますか？

質問

はじめまして。
現在、WEB製作を勉強しているものですが、バナーやメニュー等のパーツをWEB用の画像書き出しを
する際には、photoshop、illustrator、fireworksのどのソフトを使うのが良いのでしょうか。
操作自体は、３つとも、同じくらいできるのですが、fireworksでは画像が綺麗ではないとか、
photoshopは、操作性がいまひとつ等。。。いろいろ聞くのですが、どれが一番効率がよいのでしょうか。

現在は、photoshopで全体のレイアウトも画像の書き出しをやっていたのですが、レイアウトだけでしたら、fireworks、illustratorの方が使いやすいかと思い、fireworksを試しております。

また、illustratorでは、アンチエイリアスがきいて、ピクセルがずれたりしてしまい、手間が
かかってしまいます。

どのソフトでもできることは、理解しているのですが、クオリティを一番高く保ちながら、効率よいやり方がありましたら、ぜひともご教示頂けましたら幸いです。

有識者の方、よろしくお願い致します。

回答No.1

ORUKA1951 · ベストアンサー

ツールじゃなく、どのフォーマットを使うかの問題ではないですか？
　Webでは、基本的にはビットマップ/ラスター画像で、最近のスマホやモダンブラウザには、ベクター/ドローが使えます。

ビットマップ/ラスター
　写真はJPEG
　イラストやロゴはGIF
　アンチエイリアスや透明背景が必要ならPNG
　　画像自体の半透明化にはopacityが抱える。
　canvas要素も使える。

ベクター/ドロー
　SVGを使ってもよいならSVG

どのソフトでも出来るじゃなくて、

写真はAdobe Phtoshop,Corel Paint Shop Proなどで作成してJPEG
ロゴやイラストは、Adobe Illustrator,CorelDRAWで作成して、GIFやPNG
最終的にフォーマットを決めて画像ファイルを作成するのは市販より

　⇒無料画像加工サイト インデックスカラー減色と言えば | OPTPiX WebFree | ウェブテクノロジ( http://www.webtech.co.jp/webfree/ )
　のほうがよかったりします。

ドロー/ベクタなら
Inkscape,CorelDRAWでSVGで保存する
と言う形になるでしょう。

＞photoshopで全体のレイアウトも画像の書き出しを・・fireworksを試しております。
　クライアントへのイメージ伝達には、CorelDRAW、(Illustrator,)が良いです。自在に配置したりできますから。

　しかし、それで作成したものをスライスしてページを作成することは、決してありません。DTP( http://ja.wikipedia.org/wiki/DTP )じゃあるまいし、それで出来るわけがない(^^)
　ページ自体は、基本的にテキストエディタ(　⇒HTMLエディタ( http://ja.wikipedia.org/wiki/Web%E3%82%AA%E3%83%BC%E3%82%B5%E3%83%AA%E3%83%B3%E3%82%B0%E3%83%84%E3%83%BC%E3%83%AB#HTML.E3.82.A8.E3.83.87.E3.82.A3.E3.82.BF ))です。『HTMLエディタで作成するシンプルなコードはSEO（検索エンジン最適化）にも効果的であることから、・・上記リンクり』
　特に最近のように様々な幅のディスプレイ--携帯電話やスマホから超幅広のディスプレイを対象にし、SEOも考慮しなければならない場合、そのような作り方では対応できませんから。

※DTP(卓上出版)やワープロはカタログを作るように、デザインで素材を並べていくだけで、そのソースを見たって、どこが見出しか、どこが本文か、何が主題かは知ることが出来ません。また、想定した端末以外には利用することすら出来ません。スクリーンリーダーや点字端末、そして検索エンジンも・・
　HTML(web)は、それとは全く逆の目的のものです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Introduction to HTML 4 (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より
★そして検索エンジンですね。

　そのためにウェブサイト製作にHTMLを選択するのです。DTPやワープロでよければPDFにしてアップロードしておけばよいです。

回答No.2

DrFell

>操作自体は、３つとも、同じくらいできるのですが、fireworksでは画像が綺麗ではないとか、
>photoshopは、操作性がいまひとつ等。。。いろいろ聞くのですが、どれが一番効率がよいのでしょうか。

辛辣ないい方をすれば、同じくらいできるではなくて、同じくらいできないかな？と思いました。photoshopも、操作性よくなるようにカスタマイズすれば、いいのでは？いろいろ聞くのではなく、teeeさんが困っていなければいいのでは？使い方は人それぞれです。

>どのソフトでもできることは、理解しているのですが、クオリティを一番高く保ちながら、効率よいやり方がありましたら、ぜひともご教示頂けましたら幸いです。

それぞれを適材適所で使い分ける。メインはfireworksで効率よく、でも、いまいちな場所はphotoshopやillustratorというふうに、teeeさんのスタイルに合わせて試行錯誤してください。

あと、dreamweaverなどとの連携なども考えた方がスマートかなと思います。

とりあえず、photohopメインが慣れておられるようですので、そちら方面をいくつか紹介します。
●「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
http://stocker.jp/diary/switch-to-photoshop/
fireworksはノンカスタマイズで比べているところがフェアでない気もしますが。

●Photoshopでパスごとに各パス名称でJPEG画像書き出し
http://piyocast.com/as/archives/2116

●Slicyはあっと驚くほど便利だった。
http://colopixie.com/webdesign/mac-slicy/

お礼

コメントありがとうございます。現在は、photoshopを使いように、WEB製作用にカスタマイズしてつかっていたのですが、何かソフトでの画像書き出しの違いがあるのかお聞きしたかった次第です。
参考にさせて頂きます。
ありがとうございます。