Eine Website von Grund auf neu gestalten - Illustrator oder Photoshop?

Wenn ich eine Website von Grund auf neu entwerfe und beabsichtige, sie in Adobe Dreamweaver zu schneiden und später zu codieren, sollte ich das Design der Website in Illustrator oder Photoshop erstellen? Warum?

Schnelle wörtliche Antwort: Zwischen Illustrator und Photoshop, PhotoShop, als Raster, ebenso wie die Website.

Etwas detailliertere Antwort: Sie würden beide verwenden.

Alternative Antwort: Erwägen Sie die Verwendung von Adobe Fireworks. Fireworks ist so viel einfacher zu verwenden, wenn Sie erst einmal den Dreh raus haben, um Webgrafiken zu erstellen.

Lange langweilige Vortragsantwort:

Die "Slice-n-Dice" -Methode ist etwas veraltet. Es war vor einem Jahrzehnt beliebt, aber heutzutage ist es wirklich nicht der empfohlene Ansatz. Ich würde vorschlagen:

• Verwenden Sie eine beliebige App (AI / PSD), um die Site zu "skizzieren". Fühlen Sie sich frei, High-Fidelity zu gehen, aber behandeln Sie es nur als Modell.

• Sobald Sie dies eingerichtet haben, beginnen Sie mit dem Aufbau der Site. Tauchen Sie ein in HTML / CSS / JS.

• Wechseln Sie nach Bedarf in PhotoShop, um die einzelnen grafischen Elemente zu erstellen, die Sie benötigen.

Warum? Das Entwerfen in Photoshop berücksichtigt nicht das Medium, in dem Sie arbeiten. Es ist eine feste Leinwand, und das Web ist weder eine feste Leinwand noch eine Standard-Leinwand. Es führt das Team zu einer pixelgenauen Idee und das Web ist einfach nicht pixelgenau.

Verwenden Sie Fireworks oder Illustrator für die Erstellung von Logos und Symbolen. Verwenden Sie für die Fotobearbeitung Photoshop. Für alles andere ist es sehr unwichtig. Ich weiß, dass es Debatten darüber gegeben hat, welche Grafiksoftware verwendet werden soll, aber es ist wirklich eine persönliche Präferenz.

Beachten Sie jedoch:

• Feuerwerk ist jedoch besser für die PNG-Komprimierung. Die Dateigrößen sind in der Regel 20 bis 30% kleiner als bei Photoshop.

• Wenn Sie später wissen, dass Sie andere Nicht-Web-Inhalte für die Website entwerfen (T-Shirts, Poster, Flyer usw.), ist es besser, wenn Sie in einem vektorbasierten Programm starten.

Ich muss DA01 nicht zustimmen.

Die Tatsache, dass ein Webdokument kein statisches Bild ist, spielt für die Nützlichkeit eines Grafikeditors für das Layout und die Gestaltung einer Website keine Rolle. Ihr Designmodell muss (und sollte) kein funktionierender Prototyp Ihrer Website sein. Das Designmodell ist ein Dokument, mit dem Sie das ästhetische Design Ihrer Website visualisieren und gestalten können.

Nur weil ein Blatt Papier oder Whiteboard nicht die winzigen Eigenschaften eines Webdokuments aufweist, bedeutet dies nicht, dass es nicht zum Drahtmodellieren einer Website verwendet werden kann. Ebenso hat die Tatsache, dass das Browserfenster gedehnt und in der Größe geändert werden kann, keinen Einfluss auf den Wert von Designmodellen. Jeder erfahrene Webdesigner kann bestimmte Teile des Layouts als elastisch planen und die Einschränkungen der Webtechnologien berücksichtigen. Alle visuellen Elemente eines Layouts können weiterhin in einem flachen Bild dargestellt werden (so wird es schließlich auf dem Bildschirm gerendert).

Zweitens ist ein schrittweiser Designansatz nicht förderlich für Qualitätsergebnisse. Sie entwerfen ein Weblayout, nicht hundert isolierte Widgets. Ohne ein Modell des vollständigen Layouts klatschen Sie im Grunde nur, ohne eine Vorstellung davon zu haben, wie das Endergebnis aussehen soll. Das Hinzufügen einzelner grafischer Elemente Stück für Stück, ohne dass Sie einen Überblick über die gesamte Komposition erhalten, widerspricht guten Entwurfspraktiken. Ein Entwurf ist abgeschlossen, wenn Ihnen die zu entfernenden Elemente ausgehen und nicht, wenn Ihnen die hinzuzufügenden Elemente ausgehen.

Schließlich dauert es viel länger, Designänderungen im Code vorzunehmen, als ein Modellbild zu optimieren. Aus diesem Grund sollten Sie Ihr Design immer in Mockups planen, bevor Sie sich zum Code verpflichten. Ob Sie ein Vektorgrafikprogramm wie Fireworks oder Illustrator oder ein Rasterprogramm wie Photoshop verwenden, liegt ganz bei Ihnen. Sie sollten Ihr Design jedoch immer in einem Grafikeditor ausarbeiten, bevor Sie mit dem Codieren beginnen.

Hier ist ein guter Beitrag, der dies auf lustige Weise erklärt :) http://www.gomediazine.com/tutorials/photoshop-vs-illustrator-part-1/

Hier ist eine bessere Erklärung aus einer sehr zuverlässigen Quelle "http://99designs.com/help/whats-the-difference-between-photoshop-and-illustrator"

"Letztendlich sollte die Entscheidung, welches Tool verwendet werden soll, vom Wettbewerbsinhaber vorgeschrieben werden. Im Allgemeinen sollte Illustrator jedoch für Logos und Druckarbeiten verwendet werden, während Photoshop für Webdesign und alle Designs verwendet werden sollte, die nur auf einem Computer angezeigt werden Bildschirm."

Wenn Sie "schneiden" müssen, können Sie Photoshop direkt verwenden, ohne zu Dreamweaver zu wechseln.

In Photoshop gibt es zwei Möglichkeiten, automatisch und manuell Slices zu erstellen, indem Sie den gewünschten Teil der Grafik auswählen und einzeln für das Web speichern.

Jedes Mal, wenn Sie beim Generieren von HTML "automatisch schneiden", verlieren Sie die Kontrolle über den Code. Zu Beginn Ihrer Karriere ist es in Ordnung, Sie lernen, aber es wird einen Punkt erreichen, an dem Sie den Code kennen müssen, da es zur Optimierung besser ist, den Code in einem erweiterten Texteditor (zum Beispiel der Software Ultraedit) zu handhaben eigenes HTML und CSS.

Der einzige Moment, in dem ich das automatische Schneiden nützlicher finde, ist, wenn ich beim Entwerfen für E-Mails Tabellencode generieren muss.

Photoshop zum Bild bereit. dh es geht um den Inhalt der Website. Der Kunde zahlt nicht für Ihre Portfolioerweiterung. KL

Es liegt auf der Hand, dass Sie Photoshop für umfassende Webdesign-Modelle verwenden sollten.

Illustrator-Designs werden im Vergleich zu Photoshop-Designs immer noch langsamer verarbeitet.

Wenn Sie Symbole und Webelemente entwerfen, würde ich vorschlagen, in Illustrator zu entwerfen und diese Elemente dann in Photoshop zu platzieren.

Wenn Sie in Photoshop Modelle erstellen, können Sie diese Dokumente einfach für ein schnelles Prototyping an Fireworks übertragen.

Photoshop wird besser sein. Es wird den Benutzern helfen, zu schneiden.