Was ist das Extrahieren von Assets?
Das neue Assets extrahieren Mit dem Feature von Photoshop CC 2014 wird der ansonsten mühsame Workflow der Image-Erstellung für Responsive Web Design (RWD) nachgebrannt. Lassen Sie uns einen Blick darauf werfen, wie der Befehl zum Extrahieren von Assets einen Webseiten-Component innerhalb weniger Minuten auf Assemblies bereitstellt.
Beginnen wir mit einer naheliegenden Frage: Was ist ein Extraktgut?
Vereinfacht gesagt ist Extrahieren von Assets eine neue Funktion in Photoshop, die die Photoshop-Generator-Funktion mit einer Schnittstelle zur Automatisierung der Erstellung von Imaging-Assets für das Web- und Bildschirmdesign aus Photoshop-Dateien unterstützt. Mit dem Befehl Assets extrahieren können Sie festlegen, für welche Layer bzw. welche Layer Sie Assets erstellen möchten, deren physische Größe, Dateiformat und Speicherort auf der Festplatte. Diese Funktion ist nicht für Text gedacht, es sei denn, der Text soll in eine Bitmap umgewandelt werden, was wirklich keine gute Idee ist.
Lass uns anfangen.
02 von 08Öffnen Sie eine Photoshop-PSD-Datei
Das von mir verwendete Beispiel enthält ein Smart-Objekt von Illustrator, etwas Text, eine Heldeneinheit mit Text, ein Bild und eine Schaltfläche sowie eine Reihe von Außenbildern, die das Thema der Website unterstreichen. Der Schlüssel hier ist das Organisieren der Schichten in Gruppen. Dies ist notwendig, da die Aufgabe darin besteht, alle diese Elemente aus dem Comp zu ziehen, damit sie schnell zu Weblayouts hinzugefügt werden können, die sich an unterschiedliche Bildschirmauflösungen und -größen anpassen.
Zwei Möglichkeiten, Vermögenswerte zu extrahieren
Im Gegensatz zu Generate, das Objekte durch Hinzufügen einer grafischen Erweiterung zum Ebenennamen extrahiert, Assets extrahieren verwendet eine Schnittstelle, die über erreichbar ist Rechtsklick eine Ebene oder eine Ebene auswählen und auswählenDatei> Assets extrahieren.
04 von 08Die Oberfläche zum Extrahieren von Assets
Das Dialogfeld "Elemente extrahieren" ist eher intuitiv. Es wird die zu extrahierende Ebene oder Auswahl angezeigt. Daraufhin wird die Dateigröße angezeigt, und darunter befindet sich eine Steuerung, mit der Sie das Objekt vergrößern und verkleinern können. Auf der rechten Seite des Dialogfelds passiert die Magie. Mit den vier Schaltflächen oben können Sie die Auflösung / Größe des Objekts auswählen. Im nächsten Streifen sehen Sie die ausgewählte Ebene und klicken auf + Mit sign können Sie die ausgewählte Ebene auch in einem anderen Format ausgeben. Das Müll Ca n entfernt die Ebene aus der Warteschlange. Im nächsten Stripdown können Sie den Dateityp auswählen und die Breite und Höhe des Ausgabebildes anpassen.
05 von 08Ein SVG-Bild extrahieren
Photoshop verarbeitet svg-Bilder nicht besonders gut und Browser und Geräte können kein Illustrator-Bild anzeigen. Dies hat zur Folge, dass SVG-Dateien für Vektorgrafiken wie das hier gezeigte Illustrator-Logo verwendet werden. Da die Auflösung der Vektoren geräteunabhängig ist, können sie ohne Verlust von Details oder Bildern skaliert werden. Um das Illustrator Smart Object in SVG zu konvertieren, wählen Sie svg aus dem Pop-Down und klicken Sie auf Extrakt.
06 von 08Der Prozess zum Extrahieren von Assets
Ein paar Dinge werden passieren, wenn Sie auf die Schaltfläche Extrahieren klicken. Sie werden zuerst gewarnt, dass sich der Dateiname ändern kann. Das ist kein großes Problem. Dann wird Ihnen mitgeteilt, dass ein neuer Ordner erstellt wird, in dem sich das Asset befindet. Wenn der Vorgang abgeschlossen ist, wird der Ordner, der sich am selben Ort wie die ursprüngliche .psd-Datei befindet, geöffnet und zeigt das neue Asset an.
07 von 08Die Schaltfläche Einstellungen ist Ihr neuer bester Freund
Klicken Sie auf die die Einstellungen Taste öffnet ein Dialogfeld "Einstellungen" das ist ernsthaft nützlich. Die Einstellungen auf der linken Seite sind die Skalierungsfaktoren. Sie erstellen die verschiedenen Kopien des Images, das ein Entwickler in den Medienabfragen verwendet, um die Bildschirmauflösung eines bestimmten Geräts zu bestimmen. Zum Beispiel würde die 3x-Version auf ein iPhone oder ein iPad-Retina-Display abzielen, während ein 1,25-Faktor auf ein Android-Gerät gerichtet wäre. Das Suffix wird am Ende des Dateinamens hinzugefügt, damit Ihr Entwickler das in einer Medienabfrage zu verwendende Bild leicht identifizieren kann. Wenn Sie fertig sind, klicken Sie auf die Schaltfläche OK Die Schaltfläche und Ihre Auswahl werden im Dialogfeld "Elemente extrahieren" angezeigt. Sie können auf die Einstellung auch zugreifen, indem Sie auf der rechten Seite der Benutzeroberfläche auf das Zahnradsymbol klicken
08 von 08Beenden
Wenn Sie auf die Schaltfläche Extrahieren klicken, werden alle Assets erstellt und dem Ordner hinzugefügt. An diesem Punkt müssen Sie Ihrem Entwickler nur eine Kopie des Ordners senden und mit Ihrem nächsten Projekt fortfahren.
