Photoshop-Etikette für responsives Webdesign

Veröffentlicht: 2022-03-10

Kurze Zusammenfassung ↬ Es ist fast fünf Jahre her, dass Photoshop Etiquette auf den Markt kam, was es offiziell zu einem Relikt im Web macht. In ein paar Jahren kann im Internet viel passieren, und die letzten fünf haben das besser als die meisten anderen gezeigt.

Seit dem Start von Photoshop Etiquette sind fast fünf Jahre vergangen, was es offiziell zu einem Relikt im Web macht. In ein paar Jahren kann im Internet viel passieren, und die letzten fünf haben das besser als die meisten anderen gezeigt.

Im Jahr 2011 hat sich jeder mit responsivem Webdesign beschäftigt. Der traditionelle Comp-to-HTML-Workflow wurde erst zu Beginn kritisiert, und seitdem haben wir unzählige Alternativen gesehen. Stilkacheln, Stilprototypen, visuelle Bestandsaufnahmen, Elementcollagen, Stilrichtlinien und sogar das Entwerfen im Browser waren allesamt geeignete Ansätze für das Multi-Device-Design. Mit dem Wechsel vom seitenbasierten Design zum Aufbau eines Designsystems ist es wirklich eine aufregende Zeit.

Weiterführende Literatur zu SmashingMag:

Entwerfen für Retina in Photoshop
Erweiterte Animationen in Photoshop
Photoshop Retina-Asset-Workflow
Responsive Image Breakpoints Generator

Es gibt auch eine Explosion von Tools, die versuchen, einen reaktionsschnellen Workflow effizienter zu gestalten. Anwendungen wie Webflow und Macaw haben die Breakpoint-Visualisierung für Code-Averse verdaulich gemacht. Viele Designer sind von Photoshop als Arbeitstier zu Sketch, Affinity Designer oder ähnlichem übergegangen. Andere haben Apps wie Keynote für das Prototyping übernommen.

Mehr nach dem Sprung! Lesen Sie unten weiter ↓

Eine Flut von neuen Werkzeugen und Techniken hat die gute altmodische Etikette scheinbar in den Hintergrund gedrängt.

Ist „Etikette“ noch relevant?

Bei Alternativen zum schweren Photoshopping, mit dem wir vielleicht vertraut sind, ist es fair zu fragen, ob wir noch Etikette brauchen. Für diesen Artikel definieren wir Etikette als das Übertragen von Dateien auf organisierte, klare und erkennbare Weise. Responsive Design enthält normalerweise viele bewegliche Teile, von @2x-Bildern, verketteten CSS-Dateien und mehr. Da scheinbar mehr zu tun ist, um eine Website zu veröffentlichen, hat Effizienz zweifellos hohe Priorität, wenn wir profitabel sein wollen.

Oft als Effizienz getarnt, sind schlechte Organisation und Kommunikation das Ergebnis der Eile, ein Projekt zu versenden. Da Photoshop verschiedene Rollen in unseren Arbeitsabläufen übernimmt, sind Ebenen und exportierte Dateien leichte Ziele für Kürzungen. Es bleibt dabei: Alles, was es wert ist, getan zu werden, ist es wert, gut getan zu werden.

Wenn wir Zeit sparen wollen, müssen wir im Voraus etwas investieren, um organisiert und übersichtlich zu bleiben. Ineffizienz bedeutet, eine Datei von einem Kollegen zu übernehmen und wertvolle Zeit damit zu verbringen, herauszufinden, wo man anfangen soll, weil sie nicht eindeutig gekennzeichnet ist. Es muss Bilder reparieren, die bereits exportiert wurden. Im schlimmsten Fall ist es nicht möglich, die benötigte Datei überhaupt zu finden.

Was ist neu in der Photoshop-Etikette?

Photoshop Etiquette erhielt von Adjacent, einem Designstudio in Syracuse, NY, einen frischen Anstrich. Für diejenigen, die mit dem Konzept noch nicht vertraut sind, ist die Photoshop-Etikette ein Best-Practices-Leitfaden, der die Effizienz durch Klarheit im Webdesign fördert. Obwohl für Photoshop entwickelt, gelten viele dieser Prinzipien für Sketch und ähnliche, ebenenbasierte Designwerkzeuge.

Der Leitfaden ist in die folgenden Abschnitte unterteilt:

Dateiorganisation
Schichtaufbau
Asset-Export
Ausführung eingeben
Effektanwendung
Qualitätsprüfung

Diejenigen, die mit der Website vertraut sind, werden viele vertraute Richtlinien sehen, wie z. final-v3.psd'. Wenn Sie etwas tiefer graben, finden Sie eine Fülle von reaktionsschnellen Ressourcen, die mit verschiedenen Richtlinien verbunden sind, und ein paar Tipps zum Entwerfen für mehrere Geräte.

1. Konsolidieren Sie Ihre PSDs

Wenn Sie mehrere Kompositionen für mehrere Seiten erstellen, verfügt Photoshop jetzt über Zeichenflächen, mit denen Sie sich an ein einzelnes Dokument halten können. Dies hilft, Verwirrung darüber zu beseitigen, welche PSD die richtige PSD ist.

Wenn Sie es schwingen können, versuchen Sie es mit Zeichenflächen, Ebenenkompositionen oder intelligenten Objekten, anstatt Tonnen von PSDs zu verwalten.

2. Arbeiten Sie kooperativ

Durch das Hinzufügen von Creative Cloud Libraries und verknüpften Smart Objects können Designer Assets ganz einfach teilen. Wenn Sie beispielsweise in Photoshop eine Muster- oder Komponentenanleitung erstellen, kann ein Designer an einer Komponente arbeiten, während ein anderer Designer gleichzeitig an einer anderen arbeitet. Diese Komponenten können innerhalb einer Bibliothek oder als verknüpfte Smart-Objekte geteilt werden, die in eine Master-PSD gezogen werden.

Zwischen verknüpften Smart Objects und CC-Bibliotheken gibt es viele Optionen für die Zusammenarbeit.

3. Designen Sie nicht für das Gerät

Darüber lässt sich streiten, aber wenn es beim Responsive Design darum geht, alle Geräte einzubeziehen, sollten wir vielleicht nicht die beliebten Voreinstellungen für Apple-Geräte als Dokumentgrößen in Photoshop verwenden. Lassen Sie stattdessen zu, dass Ihr Design aufgrund von Layout-Stress Breakpoints diktiert, wo immer es fällt. Die Ausnahme ist, wenn Sie eine geräte- oder plattformspezifische App entwerfen, bei der die Ausrichtung auf solche Voreinstellungen hilfreich ist.

Erlauben Sie Ihrem Design, Breakpoints vorzuschreiben, nicht die im Moment beliebten Gerätebreiten.

4. Seien Sie nicht destruktiv

Mit der zunehmenden Implementierung und Unterstützung von SVG ist es für Designer wichtig, Vektorelemente in Photoshop zu erhalten und nicht zu reduzieren. Mit Photoshop können Sie jetzt SVGs speichern, was uns einen weiteren Grund gibt, mit unseren Pixeln nicht destruktiv umzugehen.

5. Achten Sie auf die Bildschirmauflösung

Apropos SVG, es ist wirklich zu einem großartigen Ansatz geworden, um ein Asset bereitzustellen, das sich an jede Größe anpassen kann und nicht an Genauigkeit verliert. Ein Retina-Asset-Workflow, ob SVG oder @2x/@3x-Bilder, ist zu einem Teil des Workflows eines reaktionsschnellen Praktikers geworden.

6. Komprimieren

Leistung ist eine gute Sache, nicht nur für einen Entwickler, sondern auch für einen Designer. Ich habe oft argumentiert, dass ich, wenn ich schwere Webfonts und ihre OpenType-Funktionen in meine Projekte integrieren möchte, den Unterschied ausgleichen muss, indem ich meine Bilder aggressiv komprimiere, um innerhalb eines Leistungsbudgets zu bleiben. Tools von Drittanbietern wie TinyPNG haben die Bildkomprimierung zum Kinderspiel gemacht.

Leistung ist die Aufgabe eines Designers. Stellen Sie sicher, dass Sie jede zusätzliche Dateigröße aus Ihren Bildern herausquetschen.

Da sich unsere Webdesign-Workflows und die Verwendung von Photoshop ständig ändern, wird sich auch die Website ändern. Während es einen Photoshop-zentrierten Workflow umfasst, gibt es auch ein paar Tipps für diejenigen, bei denen Photoshop sparsam verwendet wird. Der Leitfaden befürwortet nur, dass Sie, wenn und wann Sie Photoshop verwenden, Ihre Absicht so klar wie möglich kommunizieren.

Angetrieben von der Gemeinschaft

Einer der Hauptschwerpunkte der Photoshop-Etikette ist Wachstum, das sich in mehr Richtlinien, mehr Ressourcen und mehr Perspektiven manifestiert. Der Website wurde eine Funktion hinzugefügt, die einen einfacheren Zugang zum Einreichen einer neuen Richtlinie zur Überprüfung ermöglicht, was Hunderte von Designern und Entwicklern im Laufe der Jahre getan haben, indem sie mich auf Twitter aufgespürt oder eine E-Mail-Adresse gesucht haben.

Aufgrund der Ungenauigkeiten von Google Translate gibt es auch einen offenen Aufruf zur Übersetzung von Freiwilligen aus der Community.

Es ist spannend zu sehen, wie die Photoshop-Etikette bei so vielen Organisationen und Einzelpersonen Anklang gefunden hat. Wie kann es Ihnen und Ihrem Team helfen?