ママのスキンケアのお悩みにおすすめアイテム

WEBデザイナーはフォトショイラレどちらをどう使い分けて中心的に極めるべきか質問した時に下記のような回答をもらったのですが、下記のような疑問が残りました。
また、使い分けはおっしゃっているような形が理想と思いますか?
アイコンもバナー以外はPhotoshopで作るほうがよいのは素人の自分でもわかるのですが、アイコンもバナーもPhotoshopで作るほうがよいのでしょうか?
また、バナーとは当サイトの楽天などにあるバナー広告のことでしょうか?


下記疑問に思ったところ。

アイコンもバナーもPhotoshopで作ってください。
そのバナー内に入れるイラストや絵柄などはIllustratorで作ると良いです。
ですので、Illustratorも使えるに越したことはありません。

WEB関係者のフォトショとイラレの使い分けの境界線が難しいのですが、バナーやアイコン、デザインカンプなどフォトショで作れる主な部分は可能な限りフォトショでビットマップデータ作って、どうしても作れない部分だけイラレのベクトルデータでつくりイメージでしょうか?

バナーなら枠や背景はフォトショでつくって、その中にいるキャラクターや、花などはイラレで作り、最終的にフォトショにまとめてビットマップデータで保存するということでしょうか?

イラレで作らないと拡大縮小が出来ないので、アイコンはイラレで作った方が良いのかと思ったのですが、フォトショでビットマップデータが良いのですか?
当サイトならハートのアイコンや上記のOKWAVEのアイコン、お礼のボタンなどもすべてフォトショが良いのですね。
楽天のバナー広告などなら中の楽天イーグルスのキャラなどだけイラレで作るイメージでしょうか?

またイラレはぼけると聞いたのですが、それはWEBページに組み込むとaiをpngにした画像が多少ぼけるということでしょうか?
psdをpngでWEB上で表示すれば一切解像度は下がらないということでしょうか?
素人の質問で大変恐縮です。



下記いただいた回答。
で、本題に関して結論を言いますと、Photoshopでデザインする事を覚えてください。
IllustratorでWebデザインを行うのは論外です。
特に、コーディングを外注するならaiファイルは非常に嫌われます。

アイコンもバナーもPhotoshopで作ってください。
そのバナー内に入れるイラストや絵柄などはIllustratorで作ると良いです。
ですので、Illustratorも使えるに越したことはありません。

プロの現場でも、IllustratorでWebデザインを行う方は居ますが、
そういう方は印刷出身で他のツールを使えない方です。
「これからWEB用にどちらを勉強しようかな」という方がIllustratorを選択する理由はありません。

少し前までは「PhotoshopかIllustratorか」ではなく
「PhotoshopかFireworksか」で議論が分かれていました。

Photoshopの方がアナログでやれる事は多く、自由度は高いですが、
Fireworksの方がWEBに特化している分仕事の効率化に向いています。
どちらも一長一短ですが、FireworksはCreative Cloudに含まれず、開発終了のうわさが流れているので、今からだとPhotoshopが良いかと思います。

一応、IllustratorのWebに向かない理由を列挙します。

・画像のピクセルがぼやける
・書き出しが不便
・同じサイズで作成した複数のアイコンや画像が同じサイズで書き出せない

他にも色々ありますが、最初の理由ひとつだけで残念なサイトにしかなりません。
以下は印刷出身の方がよく作るイラレデータで、Webとしては話にならないものです。
(しかし、こういうデータが本当に多い)

・CMYK
・サイズが適当
・文字サイズを変えすぎ
・乗算などの効果を使用している

Illustrator使用者は紙出身者が多いので、デザインを1枚のものとして考えるので、
パーツ分けした際にそのまま使えない事が少なくありません。
Webでは「画像、背景、テキスト」で考えますのでそもそも使い方が違うのです。

このQ&Aに関連する最新のQ&A

A 回答 (3件)

私は


ラフ作成(デザイン)はイラレ。
そのラフを画像に起こすときに「フォトショ」を使う。

#1様が言われてる話は「印刷」のこと。
イラレは「CMYK」「RGB」どちらでも使えるし、ピクセルも指定して作ることが可能。
例えば「横幅800ピクセル」と指定された場合、イラレ新規作成で幅を「800ピクセル」と指定すれば、その幅でラフを作ることが出来る。
つまり・・・クライアントに完成イメージで「説明が出来る」ですわ!
で、ラフを突き詰めて「完成」させれば、そのまま兄弟ソフト「フォトショ」で加工が可能。
拡大・縮小が発生しても「イラレでデザイン修正後、フォトショで反映」出来るので、後作業も楽。
初めからフォトショで行うと、ご質問者様の疑問通り「拡大はどうしよう??」になり
最悪「一から作り直しだ!!」になっちゃう。

まっ最終的にはオペレーターの作業しやすい方で行うが正解かな?
拘りを持つ方が良くないと思う。

この回答への補足

補足させてください


つまり、ラフ(ワイヤーフレーム)はイラレで作って、その後のデザインカンプはフォトショで作るのがよいということでしょうか?

ロゴやバナーは好みなのですかね?

補足日時:2013/09/13 16:59
    • good
    • 0
この回答へのお礼

ありがとうございます。お忙しい中大変ありがとうございました。

つまり、ラフ(ワイヤーフレーム)はイラレで作って、その後のデザインカンプはフォトショで作るのがよいということでしょうか?

ロゴやバナーは好みなのですかね?

お礼日時:2013/08/23 16:38

 本来は、Photoshopは写真の加工、Iiiustratorはパンフレットやカタログなどで使用するイラストの作成用です。

専門分野は、Photshopはビットマップ(ラスター)、Illustratorは、ベクター(ドロー)の二次元コンピューターグラフィックス( http://ja.wikipedia.org/wiki/2%E6%AC%A1%E5%85%83 … )を扱うソフトです。
・ビットマップ画像( http://ja.wikipedia.org/wiki/%E3%83%93%E3%83%83% … )
・ベクタ形式( http://ja.wikipedia.org/wiki/%E3%83%99%E3%82%AF% … )
 それぞれの特徴や詳細はリンク先を見ていただくとして、大きな差はベクタ形式は、拡大や縮小、あるいは変形してもギャザーが目立たないが、複雑な図形や微妙な色合いのものは苦手です。円を描いてコントロールポイントをつまんで引き伸ばすとかは得意です。一方のビットマップ画像を扱うソフトは、選択部分の色調を変えるとかは得意です。
 とは言っても、今は本来の対象を離れて、互いの機能の主だった機能は扱えるようになっています。

 ただ、これらは、本来はWebページのデザインを行う--それを専門とするツールではありません。
 Webで扱える画像は、基本的にはビットマップ(JPEG,GIF,PNG)です。
・GIF-Graphics Interchange Format( http://ja.wikipedia.org/wiki/Graphics_Interchang … )
・JPEGほJoint Photographic Experts Group( http://ja.wikipedia.org/wiki/JPEG )
・PNG-Portable Network Graphics( http://ja.wikipedia.org/wiki/Portable_Network_Gr … )

 ※HTML5以降は、ベクタ形式のSVG(Scalable Vector Graphics( http://ja.wikipedia.org/wiki/Scalable_Vector_Gra … ))が利用できるようになります。

 よって、Photoshopにしても、Illustratorにしても、あくまで、素材を作るツールです。
写真に手を加えて適当な素材を作るならPhotoshopですし、ロゴやイラストを製作するならIllustratorと選択するのが、圧倒的に機能が豊富なため便利です。
 それを、最終的にはWeb用のビットマップデータに書き出すのは、設定さえ間違わなければ、それぞれのツールで良いです。
 一旦ビットマップにすると、それが最終データになり、後からの編集は行えないと考えたほうが良いでしょう。(GIFとPNGは可逆圧縮ですから画質は変化しませんがJPEGは非可逆です。)

★本題です。
 Webデザインとは、これらの素材を作る作業とは、全く別の作業です。!!ここを誤解されていると思います。
 Webとはなにかは、HTML4.01の仕様書の「HTML 4の概説」によくまとめられています。
 2.1.World Wide Webとは何か?( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 2.2.1.HTMLの略歴( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
 『HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、・・・』
と、DTPやワープロのデザインとは、全く異なる次元のデザインです。
 もちろん、検索エンジンに内容が正しく伝わるデザイン--マークアップ---も重要なデザイン要素なのです。
 いいかえれば、IE,firefox,Chrome,Operaといった「視覚系ブラウザ」は、そのうちのひとつにしかすぎません。

 いまは徹底的に否定されていますが、かってのtableを用いたような手法、ページ全体を画像処理ソフトで作って、それを切り貼りするようなデザインは、今はされていません。すべきではありません。
 具体的には・・
・テキストを画像に置き換えて表現する。
・余白制御のために画像を用いる。
・ページレイアウトの目的で表を用いる。←PhotoshopやIllustratorで作ってtableで並べる
・HTMLでページを作らずにプログラムに頼る。←PhotoshopやIllustratorで作った物をそのまま利用する。
 14.1 スタイルシートの概説( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )より

 とすれば、PhotoShopやIiilustratorで作成したサイトイメージは、クライアントに完成イメージを伝える用途にしか使えません。どちらを使用しても遜色はないでしょう。
 一方、Webページで使用する素材は、写真でしたらPhotoshop,イラストやロゴはIllustratorというのが原則でしょう。餅は餅屋というように、Iiilustratorで作成したロゴが汚くなるということはありません。もしそうなるとしたら使い方を間違っている。

 具体的な例を挙げておきます。
★下記のページは、デザインはすべてテキストエディタを使っていると思われます。すなわち、HTMLとスタイルシートはテキストエディタでないとあのようには書けないでしょう。
 しかし、それぞれの素材は写真はPhotshopなどの写真を処理するツールで、ロゴやイラストはIllustratorなどのベクタ画像処理ツールで作成されていますね。
 そして、ブラウザの[表示]メニューから[スタイル(シート)]を選択することで、デザインは全く変わります。印刷イメージもまた異なります。
 それでいて、スタイルシートを「選択しない」で表示される姿が検索エンジン用のデザインと考えられます。
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
    • good
    • 2
この回答へのお礼

ありがとうございます。お忙しい中大変ありがとうございました。

すべてフォトショではなく写真でしたらPhotoshop,イラストやロゴはIllustratorというのが原則かもしれませんね。

お礼日時:2013/09/03 23:01

イラストレータは『リーフレット』を作成する為の印刷原稿を造るアプリです。


なので色管理はCYMKのみです。
サイトの場合の色管理はAppleRGB若しくはsRGBですのでPhotoshopの出番。
現在バージョンのPhotoshopは『ベクトルデータ』も扱えます。

サイト作成は専用のアプリで行いますので、フォトショもイラレも基本的には
『材料』を造るアプリ

*ベクトルデータは解像度に限定されないデータなので、使う時には
ラスタライズして使います。

この回答への補足

補足させてください

>現在バージョンのPhotoshopは『ベクトルデータ』も扱えます。

つまりすべてWEBはPhotoshopでアイコン、カンプ作成も行い、
それらをPhotoshop上でベクトルデータで作るのがよいということでしょうか?

デザインカンプもフォトショでベクトルがよいのですかね?

補足日時:2013/09/13 16:59
    • good
    • 0
この回答へのお礼

ありがとうございます。お忙しい中大変ありがとうございました。
>現在バージョンのPhotoshopは『ベクトルデータ』も扱えます。

つまりすべてWEBはPhotoshopでアイコン、カンプ作成も行い、
それらをPhotoshop上でベクトルデータで作るのがよいということでしょうか?

デザインカンプもフォトショでベクトルがよいのですかね?

お礼日時:2013/08/23 16:48

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qイラストレータの画像をJPG形式で保存したい

イラストレータの画像(ai形式)を一番画質を劣化させずにJPG形式に保存する方法を教えて下さい。

Aベストアンサー

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存」でjpg
4.「書き出し」でbmp保存後、Photoshopで「保存」でjpg
5.Photoshopに貼り付け後、「Web用に保存」でjpg
6.Photoshopに貼り付け後、「保存」からjpg

結論から言いますと、1.のIllustrator上での「Web用に保存」で最高で行った場合が、色やエッジ、文字等がきれいに感じられました。
3~6はやはりベクターからラスタ変換での劣化、jpg変換時の劣化と、2度の劣化が原因だと思います。


最初にも書いた条件の詳細が分からないので、役に立つか分かりませんが、参考までに・・・。

画像サイズ、ファイルサイズをどうするのか、どのような画像なのか等、情報が少ないのです。

しかし私自身も興味深かったので、以下の6種類で試してみました。個人的見解が、十二分に入りますがあしからず。
圧縮度等に関しては、ファイルサイズがなるべく均等になるように、「Web用に保存」は最高値、「書き出し」中間値で行いました。
環境:
Windows2000、Illustrator CS、Photoshop CS


1.「Web用に保存」でjpg
2.「書き出し」でjpg
3.「書き出し」でbmp保存後、Photoshopで「Web用に保存...続きを読む

Q【WEB制作】画像ファイルの解像度は72?96?

WEB画像を作成するとき、MacのPhotoshopで72DPIで作成していましたが、最近制作環境がWindowsに変わりました。Winの画面解像度は96DPIですが、作るものは以前のまま72DPIの設定で作成しています。
できあがったものに問題はないのですが、どうもそのへんの違いがよくわかりません。MacとWin、いったいどっちの解像度で作成するのがいいんでしょうか?
初歩的な質問ですみませんが、教えて下さい。どうぞよろしくお願いします。

Aベストアンサー

一般的にホームページ上で使用する画像の解像度は 72dpiです。仮に72dpi以上の解像度で作られていても、画面上では同じに見えますが、解像度の高い画像ファイルは容量が大きくなるので表示に時間がかかります。

モニター解像度が大きいほど、 より広いデスクトップ環境を得ることができます。ホームページなども同様で同じサイトを閲覧していても、それぞれのモニター解像度によって見え方が異なるということになります。最近のMACのモニタもWINと同じ96dpiが標準になりつつあります。

Qイラストレーターのアウトライン化の解除方法??

ウィンドウズのイラストレーターの機能についての質問です。
アウトライン化がすでに実行されている文字の修正をする場合に、アウトライン化の解除はどうようにすれば出来るのでしょうか??
いろいろな本をみると、一度アウトライン化を実行すると、解除ができないと記載されていました。
ご指導頂きたくお願い申し上げます。

Aベストアンサー

それらの本に書かれている通り、一度アウトライン化をすると元には戻せません。

ただし、Ctrl+zやコマンド+zなどで作業を一つ前に戻すなどが出来るので
間違えたり、やり直したかった場合はそれで対処するしかないですね。

アウトライン化したデータを保存してしまった場合はどうやっても解除できないので
アウトライン化したデータを作った場合はアウトラインする前のデータも
別名保存などで残すのが一般的です。

Qwebアイコンで、ぼやけない文字の作りかた。

イラストレーター9(OS-WINDOWS)で、
ホームページのアイコンを制作してるのですが、
WEB用に(GIF、JPG)書き出しすると、
文字がぼやけたようになってしまいます。
小さなアイコンを作りたいので、文字がはっきりした
アイコンをつくりたいです。

ドットで書かれたような、
(今表示されているこの文字みたいな)
はっきりとした文字のアイコンは
どうすれば作れるのでしょうか?

教えてください。
よろしくお願します。

(フォトショップ7も使用可能です。)

Aベストアンサー

#1です。
Illustratorから、PhotoShopに書き出してはいかがですか?このときのポイントとしては、Web用なので72dpi(または96dpi)とする。アンチエイリアス・レイヤー保持には、チェックを。
「テキスト編集を可能にする」にチェック!(アウトラインとなっていないのが条件です)
以降はPhotoShopで開き、テキストを#1回答の手順にて。

テキスト部分をラスタライズした状態でアンチエイリアスをかけないということが条件ですので(表現が変なのは、お許しを)。私個人の意見ですが、PhotoShopのほうがWeb用には有利な気がします(状態の確認ができますし)。パスのみはIllustratorで作成などを含めてです。

PhotoShopは苦手ということなので、補足をいただければ分かる範囲内で回答させていただきます。

がんばってください。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qイラストレーターに取り込んだ画像の白い部分を透明にできますか?

例えば図面などのデータがあったとした場合、その線の部分、つまり黒い部分だけを残し、残りの白紙部分を全て透明にすることはできますか?
以前フォトショップで白紙部分をDeleteして透明にし、それをtifで保存すればイラストレーターに持ってきてもその部分は透明なまま作業ができると聞いたことがあったのですが、やってみてもできませんでした。
画像の白紙部分を簡単に透明にできる方法がありましたら教えていただければと思います。

Aベストアンサー

Illustrator 上に、すでに配置されている白黒画像であれば、画像を選択して、透明を「乗算」 に変更してみてください。
画像の下のパスが、透けて見えます。

Qイラストレーターで、描画を画面の中央に配置させるにはどうすればいいです

イラストレーターで、描画を画面の中央に配置させるにはどうすればいいですか?

Aベストアンサー

メニューのwindouの「整列」パレットを表示させて、その中での操作。。

オブジェクトを選択して。。

アートボードでの位置決めを選択(アートボードとトリムエリアが選択できます。)
そうしておいて、縦方向の中央配置のアイコンと、横方向の中央配置のアイコンと
を1回ずつクリックすれば、選択したオブジェクトが、アートボードの中央に移動します。

Qイラレで背景の色を変更するにはどうしたら良いですか?

イラレで背景の色を変更するにはどうしたら良いですか?


イラレで、通常、背景の色は白色に設定されていますが、
これを変更するにはどうしたら良いのでしょうか?

また、bmpやjpgといった画像ファイルに出力するときにも
背景は白色で出力されます。
これの色を変更するにはどうしたら良いですか?

よろしくお願いいたします。

Aベストアンサー

Illustratorには背景色という物が存在しません
印刷物を制作する場合普通は白い紙に印刷するからでしょうねキット
四角を書いて一番したに置きご希望の色にして下さい

Qpng素材をイラストレーターで色を変える方法

Illustrator CS6を使用しています。

png形式で作ってある画像(単純な2色のショップ名)の色を変えたくて悩んでいます。

ファイルを開き、画像トレース、拡張でパス化することはできました。

現在黒くなっている状態です(元は茶色でした)

それを青に変更したいのですが、オブジェクトを再配色でしようと思っても黒から変化しません。

色を選び塗りつぶすと、色を変えたい部分だけでなく四角全体が色が変わってしまいます。

わかれば簡単なのかもしれないのですがネットや手持ちの本で調べてもわからず途方にくれております。

よろしくお願いします。

Aベストアンサー

一旦選択解除>「自動選択ツール」(選択ツールかダイレクト選択ツールの下)で黒い部分の一部をクリック>カラーパネルで塗りの色を青に変更。

Q画像をIllustratorに配置すると荒くなる。

Illustrator CS5.1、Photoshop CS5.1を使用しています。
Photoshopで加工し、画面上は問題のない画像をIllustratorに配置すると途端に画質が荒くガサガサ(紙質の悪い写真をスキャンしたような)に表示されます。
ネットで「印刷すれば大丈夫」というコメントも見かけたのですが、会社のプリンタでの印刷では画質が悪いままプリントされました。
数日前まで配置画像は普通(キレイ)に表示され、プリントもできていたので困っています。
原因・対処法をご存知の方がいらっしゃいましたら、ぜひアドバイスしていただきたいです。
よろしくお願いいたします。

Aベストアンサー

>Photoshopで加工し、画面上は問題のない画像をIllustratorに配置すると途端に画質が荒くガサガサ(紙質の悪い写真をスキャンしたような)に表示されます。

画像は通常状態ではリンクで配置されるためプレビュー画質で表示されるために画質はドットの荒い状態で表示されます。
他回答者様が仰るように画像を埋め込みにすれば見た目や後述する印刷の問題は解消されます。
ただ、埋め込みにするとCS6以前のバージョンでは再度編集などが面倒になるので環境を再考する方をお奨めします。

>ネットで「印刷すれば大丈夫」というコメントも見かけたのですが、会社のプリンタでの印刷では画質が悪いままプリントされました。

正確には「PostScript(以降PS)プリンタで印刷すれば大丈夫」です。
画質の悪いままでプリントされると言うことはPS非対応のプリンタなのだと推測されます。
PS対応のプリンタ(印刷所の印刷機もPS対応しています)であれば綺麗に印刷されるので「大丈夫」と言われるわけです。

>数日前まで配置画像は普通(キレイ)に表示され、プリントもできていたので困っています。

画像形式がJPEGの場合だと綺麗な画質で配置され、PS非対応プリンタでもそのままで印刷される場合があります(解像度にも拠りますが)。

>Photoshopで加工し、画面上は問題のない画像をIllustratorに配置すると途端に画質が荒くガサガサ(紙質の悪い写真をスキャンしたような)に表示されます。

画像は通常状態ではリンクで配置されるためプレビュー画質で表示されるために画質はドットの荒い状態で表示されます。
他回答者様が仰るように画像を埋め込みにすれば見た目や後述する印刷の問題は解消されます。
ただ、埋め込みにするとCS6以前のバージョンでは再度編集などが面倒になるので環境を再考する方をお奨めします。

>ネットで「印刷すれば大丈...続きを読む


人気Q&Aランキング