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!

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:

• 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

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!