ゼロからウェブサイトを設計する–イラストレーターまたはフォトショップ？

Webサイトを最初からデザインしていて、後でそれをスライスしてAdobe Dreamweaverでコーディングする予定の場合、IllustratorまたはPhotoshopでWebサイトのデザインを作成する必要がありますか？どうして？

簡単な文字どおりの回答：IllustratorとPhotoshopの間で、PhotoShopはラスターであり、Webサイトも同様です。

もう少し詳細な答え：両方を使用することになります。

別の答え：Adobe Fireworksの使用を検討してください。Fireworksは、Webグラフィックの作成に慣れると、はるかに使いやすくなります。

退屈な長い講義の答え：

"Slice-n-Dice"メソッドは少し時代遅れです。それは10年前に人気がありましたが、最近では推奨されるアプローチではありません。私はお勧めします：

• あらゆるアプリ（AI / PSD）を使用して、サイトを「スケッチ」します。忠実度を上げてもかまいませんが、単なるモックアップとして扱ってください。

• それが確立したら、サイトの構築を開始します。HTML / CSS / JSに飛び込みます。

• 必要に応じて、PhotoShopに移動して、必要な個々のグラフィック要素を作成します。

どうして？まあ、フォトショップでのデザインは、あなたが作業しているメディアを考慮に入れていません。これは固定キャンバスであり、Webは固定キャンバスではなく、標準のキャンバスでもありません。それはチームをピクセルパーフェクトなアイデアに導き、ウェブはピクセルパーフェクトではありません。

ロゴとアイコンの作成には、FireworksまたはIllustratorを使用してください。写真の編集にはPhotoshopを使用します。それ以外の場合はほとんど問題になりません。どのグラフィカルソフトウェアを使用するかについては議論がありましたが、それは個人的な好みです。

ただし、次の点に注意してください。

• ただし、FireworksはPNG圧縮に適しています。ファイルサイズは、Photoshopよりも20％〜30％小さくなる傾向があります。

• 将来、サイト用の他の非Webコンテンツ（Tシャツ、ポスター、チラシなど）をデザインすることがわかっている場合は、ベクターベースのプログラムを開始することをお勧めします。

私はDA01に同意しなければなりません。

Webドキュメントが静止画像ではないという事実は、Webサイトのレイアウトとデザインを行うグラフィックエディタの有用性とは無関係です。あなたのデザインのモックアップはあなたのウェブサイトのプロトタイプである必要はありません（そしてそうすべきではありません）。デザインモックアップは、サイトの美的デザインを視覚化および彫刻するのに役立つドキュメントです。

紙やホワイトボードがWebドキュメントのすべての細かい品質を備えていないからといって、Webサイトのワイヤーフレームに使用できないわけではありません。同様に、ブラウザーウィンドウを拡大したりサイズ変更したりできるという事実は、デザインモックアップの価値には影響しません。経験豊富なWebデザイナーなら誰でも、レイアウトの特定の部分を柔軟なものとして計画し、Webテクノロジーの制限を説明することができます。レイアウトのすべての視覚要素は、フラットな画像内で表すことができます（結局、画面上でのレンダリング方法です）。

第二に、デザインへの段階的なアプローチは、高品質の結果にはつながりません。あなたは、100の独立したウィジェットではなく、Webレイアウトを設計しています。完全なレイアウトのモックアップがなければ、基本的には、最終結果がどのようになるかわからないまま、平手打ちするだけです。完全な構成の概要を理解せずに、個々のグラフィック要素を少しずつ追加していくと、優れた設計手法に反することになります。追加するものが足りなくなったときではなく、削除するものが足りなくなったときにデザインが完成します。

最後に、モックアップイメージを調整するよりも、コードのデザインを変更する方がはるかに時間がかかります。そのため、コードをコミットする前に、常にモックアップで設計を計画する必要があります。FireworksやIllustratorなどのベクターグラフィックプログラムを使用するか、Photoshopなどのラスタープログラムを使用するかは、あなた次第です。ただし、コーディングを開始する前に、グラフィックスエディターでデザインを作成する必要があります。

これを面白い方法で説明する良い投稿があります :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

これは非常に信頼できる情報源からのより良い説明です "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

「最終的に、使用するツールの決定はコンテスト所有者が規定する必要がありますが、一般的に、Illustratorはロゴや印刷作業に使用する必要があります。一方、PhotoshopはWebデザインやコンピューターでのみ表示されるデザインに使用する必要があります画面。"

「スライス」が必要な場合は、DreamweaverにアクセスせずにPhotoshopを直接使用できます。

フォトショップでスライスする方法は2つあります。自動または手動で必要なグラフィックの部分を選択し、一度に1つずつWeb用に保存します。

HTMLを生成して「自動的にスライス」するときはいつでも、コードの制御を失うことにします。あなたのキャリアの初めには大丈夫です、あなたは学んでいます、しかしそれはあなたがコードを知る必要があるポイントに到着します、なぜならそれは最適化のためにそれを行う高度なテキストエディター（例えばソフトウェアUltraedit）のより良いハンドコードだからです独自のhtmlおよびcss。

自動スライスの方が便利だと思うのは、電子メールの設計時にテーブルコードを生成する必要があるときだけです。

画像の準備ができたフォトショップ。つまり、サイトのコンテンツに関するものです。クライアントはあなたのポートフォリオの強化にお金を払っていません。KL

包括的なWebデザインのモックアップには、フォトショップを使用する必要があるのは明らかです。

イラストレーターのデザインは、フォトショップのデザインに比べて処理が遅い傾向があります。

アイコンやWeb要素をデザインする場合は、イラストレーターでデザインしてから、それらの要素をフォトショップに配置することをお勧めします。

photoshopでモックアップを作成すると、ラピッドプロトタイピングのためにそれらのドキュメントをFireworksに簡単に転送できます。

Photoshopの方が良いでしょう。それはユーザーがスライスするのに役立ちます。