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


11

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?


1
Ich würde Photoshop für seine breitere Verwendung und mehr Tutorials empfehlen.
Jichao

6
Sie sollten Websites zunächst nicht mit der alten Methode "Bild schneiden" entwerfen. Idealerweise starten Sie in HTML / CSS und verwenden Ihre Bildanwendungen, während Sie fortfahren.
DA01

@Jichao: Dein Kommentar sollte zu einer Antwort gemacht werden.
Philip Regan

2
@ DA01 "sollte nicht" könnte für eine solche subjektive Angelegenheit zu zwingend sein. Es gibt keine Best Practice für alle.
Jari Keinänen

2
@ Koiyu sehr wahr. Allerdings ist Slice-n-Dice heutzutage seltener die beste Vorgehensweise. Ich werde in einer Antwort näher darauf eingehen.
DA01

Antworten:


26

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.


Vielleicht könnten wir einfach die Breite der Leinwand korrigieren, da es so viele berühmte Websites mit fester Breite gibt. Weitere Informationen finden Sie unter 960.gs .
Jichao

das bringt dich auf halbem Weg dorthin. für einige Bildschirme.
DA01

Das sollte ein Problem sein. Ich habe jedoch keine großen LCDs, daher habe ich keine Gelegenheit, sie zu testen.
Jichao

1
Entschuldigung, wenn ich stumpf war. Was ich damit gemeint habe ist, dass es viel mehr ist, keine feste Leinwand zu sein, als ob es sich um eine Website mit fester Breite handelt ... Inhalte, mobile Geräte, unterstützende Technologien, SEO, Browser-Diskrepanzen usw.
DA01

2
+1 für die Empfehlung von Fireworks in Ihrer Antwort. Eine sehr unterschätzte, aber leistungsstarke Webdesign-Anwendung.
Dwayne Charrington

7

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.


+1 für "Wenn Sie es später wissen ..." finde ich es am besten, wenn Sie davon ausgehen, dass wichtige visuelle Elemente in anderen Formaten benötigt werden. Kunden wissen fast nie, wofür sie etwas verwenden möchten, bis sie es sehen, und werden nie verstehen, dass es nicht so einfach ist, ein RGB-Webbild für den Druck zu verwenden, wie sie es erwarten ... Es ist gut, etwas in der Gesäßtasche zu haben gelegentlich "Das sieht gut aus. Können Sie diesen Stil auf diese A0-Wandplakate anwenden, die wir für unsere große Konferenz am nächsten Dienstag drucken? Das ist einfach, oder?"
user56reinstatemonica8

Beim Thema effiziente Bildkomprimierung verlasse ich mich auf keine der Apps von Adobe. Probieren Sie ImageOptim aus , eine Mac-App. Es gibt andere lokale und webbasierte Lösungen. In einigen Fällen erhalten Sie viel kleinere Grafiken.
Zivil

6

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.


2
Ich glaube nicht, dass wir uns nicht einig sind. Ich stimme Ihnen aufgrund der Variablen "Erfahrener Webdesigner" voll und ganz zu. Das Problem ist, dass die Verantwortlichen für die PSD-Modelle häufig keine erfahrenen Webdesigner sind und dies im Verlauf des Projekts alle möglichen Kopfschmerzen verursacht. Was ein "Modell des vollständigen Layouts" betrifft, stimme ich ebenfalls zu. Ich würde jedoch nicht sagen, dass dies immer eine High-Fidelity-PSD-Datei sein sollte oder muss. Wireframes sind oft genug.
DA01

3
Ich werde Ihrem letzten Absatz jedoch nicht zustimmen. Sie müssen sich mit Code befassen, um die Benutzererfahrung vollständig zu gestalten. Und meistens ist dies ein Schlüsselelement des Designprozesses und tatsächlich recht einfach, Änderungen an diesem Punkt in der richtigen Umgebung vorzunehmen (Agilität ist ein guter Ausgangspunkt).
DA01

Ich würde mich an Ihre beiden Meinungen halten, und wahrscheinlich hängt es auch von den Projekten ab. Ich kann beide Punkte verstehen, obwohl ich sagen muss, dass ich nicht oft genug geduldig bin oder mich in Details verloren fühle, wenn ich zuerst die gesamte Seite in PS gestalte. Außerdem sehen Designs in CSS anders aus als PS. Außerdem habe ich festgestellt, dass ich, wenn Sie sich an das Codieren gewöhnen, zumindest für mich schneller bin, als es in PS zu ändern. Und zu guter Letzt können sich die Dinge ändern (auch nach sorgfältiger Planung jedes Details), und beim Codieren finde ich immer noch häufig Herausforderungen im Design (von CSS usw.), und ich müsste mich ändern - in PS ist das selten der Fall. .
Chris

1

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."


4
99designs ist keine verlässliche Quelle für irgendetwas.
DA01

Gibt es einen bestimmten Grund, warum Sie das sagen würden? Nur zur Klarstellung arbeite ich nicht mit ihnen oder bin in irgendeiner Weise an sie gebunden, aber in der Vergangenheit fand ich ihre Artikel und Blogs sehr nützlich. Sie wurden auch von vielen großen Mediennamen wie msnbc, New York Times usw. erkannt. Vermisse ich hier also etwas? Bitte teilen.
Ved

2
Und nur um meinen Standpunkt zu beweisen, wurde das Stack over Flow-Logo bei 99 Designs 99designs.com/users/245023
Ved

2
@ DA01: Bitte erkläre immer, warum etwas nicht zuverlässig ist, sonst ist in deinem Kommentar nichts Konstruktives.
Littlemad

1
Designwettbewerb über Crowd-Sourcing ist nie gut für mich und sollte nicht von professionellen Designern beworben werden. (Außerdem ist es in meinem Land etwas illegal: D)
Shikiryu

1

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.


0

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


2
Willkommen bei GD. Ich glaube, ich verstehe, worauf Sie hinaus wollen, aber können Sie das bitte etwas näher erläutern?
Farray

0

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.


-1

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


4
Diese Antwort ist etwas kurz. Können Sie bitte erklären, was Sie meinen?
Mensch

2
wer schneidet noch?
Scott
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.