Generieren von Responsive Image Assets mit Photoshop CC 2014

Verwenden Sie Photoshop CC 2014 effizient, um reaktionsschnelle Bildressourcen zu erstellen

Dieser Artikel wird von Adobe gesponsert. Vielen Dank für Ihre Unterstützung für SitePoint!

Bild: Andy Schofield - CC

Schlüsselpunkte

• Photoshop CC 2014 bietet eine Reihe von Tools, um reaktionsschnelle Bildressourcen zu generieren, einschließlich der Verwendung von Smart -Objekten, Layer -Marshalling und der Funktion "Ressourcen extrahieren". Diese Tools ermöglichen eine effiziente Änderung, Transformation und Exportieren von Bildern, ohne die Qualität zu verlieren.
• Verwenden Sie SVG (skalierbare Vektorgrafiken), wo immer möglich, da es kleine Dateien bietet, die sofort neu skaliert werden können, ohne die Bildqualität zu verlieren. Dies ist besonders nützlich bei reaktionsschnellen Designs, da dies bedeutet, dass nur eine Datei für alle Auflösungen verwaltet werden muss.
Die neue Online -Service von Adobe, Creative Cloud Assets, ermöglicht eine einfache gemeinsame Nutzung und kollaborative Verarbeitung von PSD -Arbeiten. Dies beinhaltet, dass Sie PSDs mit Kunden zur Prüfung, die Verteilung von PSDs an externe Auftragnehmer und den Zugriff auf Extraktressourcen an externe Auftragnehmer teilen können, ohne dass sie Photoshop selbst installieren müssen.

Stellen Sie die richtigen Ressourcen für die richtige Ausrüstung zur Verfügung.

Vor fünf Jahren war das Internet ein vorhersehbarerer Ort, nicht wahr? Als Webentwickler können wir vernünftigerweise erwarten, dass der Webbrowser nicht weniger als 640 Pixel in der Breite und nicht mehr als 1240 Pixel beträgt - genau so, als ob unser "Internet Highway" nur Serien passt. Unsere aktuelle Realität ist sehr unterschiedlich. Heutzutage machen mobile Benutzer normalerweise mehr als die Hälfte unseres Verkehrs aus. Die Wahrheit ist, dass im Jahr 2014 so viele Motorräder auf "unsere Autobahn" wie Autos und Lastwagen waren. Warum laden wir immer noch das gleiche "Heimgröße" -Fbild auf all diesen sehr unterschiedlichen Geräten?

Aber ist das wirklich wichtig?

Im letzten Monat hat Tammy Everts einige Warndaten über die Auswirkungen der Website auf das Benutzerverhalten veröffentlicht. Dazu gehören:

1. Langsame Webseiten können zu mehr als 3 Milliarden US -Dollar an Verkaufsverlusten pro Jahr führen
2. 44% der Käufer interpretieren die langsame Leistung als "Fehler aufgetreten"
3. 2 Sekunden Verzögerung während der Transaktion = 87% CART CART HINTSBUCH

Die Daten von

Tammy zeigen, dass das Senden von langsamen, hausgemachten Bildern auf kleine Geräte nicht nur unhöflich ist-es kostet uns tatsächlich Kunden und Geld. Indem wir das Bild an die Grenzen jedes Geräts einstellen, können wir die Seite schneller liefern und gleichzeitig Bandbreitenkosten sparen-eine Win-Win-Win-Situation für alle.

Liefern Sie das richtige Bild

Es gibt bereits einige reife Möglichkeiten, um dem Gerät adaptive Bildinhalte zu liefern. Die beste Wahl im Moment ist:

squeezr.it

• adaptive-images.com: Die Lösung von Matt Wilcox ist die bevorzugte Lösung für viele Entwickler. Es handelt sich um geräteunabhängige und mobile erste, obwohl es normalerweise einige Kenntnisse über Apache und PHP-Setup erfordert.
• squeezr.it: Squeezr ist in hohem Maße von adaptiven Images inspiriert, bevorzugt es jedoch, Client-Richtlinien zu verwenden, um Breakpoints zu bestimmen und zu reagieren.

Mach dir keine Sorgen: Dies sind ausgezeichnete Lösungen, aber wir werden sie heute nicht auf sie achten. Stattdessen möchte ich einen anderen Teil des Problems betrachten: Bildressourcen. Wie generieren wir all diese unterschiedlichen Bildressourcen? Adobe hat viel über dieses Problem nachgedacht, das sich in Photoshop CC 2014 widerspiegelt. Es bietet eine Reihe von Werkzeugen - einige neue, einige alte - helfen.

Hier sind einige Tipps, um mit reaktionsschnellen Bildern zu beginnen:

Tipp 1: Einbetten Sie alle Bilder als intelligente Objekte

ein.

intelligente Objekte sind nichts Neues - sie sind seit 2005 in Photoshop - aber sie sind zum Kernwerkzeug für reaktionsschnelles Design geworden. Auch nachdem wir destruktive Transformationen auf sie angewendet haben, behalten intelligente Objekte immer Referenzlinks zu ihrem originalen Bildzustand. In den meisten Fällen wird das mehrmals in den meisten Fällen die Bildqualität bei jeder Iteration beeinträchtigen. Das intelligente Objekt wendet jedoch jede neue Transformation in den ursprünglichen Bildzustand an, ohne die Bildqualität zu verlieren. Dadurch werden alle Ihre hochauflösenden Bildressourcen (Avatare, Hintergründe, Fotos usw.) in intelligente Objekte fast eine unvermeidliche Entscheidung umgewandelt, sodass Sie die Größe, Drehen, Transformation und Neupositionierung der Größe haben, ohne sich darüber Sorgen zu machen. Das Konvertieren einer Ebene in ein intelligentes Objekt ist so einfach wie die rechte Klicken auf sie und die Auswahl " in ein intelligentes Objekt " auszuwählen.

Tipp 2: Verwenden Sie Ebenen, um

zu gruppieren In der Ära des reaktionsschnellen Designs ist "

Layout

" " Layout " geworden. Wir brauchen eine Möglichkeit, die Position desselben Seitenelements in zwei, drei oder mehr Positionen und Größen zu verwalten. Dies ist der Zweck der "Schichtgruppierung". Stellen Sie sich jede neue Ebenegruppe zu einem bestimmten Zeitpunkt als "Schnappschuss" des Ebenenfelds vor. Sie können dann auf eine Taste in der Ebenengruppierpanel klicken, um jederzeit zu diesem Snapshot -Status zurückzukehren.

In der Praxis bedeutet dies normalerweise, ein mobiles Layout (Mobile-First) zu erstellen und es dann als neue Schicht-Marshalle zu erfassen. Sie können dann damit beginnen, das Layout für Ihr Tablet neu zu gestalten und es erneut in eine andere Ebenengruppe aufzunehmen.

Praktische Anwendung der Schichtgruppierung

Mit dem Schichtgruppentafel können Sie sofort durch Klicken zwischen einem dieser Zustände wechseln. Die Schichtgruppierung reduziert die Duplikation im Ebenenfeld und vereinfacht die gesamte Projektdatei.

Tipp 3: vergessen "Speicher als Web ..." - Verwenden Sie "Ressourcen extrahieren"

Ich muss zugeben, dass ich das Bildexportpanel von Fireworks immer geliebt habe. Photoshop nimmt Image als separate Anwendung und seine eigene integrierte Funktion "Storage As Web" bereit, aber für mich ist auch für mich auch nicht so einfach, leistungsfähig oder schnell wie ein Feuerwerk.

Starten Sie das Extract -Ressourcenfeld aus dem Schichtfeld.

Photoshop CC 2014 verwendet eine neue und verbesserte Bildexportmethode - eine neue Funktion "Extrahieren von Ressourcen". Schauen wir uns genauer an.

Das Extract -Ressourcenfeld befindet sich jede Ebene, die Sie im Schichtfeld ausgewählt haben. Theoretisch kann dies eine einzelne Schicht, alle Schichten oder eine beliebige Kombination zwischen beiden sein. Sie können dieses neue Panel von zwei Stellen aus starten:

1. Klicken Sie mit der rechten Maustaste auf eine beliebige Ebene/Ebene und wählen Sie "Ressource extrahieren"
2. oder auswählen "Ressource extrahieren" aus dem Menü Datei

Schauen wir uns das neue Panel "Extract Resources" an.

Ebenen können als eines von sechs Bildformaten exportiert werden:

1. png8
2. png24
3. png32
4. jpg
5. gif
6. svg (ja, dazu später mehr)

Sie haben auch die Möglichkeit, bis zu acht verschiedene Auflösungen gleichzeitig zu generieren - von 25% bis 400%. Photoshop erleichtert auch das automatische Präfix jedes Dateinamens und exportieren Sie in einen angemessenen Ordnernamen. Sie können es sogar so einstellen, dass es den gesamten Dateisatz automatisch regeneriert, wenn Sie das Originaldokument aktualisieren. Es ist nicht schwer zu erkennen, wie viel Zeit dies sparen kann. Beachten Sie, dass Sie, wenn Sie mit Ihrem aktuellen Workflow zufrieden sind, die klassische Option "Speichern als Web" verwenden können. Ich vermute jedoch, dass die meisten Menschen die Kraft und Flexibilität neuer Funktionen erkennen werden.

Tipp 4: Verwenden Sie SVG, wann immer möglich

SVG war 2014 einer der heißen Trends im Webdesign. Daher ist es aufregend zu sehen, dass die SVG -Unterstützung Photoshop eingeht. Vektoren sind besonders für reaktionsschnelle Designs geeignet, da sie kleine Dateien bereitstellen, die sofort neu skaliert werden können, ohne die Bildqualität zu verlieren. Aus rein praktischer Sicht bedeutet die Verwendung von SVG (in Wirklichkeit) die Verwendung von SVG (in Wirklichkeit) nur eine Datei für alle Auflösungen (ohne Fallbacks für ältere Kunden).

SVG -Export -Tool in Photoshop

Während mit Photoshop jede Ebene/Ebene als SVG exportieren, ist es unwahrscheinlich, dass pixelbasierte Bildelemente gute Ergebnisse liefern. Alle pathbasierten Grafiken, einschließlich Logos, Symbole, Masken und anderen Formen, können ein idealer Kandidat für SVG-Exporte sein.

Tipp 5: Vergessen Sie nicht kreative Cloud -Assets

Einer der neuen zusätzlichen Vorteile der Verwendung von PSD ist der neue Online -Service von Adobe. Die Synchronisierung Ihrer PSD -Kreationen mit kreativer Cloud entsperren eine Reihe von praktischen Tipps. Ich habe dies im vorherigen Beitrag ausführlicher behandelt, aber die wichtigsten Punkte sind:

Einfach, um Ihre PSD mit Kunden zu teilen

Ressourcen über den Browser extrahieren.

Ich habe vergessen, JPEG -Arbeiten zur Kundenüberprüfung zu senden. Mit Creative Cloud können sie Ihre PSD -Arbeit in Echtzeit im Browser anzeigen und kommentieren. Das ist richtig - sie brauchen kein Photoshop mehr, um PSDs zu überprüfen.

PSD an externe Auftragnehmer

verteilen

externe Auftragnehmer können die neueste Version der Ressourcen direkt mithilfe des Browsers direkt verwenden und Ressourcen direkt exportieren.

Ermöglichen Sie haben jetzt eine einfache Möglichkeit, die Version des Version mit Ihrem Team zu teilen. Sie können sogar CSS, Bilder und andere Ressourcen aus Ihrem PSD extrahieren, ohne ihren eigenen Photoshop zu installieren. Dieser Service steht jedem mit einem kostenlosen Adobe -Konto zur Verfügung.

Zusammenfassung

Biodiversität ist eine gute Sache! Unser Browser -Ökosystem - Telefone, Tablets, Laptops, Desktops und sogar Fernseher - sind reich und abwechslungsreich und werden in den kommenden Jahren nur vielfältiger sein. Dies macht unsere Arbeit schwieriger und macht mehr Spaß. Responsive Web Design lehrt uns, dass „Seiten“ tatsächlich zu „

Seitenreihen

“ geworden sind - Elternseiten, Mutterseiten und einige Kinderseiten. Aus dem gleichen Grund ist " Bild " auch " Bildreihe " geworden. Photoshop CC 2014 bietet jetzt einen relativ einfachen und schnellen Workflow, um diese "Bildserie" zu generieren. Versuchen Sie es.

FAQ für reaktionsschnelle Bildressourcen in Photoshop und CSS

(Der FAQ-Teil wird hier weggelassen, da der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der FAQ-Teil kann optional beibehalten oder nach Bedarf umgeschrieben werden.)

Das obige ist der detaillierte Inhalt vonGenerieren von Responsive Image Assets mit Photoshop CC 2014. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!