• 締切済み

WEBデザインの際の画像作成について

WEBデザイナーとして働き始めたばかりの初心者です。 普段、イラストレーターでWEBサイト全体のデザイン→スライス→コーディングという流れで仕事をしています。 イラストレーター上でデザインをしているときに、写真画像などを配置するときがあります。 そのとき、フォトショップを使い、色調補正などをしてからイラレに配置して全体のデザインをしていくのですが、その配置する画像について質問です。 この画像は フォトショップ上で実際に使うサイズにしてからイラレに配置 ↓ イラレでスライス が良いのか、 フォトショップでは補正などのみで、サイズは触らず、イラレ上で配置 ↓ イラレ上で実際に使うサイズ調整 ↓ スライス のどちらが良いのでしょうか? スライスで書き出された画像は後述の方が綺麗に感じたのですが、 皆さんはどのように画像を作成されていますか? また、 イラレ上のオブジェクトをスライスして書き出し もしくは イラレ上のオブジェクトを一旦フォトショップにコピーしてから書き出し とどちらのほうが画像が綺麗に書き出されるでしょうか? こちらも後述の方が綺麗に書き出されるような気がするのですが・・・。 皆さんはデザイン→スライスの際はどのような手順でされているでしょうか? よろしくお願いします。

noname#127481
noname#127481

みんなの回答

回答No.1

私は、WEBディレクション、WEBデザインをやっています。 質問者様の求めてらっしゃる答えとは少し異なるかもしれませんが、私は全てPhotoshopで作業します。 理由は、Photoshopで見ている画像なりデザインと、コーディングし終わったときのデザインが1pxのズレもなく再現できるからです。Illustratorでも設定すると出来ますが、設定しなければいけないのでひと手間かかってしまいますし、px単位の作業にあまり特化していないのでやりずらいと個人的には思っています。 これも慣れなのでなんともいえない部分もあると思いますけどね。 私がIllustratorで作業するなら、Photoshop上で実際に使うサイズと同じにして配置します。 理由は1pxのズレがあってもデザインとしてはダメだからです。 そして最後の質問ですが、いったんPhotoshopに戻すなら、最初からPhotoshopで作業したほうが効率がいいのでは?と思います。 書き出した画像が綺麗、綺麗でない、というは実作業を見ていないのでなんとも言えません。

noname#127481
質問者

お礼

大変大変遅くなって申し訳ありません! ありがとうございました。

関連するQ&A

  • イラストレーターでWEBデザインするときの画像の配置方法

    イラストレーターでWEBデザインをする際の画像配置方法について教えていただきたいです。 普段、イラストレーターでWEBサイトのデザインを行っています。 写真などをレイアウトするとき、 (1) Photoshopで実際に使用するサイズ、画像解像度72でjpg画像作成 ↓ イラレで配置 とするのと、 (2) 使用する画像をそのままイラレに配置 ↓ イラレ上でサイズ調整(縮小など) とするのと、どちらが正しいのでしょうか? 両方行ったところ、最後にスライスで書き出した際に(2)の方法で配置した画像の方がきれいな画像になりました。 DTPデザインの場合、画像配置するときは必ず実寸サイズ、印刷用解像度で画像をあらかじめ作成したものを配置するのが基本だと思います。 WEBデザインの場合はやはりちがうのでしょうか? (1)、(2)の方法はどちらが正しいのか?もしどちらも間違っているなら、正しい方法を、特に決まりがない、という場合は、皆さんはどのようにされているのか、教えていただけないでしょうか? よろしくお願いいたします。

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

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

  • フォトショップだけでHP作成

    http://tutocity.com/index.php/photoshop/full-photoshop-web-design-journal.html ↑最近こういったフル・フォトショップでのwebの作り方 みたいなのがよくあります。 フォトショップでこの画像は作れたとして このあとどうやってHTMLにしていくのかが よくわかりません。 私はフォトショ6.0とかなり古いのを使っているので わからないだけなのかな? 今のCS4とかはフォトショップだけで 完結する機能が備わっているのでしょうか? 私がwebを作るときは (フォトショが苦手なこともあり) 味のある画像なんかはフォトショでつくりますが それを配置程度で イラレでほとんどを作ります。 そしてスライスで画像だけ書きだして あとはdreamweaverと直接タグを書いたりして 作っています。 なのでこんな今風のステキなwebを フォトショップだけで作るやり方がわかりません。 どなたか教えてください。 よろしくお願いします。

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

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

  • イラレで画像を埋め込むとジャギーになってしまいます

    イラレで画像を埋め込むとジャギーになってしまい困っています。 使用する写真がリンク配置している時は綺麗なのですが、埋め込むとガタガタになってしまいます。 どうすれば綺麗なまま埋め込めるでしょうか。 使用する画像は以下のようなものです。 デジカメで撮影したもの。サイズは大きいが解像度が72ppiしかありません。RGB画像。 ↓ フォトショップで350ppiに解像度をあげ(非再サンプル)、サイズは小さくなりましたが、使用するには十分な大きさです。 CMYKに変更。色調補正などをし、PSDファイルで保存。 ↓ イラレでリンク配置。サイズが大きいので縮小をかけたため、解像度が650ppi前後になっています。 入稿するため埋め込みをしたところ、画像がガタガタになってしまいました。 作業環境はWin、OSは7の64bit、イラレ・フォトショ共にCS6です。 自分でも調べてみたのですが原因が掴めず、知識が浅くどう対処してよいかわかりません。 どうかご教授いただけないでしょうか。 何卒よろしくお願いいたします。

  • Illustratorでweb用にスライス

    Web制作初心者です。 Illustrator CS5で web用にスライスをしてみました。 作ったデザインの背景色を、カラーをカラーピッカーの16進数(#~)で確認して、 CSSにバックグラウンドカラーで指定しました。 その上にイラレ上でタイトル画像をスライスしたものを置いたのですが、 バックグラウンドカラーと画像の色が違うのです。 web制作にはDreamweaver使っているのですが、こちらの不具合かと思い ブラウザで見ても違う色になっていました。 やはり、イラレでスライスはまだまだ、うまく行かないのですか? DTP出身なのでフォトショが苦手で出来ればイラレで全てデザインしたいと思っています。 どうぞ、よろしくお願いいたします!

    • 締切済み
    • CSS
  • 画像オブジェクトをイラストレーターで編集

    フォトショップで加工した画像のオブジェクトをイラストレーターのオブジェクトと同じようにイラストレーターで編集できないのでしょうか?(イラレ・フォトショWin版CS5) よろしくお願いします。

  • イラレとフォト

    フォトショップでイラストレーターの画像を、 イラストレーターでフォトショップの画像を開くには? 例 イラレで作ったオブジェクトにフォトショップの効果を与えたい 例 フォトショップの画像にイラレのロゴをくっつけたい

  • web制作 画像がぼやける

    初めてHPの制作をしています。 今まで画像はフォトショップやイラストレーターで.jpeg保存していたのですが、単色のロゴや文字、地図などは.png形式の方がきれいに表示されることに気付き変更しました。 ですが、イラストレーターで作った地図(主に線と文字、モノクロ)はイラレ→web用に保存→.pngで保存しても一部ぼやけてしまったり、保存する度にぼやける箇所が変わり、混乱しています。サイズも掲載するサイズで作ってwidthとheightを指定し100%で使っています。 .jpegで保存すると全体にぼんやりしてしまうので.pngの方がいいと思ったのですが… さらに、それをプリントアウトしてみると結局は全体にぼやけてしまっている事が判明しました。 web上でもきれいに見えて、プリントアウトなどをした時にも画面に見えているクオリティーを保つには、どんな処理をすればいいんでしょうか…? ちなみに、.jpegで保存した写真画像はweb上ではきれいに見えていますが、プリントアウトするとやっぱり少しぼけて見えます。 HP制作初心者で初歩的な質問ですが、どうぞよろしくお願いします!

    • ベストアンサー
    • CSS
  • dreamweaverとイラレ、フォトショップ。

    元々DTP系のイラストレーターです。 素材つくりにはイラストレータのみで、フォトショップは画像処理のみで使っています。イラストレータが使い慣れているので、フォトショップでやることもイラレに頼ってしまっています。コーディングはdreamweaverを使っています。 今はWEBの勉強もしはじめたばかりで、まず自社のホームページをリニューアル製作中です。 これは2作目ですが、まだフォトショップのことがいまいちわかりません。 今はイラストレーターでホームページのレイアウト、素材、バナーすべてを作っています。 それをフォトショップにもっていきスライスしています。 しかし、修正するときなど、イラレのデータをフォトショプで開くとレイヤーを維持できてない場合が多く、一枚の画像になってしまっているので、いちいちイラレで修正し、またフォトショップで開いてスライスしています。 普通はどのような手順でWEB作成するのでしょうか? レイヤーの維持ができないのがおかしいのでしょうか? データが複雑で維持できません、と出たりします。 それから、自分の作りたい画像はたぶん、イラレで作ったものをフォトショップで立体的にしたり、少し手を加えるといいと思うのですが、私には簡単な画像処理能力しかなくて、スキルアップしなければいけないと思っています。 本屋でフォトショップの参考書などみても、画像処理などの説明ばかりで、イラストを書くことを説明している、オススメの本はどれかわかりません。どのように習得していってらいいでしょうか?? イラレは10とcs4、フォトショップは5.5とCS4、dreamweavercs4使用です。 win、macどちらも使っています。 どなたかアドバイスお願い致します。