フォトショップやイラストレーターを使用するためのウェブデザインは何ですか?


8

Webサイト、Photoshop、Illustratorのデザインには何を使用すればよいですか?

正しいソフトウェアはありますか、それとも個人的な選択ですか?


あなたのコンテンツはどうなりますか?
SaturnsEye 14

それは確かに意見に基づく質問です。ウェブサイトをデザインするためのソフトウェアはたくさんあります。Ai、Ps、Dreamweaver、ブラウザーで直接。それぞれにファンと批判者がいます。
Vincent

1
また、IllustratorとPhotoshop以外にも多くのオプションがあることに注意してください
スパイラル

@SaturnsEye私は学習していて、ツールを選択しようとしています。
ジャンニス14

1
@SaturnsEye構造、レイアウト
Giannis

回答:


7

Photoshopに関するアナクスナマンの回答に同意しません。先日私が回答した同様の質問(「開発者向けのPSDの整理」)で、この進化する時代では、デザイナーとコーダーはワークフローとともに進化する必要があり、Photoshopを使用することは古風であり、Webデザインではもはや目的を果たしていません。効果的な開発手段。それは写真を操作するための優れたツールですが、それを使用してWebサイトのデザインを実装することは無意味です。

特にアートボードを使用すると、Illustratorでより良いアプローチを実現できることをお勧めします(参照:Webサイトを設計する手順は何ですか?)。ただし、ワイヤーフレームとモックアップについて話しているサイト全体をIllustrator Imでデザインすることについては言及していません。引き続きブラウザでデザインする必要がありますが、アイコンをデザインする場合は、Illustratorで完成させてエクスポートできます。ブランディングや印刷関連の何かを開発するつもりなら、開発したロゴがベクトル形状であり、そのベクトル形状をレスポンシブWebデザインのスケーラブルな画像のSVGとして保存できることを期待しています。したがって、単純なモックアップまたは関連するアイコンをSVGコードとしてエクスポートしてXHTMLドキュメントに含めることができます(参照:AIでマップを作成しましたが、ファイルサイズはsvgとして巨大ですか?

コーディングのトピックでは、Dreamweaverは無意味で無駄なお金だと思います。いくつかのWeb開発会社で、Dreamweaverで笑い話を聞いたことがあると聞いたら、新しいユーザーにとっては問題ありませんが、Dreamweaverの使用を始めた私と一緒に仕事をした人は、コードに取り組む代わりにデザインプレビュー領域に大きく依存しており、コードの完成は、新しいコーダーが依存する悪い習慣です。最初からコード補完を常に使用している場合、適切にコーディングする方法を覚えていません。Notepad ++、Text Wrangler(私は有料のBBEDitが好きです)、Sublime Textなど、無料で使える強力で強力なコードエディターがいくつかあります。

では、「PhotoshopとIllustratorのどちらを使用するかをWebデザインする」という質問の要約を示します。どちらも、画像操作では、PhotoshopとIllustratorを使用して、ロゴ、モックアップ、ワイヤーフレーム、アイコンなど、SVGとして実行できるすべてのものを使用します。モックアップが完成したら、コードエディターで作業し、サイトの残りの部分を開発します。


1
私の仕事の大部分をGIMP、Inkscape、Notepad ++でやったと言ったら、それはあなたをなだめるでしょうか?:-P
アナクスナマン

GimpやPhotoshopはもうあまり使用していません
。ImageMagickを

4

フォトショップやイラストレーター?

はい。そしてまた可能性が高い

  • 論文
  • えんぴつ
  • ワイヤーフレームツール
  • JavaScript
  • html
  • CSS

つまり、ツールボックスがあり、特定のタスクに適したツールを使用します。


1
あなたの答えの一番下の行は正しいですが、私はそれを読んで実際に何も学びませんでした。いくつかの具体的な例(Darth_Vaderの回答など)が役立ちます。
Stijn

3

残念ながら、どのグラフィックスプログラムもWebサイトで使用するコンテンツを出力できるため、これは二者択一の質問ではないと主張します。したがって、その点では、個人的な選択のほうがはるかに多くなります。

とはいえ、即時のコーディング(モックアップや使用する要素のエクスポートなど)をまったく行わない場合は、Photoshopが最も広く使用されている製品です。クライアントはあなたがこの製品を使用することを望んでいるか、または期待している可能性があり、同様に、あなたに配信するサードパーティ(ロゴ作業を外部委託する場合など)は完成品を.psd形式で配信する場合があります。したがって、日々何をするかに関係なく、Photoshopのコピーを用意することを強くお勧めします。

自分の作業については、IllustratorとPhotoshopの機能は十分に類似しているため、Illustratorを適応させてフロントエンドWebデザイン(グラフィック部分)を作成できます。単純なGoogle検索で、CS5のいくつかの基本設定でこの結果が見つかりました。これは、Webデザイナーに役立ちます。Illustratorはベクトルベースの画像と印刷をより真剣に対象としているため、Webデザインに使用する場合は、ボックスの外側で少し考える必要がある場合があります。

Adobe Dreamweaverは、少なくともデザインでコーディングを行う場合は、ほぼ必須のリストでPhotoshopに次いで2位です。コード(およびいくつかのプロプライエタリな手間)を伴うエントリーレベルの作業では、Adobe MuseはDreamweaverの一種の代替手段です。もちろん、似たようなことを行う他の素晴らしい製品はたくさんありますが、やはり人気がDreamweaverを選びます。

または、MS Visual Studio Express、Komodo、Notepad ++などの優れた無料のコードエディターがいくつかあります(一部の基本的なコンテンツ作業にはMarkdownPadを使用することもできます)。コード補完などですが、本当にDreamweaver以外のWYSIWYGが必要な場合は、他の製品もあります。

Photoshop以外のIllustratorのベクター以外のラスター代替が必要な場合は、必要に応じてCorel製品またはオープンソースのGnu画像操作プログラム(GIMP)を使用できます。GIMPには(私が述べた代替コードエディターのように)無料であるという利点があります。

使用する優れたツールには、モックアップから最終的な要素をエクスポートするための「スライス」オプションがあるはずです(これらはまだソートされておらず、個別に保存されていない場合)。それ以外は、便利という名前を除いて、私の意見では「必須」の機能はほとんどありません。

正直に言うと、十分に精通していれば、文字通りすべてのWebデザインをMSペイントとメモ帳で行うことができます...


2

どちらもWebデザインに使用できますが、選択によって異なりますが、Webデザイン/ワイヤーフレームを早期に提供する場合、Illustratorはこのタスクをはるかに迅速かつ簡単に使用できます。



1

私にとってはIllustratorは手軽ですが、Photoshopでほぼすべてのことを実行できます。クリエイティブクラウドパッケージ全体を購入する余裕がない場合は、Photoshop CCに十分なお金を見つけることをお勧めします。

クリエイティブクラウドを購入できる場合は、以下をお勧めします。

  1. ワイヤーフレーミングとレイアウト設計のためのAdobe Muse CC
  2. アイコン、ロゴ、その他のイラスト用のAdobe illustrator CC
  3. 写真を操作および編集するためのAdobe Photoshop CC

アドビのミューズは、すべての魔法が起こる場所です。これは、InDesignを構築した一部の人々によって構築され、印刷デザイナーが1行のコードを記述することなくWeb上にWebサイトを公開できるように設計されています。

モックアップをPDF形式にする必要はなくなりました。代わりに、クライアントが実際にどのように機能するかを実際に感じることができるレスポンシブデザインを作成できます。しかし、それでもPDFプレゼンテーションを作成したい場合は、Ausesomeスクリーンショットクロム拡張機能をダウンロードすることをお勧めします。これは、museからpngファイルのpdfをエクスポートできないためです。とにかく私が知っていることではありませんか?

また、最終的に自分でWebサイトをコーディングし、長い目で見ればより良い構築サイトを作成するために、すべてを黙らせるだけにしないことをお勧めします。

また、多くのWebデザイナーはデザインソフトウェアさえ使用せず、ブラウザーで最初からデザインするだけです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.