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

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

Ich würde Photoshop für seine breitere Verwendung und mehr Tutorials empfehlen.
Sie sollten Websites nicht mit der alten „Slice-an-Image“-Methodik entwerfen. Idealerweise beginnen Sie in HTML/CSS und verwenden Ihre Bildanwendungen, während Sie fortfahren.
@Jichao: Ihr Kommentar sollte in eine Antwort umgewandelt werden.
@ DA01 "sollte nicht" ist für eine so subjektive Angelegenheit möglicherweise zu zwingend. Es gibt keine Best Practice für alle.
@koiyu sehr wahr. Allerdings ist Slice-n-Dice heutzutage seltener die beste Methode. Ich werde in einer Antwort näher darauf eingehen.
@Phillip Regan: Es ist zu kurz, um eine Antwort zu sein, und ich kann es aufgrund meiner mangelnden Erfahrung mit Illustrator nicht auf eine Antwort in voller Länge erweitern.
Sie sollten wahrscheinlich auch InDesign in Betracht ziehen, besonders wenn Sie an einer textlastigen Website arbeiten. Sehen Sie sich den Fall für die responsive Website von Boston Globe an .
Für moderne Website-Layouts würden Sie das Bild-Slicing überspringen und direkt zu HTML/CSS wechseln. Wir befinden uns in der Ära der flachen Benutzeroberfläche/Mobilgeräte ... keine ausgefallenen Texturen erlaubt :)

Antworten (8)

Schnelle wörtliche Antwort: Zwischen Illustrator und Photoshop, PhotoShop, da es ein Raster ist, 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, sobald Sie 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 Website zu „skizzieren“. Fühlen Sie sich frei, High-Fidelity zu verwenden, aber behandeln Sie es lediglich als Mock-up.

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

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

Wieso den? Nun, das Designen in Photoshop berücksichtigt nicht das Medium, in dem Sie arbeiten. Es ist eine feste Leinwand, und das Web ist keine feste Leinwand, noch ist es eine Standard-Leinwand. Es führt das Team zu einer pixelperfekten Idee und das Web ist einfach nicht pixelperfekt.

Vielleicht könnten wir einfach die Breite der Leinwand festlegen, da es so viele berühmte Websites mit fester Breite gibt. Weitere Informationen finden Sie unter 960.gs .
das wird dich auf halbem Weg dorthin bringen. für einige Bildschirme.
Das sollte ein Problem sein. Allerdings habe ich keine großen LCDs, daher habe ich keine Möglichkeit, es zu testen.
Entschuldigung, wenn ich stumpf war. Was ich meinte, ist, dass es viel mehr dazu gibt, dass es sich nicht um eine feste Leinwand handelt, als ob es sich um eine Website mit fester Breite handelt oder nicht ... Inhalt, mobile Geräte, Hilfstechnologien, SEO, Browser-Diskrepanzen usw.
+1 für die Empfehlung von Fireworks in Ihrer Antwort. Eine sehr unterschätzte, aber leistungsstarke Webdesign-Anwendung.
@Jichao zu "Ich habe jedoch keine großen LCDs, daher habe ich keine Gelegenheit, es zu testen" - ctrl-(Zoom out) ist Ihr Freund bei der Simulation großer Bildschirme. Nicht stumpfsinnig, es ist wirklich sehr praktisch, besonders wenn Sie ein ansprechendes Design testen, designmodo.com/responsive-design-examples Vergessen Sie nur nicht, dass Bildlaufleisten nicht schrumpfen, wenn Sie herauszoomen.
Ich kaufe nicht, dass Ihre Website eine Rastersache ist. Fonts sind Vektoren, Boxen sind Vektoren...
@joojaa ja, das könnte man argumentieren. SVGs sind auch. Die Dinge haben sich in 4 Jahren geändert ... :)

Verwenden Sie Fireworks oder Illustrator für die Logo- und Symbolerstellung. Verwenden Sie zur Fotobearbeitung Photoshop. Für alles andere spielt es sehr wenig eine Rolle. Ich weiß, dass es Diskussionen darüber gegeben hat, welche Grafiksoftware verwendet werden soll, aber das ist wirklich eine persönliche Präferenz.

Beachten Sie jedoch:

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

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

+1 für "Wenn Sie später wissen ...", ich finde es sogar am besten, davon auszugehen, 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 erstellen, wie sie erwarten ... Es ist gut, etwas in der Hosentasche zu haben das gelegentliche "Das sieht toll aus, können Sie diesen Stil nehmen und ihn auf diese A0-Wandposter anwenden, die wir für unsere große Konferenz nächsten Dienstag drucken? Das ist einfach zu machen, oder?"
Beim Thema effiziente Bildkomprimierung verlasse ich mich auf keine der Apps von Adobe. Probieren Sie etwas wie ImageOptim , eine Mac-App. Es gibt andere lokale und webbasierte Lösungen. In einigen Fällen erhalten Sie viel kleinere Grafiken.

Da muss ich DA01 widersprechen.

Die Tatsache, dass ein Webdokument kein statisches Bild ist, ist für die Nützlichkeit eines Grafikeditors für das Layout und die Gestaltung einer Website unerheblich. Ihr Design-Mockup muss (und sollte) kein funktionierender Prototyp Ihrer Website sein. Das Design-Mockup ist ein Dokument, das Ihnen hilft, das ästhetische Design Ihrer Website zu visualisieren und zu formen.

Nur weil ein Blatt Papier oder ein Whiteboard nicht all die winzigen Qualitäten eines Webdokuments hat, bedeutet das nicht, dass es nicht für das Wireframe einer Website verwendet werden kann. Auch die Tatsache, dass das Browserfenster gestreckt und in der Größe verändert werden kann, hat keinen Einfluss auf den Wert von Design-Mockups. Jeder erfahrene Webdesigner weiß, wie man bestimmte Teile des Layouts elastisch plant und die Einschränkungen von Webtechnologien berücksichtigt. Alle visuellen Elemente eines Layouts können immer noch in einem flachen Bild dargestellt werden (so wird es schließlich auf dem Bildschirm gerendert).

Zweitens ist ein bruchstückhafter Designansatz nicht förderlich für qualitativ hochwertige Ergebnisse. Sie entwerfen ein Weblayout, nicht hundert isolierte Widgets. Ohne ein Mockup des vollständigen Layouts klatschen Sie im Grunde nur Dinge auf, ohne eine Vorstellung davon zu haben, wie das Endergebnis aussehen sollte. Stück für Stück einzelne grafische Elemente hinzuzufügen, ohne den Überblick über die Gesamtkomposition zu behalten, widerspricht guter Gestaltungspraxis. Ein Design ist fertig, wenn Ihnen nichts mehr zum Entfernen ausgeht, nicht, wenn Ihnen nichts mehr zum Hinzufügen ausgeht.

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 auf Code festlegen. Ob Sie ein Vektorgrafikprogramm wie Fireworks oder Illustrator oder ein Rasterprogramm wie Photoshop verwenden, bleibt Ihnen überlassen. Aber Sie sollten Ihr Design immer in einem Grafikeditor ausarbeiten, bevor Sie mit dem Codieren beginnen.

Ich glaube nicht, dass wir uneins sind. Ich stimme Ihnen in Bezug auf die Variable „erfahrener Webdesigner“ vollkommen zu. Das Problem ist, dass die Verantwortlichen für die PSD-Modelle oft keine erfahrenen Webdesigner sind, und das verursacht im Laufe des Projekts allerlei Kopfschmerzen. Was ein „Mockup des vollständigen Layouts“ betrifft, stimme ich auch zu. Ich würde jedoch nicht sagen, dass dies immer eine High-Fidelity-PSD-Datei sein sollte oder muss. Wireframes reichen oft aus.
Deinem letzten Absatz stimme ich allerdings nicht zu. Sie müssen in den Code einsteigen, um die Benutzererfahrung vollständig zu gestalten. Und meistens ist dies ein Schlüsselelement des Designprozesses und eigentlich recht einfach, an diesem Punkt in der richtigen Umgebung Änderungen vorzunehmen (Agilität ist ein guter Ausgangspunkt).
Ich würde bei Ihren beiden Meinungen bleiben, und wahrscheinlich hängt es auch von den Projekten ab. Ich kann beide Punkte nachvollziehen, muss aber sagen, dass ich oft zu wenig geduldig bin oder mich in Details verloren fühle, wenn ich erst die ganze Seite in PS gestalte. Außerdem sehen Designs in CSS anders aus als in PS. Außerdem habe ich festgestellt, dass ich zumindest für mich schneller bin, wenn Sie sich an das Codieren gewöhnen, als es in PS zu ändern. Und nicht zuletzt können sich die Dinge ändern (auch nach sorgfältiger Planung jedes Details), und beim Codieren finde ich immer noch oft Herausforderungen im Design (von CSS usw.) und ich müsste mich ändern - bei PS ist das selten der Fall. .

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 wird, vom Wettbewerbsinhaber vorgegeben werden, aber im Allgemeinen sollte Illustrator 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."

99designs ist keine zuverlässige Quelle für irgendetwas.
Gibt es einen bestimmten Grund, warum Sie das sagen würden? Nur zur Klarstellung: Ich arbeite nicht mit ihnen oder bin in irgendeiner Weise mit ihnen verbunden, 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. anerkannt. Verpasse ich hier also etwas? Bitte teilen.
Nun, für den Anfang ist das Zitat eine grobe Verallgemeinerung und nicht sehr genau. Als Designunternehmen sind sie mit Kinkos verwandt. Gut für billige langweilige Lösungen. Aber das war es schon.
@DA01: bitte erkläre immer, warum etwas nicht zuverlässig ist, sonst ist in deinem Kommentar nichts Konstruktives.
Designwettbewerb via Crowdsourcing ist nie gut für mich und sollte nicht von professionellen Designern gefördert werden. (Außerdem ist es in meinem Land leicht illegal :D)
@Littlemad Unternehmen wie 99designs gelten als Ausbeuter der Branche. Es gibt einen Markt für das, was sie tun, aber niemand würde es Qualitätsarbeit nennen.
@Ved Ja, das Stackoverflow-Logo wurde bei 99 Designs erstellt ... 99designs.com/logo-design/contests/logo-stackoverflow-6774/… ... lässt Sie sich fragen, warum Leute Crowdsourcing mögen. Am Ende wählt ein Unternehmen nur die Besten der Schlechtesten aus.

Wenn Sie "Slicing" benötigen, können Sie direkt Photoshop verwenden, ohne zu Dreamweaver zu gehen.

In Photoshop gibt es zwei Möglichkeiten zum Slicen, automatisch und manuell, indem Sie den Teil der Grafik auswählen, den Sie benötigen, und ihn Stück für Stück für das Internet speichern.

Jedes Mal, wenn Sie beim Generieren von HTML "automatisch aufteilen", entscheiden Sie sich, die Kontrolle über den Code zu verlieren. Am Anfang Ihrer Karriere ist es ok, Sie lernen, aber es wird einen Punkt erreichen, an dem Sie den Code kennen müssen, denn zur Optimierung ist es besser, Handcode auf einem fortgeschrittenen Texteditor (z. B. der Software Ultraedit) zu erstellen eigenes html und css.

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

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

Willkommen bei GD. Ich glaube, ich verstehe, worauf Sie hinauswollen, aber können Sie das bitte etwas weiter ausführen?

Es liegt auf der Hand, dass Sie Photoshop für umfassende Webdesign-Mockups 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 Mockups in Photoshop erstellen, können Sie diese Dokumente für Rapid Prototyping ganz einfach in Fireworks übertragen.

Photoshop wird besser sein. Es wird den Benutzern beim Slicen helfen.

Diese Antwort ist ein bisschen kurz. Können Sie bitte erklären, was Sie meinen?
wer schneidet noch?
Eine Website von Grund auf neu gestalten – Illustrator oder Photoshop?
AntwortenHierDatenschutz-Bestimmungen1y, 0v