Share
Das vor kurzem veröffentlichte PNGHat-Plugin für Photoshop, erstellt von Source, erstellt einen völlig anderen Workflow für den Export von PSD-Elementen zur Verwendung in Websites, Spielen, Apps oder für andere Arten von Projekten, für die Sie entworfen haben.
Es ist eine robuste Software mit einer Fülle an Funktionen, aber das verlockendste Feature, das sie anbietet, ist ihre Fähigkeit, den Export in drei einfachen Schritten zu beschleunigen:
SCHRITT 1: Druckknopf
SCHRITT 2: Code kopieren und einfügen
SCHRITT 3: Profitieren!
Okay, im Ernst, das sind nur zwei Schritte, aber es ist wirklich so einfach. Das Plugin eliminiert im Wesentlichen den typischen Photoshop-Exportprozess, nämlich das Slicing, das Benennen von Slices, das Überlappen von Slice-Bereichen, die Vorschau, das Auswählen von Optimierungsoptionen, das Auswählen von Exportoptionen, das Speichern und das manuelle Schreiben von Code zum Einbinden der Bilder in Ihr Projekt.
Es kann auch Leerraum um Elemente automatisch zuschneiden und mehrere Auflösungsexporte für die Retina-Unterstützung und reaktionsschnelle Bildtechniken verarbeiten. Bilder können lokal auf Ihrem Computer ausgegeben, sofort in den Cloud-Speicher hochgeladen oder sogar als Base64-Code generiert werden, sodass Sie überhaupt keine Bilddateien benötigen.
Beginnen wir mit einem Blick auf den Kern des Plugins. die Drucktasten-Bildexportfunktion.
Das Exportieren von Bildern mit PNGHat ist wirklich einfach. Angenommen, Sie möchten in dieser Mobile Game-Benutzeroberfläche von Graphic Burger den "Play Button" exportieren..
Zunächst wählen Sie die Ebene (n) oder die Gruppe für den "Play Button" aus:
Dann klicken Sie auf das PNGHat Ausgewählte Ebenen exportieren Taste:
Hey, du bekommst ein perfekt optimiertes PNG:
Das ist es! In diesem Beispiel haben wir zwei Mausklicks behandelt und etwa zwei Sekunden gewartet.
Wenn Sie Ihre Bilder lokal exportieren, können Sie festlegen, wohin sie gehen sollen, indem Sie auf klicken … Klicken Sie auf die Schaltfläche rechts neben dem zweiten Abschnitt des PNGHat-Bedienfelds und navigieren Sie zu dem Ordner Ihrer Wahl.
Es gibt verschiedene andere Optionen, die Sie einstellen und anpassen können, die wir weiter unten behandeln werden, aber in aller Kürze ist dies der gesamte Prozess. auswählen, Taste drücken, fertig.
Während PNGHat Ihr Bild ausgibt, bereitet es auch Code zum Kopieren und Einfügen vor, damit Sie dieses Bild problemlos in Ihr Projekt integrieren können. Sie erhalten HTML-, CSS-, Canvas-, Android- und iOS-Code, zum Beispiel:
Hintergrundbild: URL (images_14 / how-to-export-photoshop-asset-for-the-web-with-pnghat_4.png); Breite: 108px; Höhe: 109px;
var img = neues Bild (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'images_14 / how-to-export-photoshop-asset-for-the-web-with-pnghat_4.png';
[UIImage imageNamed: @ "Play-btn.png"]
Von hier aus klicken Sie einfach auf die Schaltfläche "Kopieren" im PNGHat-Fenster, und Sie können direkt in Ihre relevante Projektdatei einfügen:
Anstatt Ihre Bilder nach dem Export per FTP zu übertragen, haben Sie die Möglichkeit, Ihre Bilder sofort in den Cloud-Speicher hochzuladen, den sie bereitstellen. Im Moment ist das Plugin mit 1 GB kostenlosem Cloud-Speicher ausgestattet. Die Bilder werden über CDN bereitgestellt, sodass Benutzer vom nächstgelegenen Standort aus bedient werden können.
Der Export von Bildern für das enthaltene Hosting unterscheidet sich absolut nicht vom lokalen Export. Um den automatischen Upload zu aktivieren, wählen Sie die Option "Cloud" aus dem ersten Abschnitt des PNGHat-Fensters:
Von dort verwenden Sie den gleichen "Auswahl" - und "Tastendruck" -Ansatz wie oben beschrieben. Der einzige Unterschied besteht darin, dass Sie nach dem Hochladen des Bildes in Ihr Konto den Code zum Kopieren und Einfügen mit der in der Cloud gehosteten URL erhalten. Beispiel:
Die dritte Exportoption, die PNGHat bietet, ist Base64, die Ihr Bild als reinen Code ausgibt, der in HTML, CSS oder Canvas Ihres Projekts eingebunden werden kann. Ohne eine separate Image-Datei kann das Element ohne das Extra geladen werden http anfordern und kann somit die Ladezeit Ihres Projekts beschleunigen. Wie beim Wechseln zwischen lokalem und Cloud-Export können Sie oben im PNGHat-Fenster Base64 auswählen:
Base64-Code kann beispielsweise mit HTML, CSS und Canvas verwendet werden (abgekürzter Code):
Hintergrundbild: URL (Daten: image / png; base64, iVBO… FTkSuQmCC); Breite: 108px; Höhe: 109px;
var img = neues Bild (); img.onload = function () ctx.drawImage (img, 0, 0, 108, 109); ; img.src = 'data: image / png; base64, iVBO… FTkSuQmCC';
Nach meiner Erfahrung eignet sich Base64 besonders für kleine sich wiederholende Hintergrundbilder und Grafiken mit einer begrenzten Anzahl von Farben. Ich habe auch herausgefunden, dass Base64 am effizientesten mit CSS-Präprozessoren verwendet werden kann. Der Code, aus dem ein Bild besteht, kann als Variable gespeichert und dann mehrfach verwendet und später bei Bedarf aktualisiert werden.
Was PNGHat besonders beeindruckt, ist die Leichtigkeit, mit der Sie ein gut aussehendes transparentes PNG8 exportieren können, um die Dateigrößen niedrig zu halten. Ich habe einige Tests mit einem DVD-Mockup von Graphic Burger mit einem Bild ausgeführt, das mit 758px * 758px ohne Einstellungsoptimierung exportiert wurde, und entdeckte zwei Dinge.
Erstens war der Unterschied in der PNG24-Dateigröße zwischen dem Photoshop-Standardexport und PNGHat ein vernachlässigbarer Wert von 6 KB. Da die Dateigröße im Wesentlichen gleichwertig ist, würde ich den PNGHat-Export für diesen Dateityp mit größerer Wahrscheinlichkeit verwenden, da er viel schneller und einfacher ist.
Das zweite und überzeugendere Ergebnis war, dass PNG in der Standardeinstellung die Transparenz von PNG8-Dateien sehr gut handhabt. Mit den Standardexporteinstellungen gab Photoshop eine Datei aus, die nur 186 KB groß war, aber sie enthielt die weiße Streifenbildung, die Sie im Bild unten sehen. Im Allgemeinen wird Transparenz verwendet, sodass ein Bild über jedem Hintergrund gut angezeigt werden kann, sodass das Exportieren dieses Exportformats normalerweise nicht verwendet werden kann.
PNGHat hingegen erzeugte eine PNG8-Datei, die sich optisch nicht von den PNG24-Dateien unterscheiden ließ, jedoch mit 268 KB im Vergleich zu 642 KB / 648 KB weniger als halb so groß war. Von wo aus ich sitze, ist dies eine sehr attraktive Wahl für den optimierten transparenten PNG-Export.
PNGHat kann den Abstand um das zu exportierende Bild automatisch kürzen, sodass Sie nicht beschneiden müssen, ob das Zuschneiden oder das Schneiden der Segmente perfekt an den Kanten des Elements ausgerichtet ist. Die Schaltfläche "Wiedergabe" aus dem ersten Beispiel in diesem Artikel wurde mit dieser Zuschneidefunktion exportiert, sodass sie ohne zusätzliche Schritte korrekt zugeschnitten werden kann.
Um die Option "Zuschneiden" zu aktivieren, aktivieren Sie dieses Kontrollkästchen im PNGHat-Fenster:
Neben dem automatischen Zuschneiden um ein Bild können Sie auch die Region auswählen, die Sie exportieren möchten. Dies ist nur eine Frage der Erstellung einer Auswahlauswahl, bevor Sie auf die Export-Schaltfläche klicken. Erstellen Sie zum Beispiel diese Auswahl vor dem Export:
Würde Ihnen dieses resultierende Bild geben:
Wenn Sie mit vektorbasierten Bildern arbeiten, haben Sie die Möglichkeit, Ihr Bild für verschiedene Exporte automatisch zu vergrößern oder zu verkleinern. So können Sie die Retina-Unterstützung handhaben und möglicherweise mehrere Bildgrößen für die Reaktionsfähigkeit erstellen.
Um die Skalierung zu verwenden, legen Sie den Prozentsatz, um den Sie erhöhen oder verringern möchten, im Feld "Skalieren" des Fensters PNGHat fest:
Der Rest des Prozesses bleibt wieder derselbe, d. H. Schicht / Gruppe auswählen, Druckknopf. Mit unserem "Play-Button" ergibt sich eine Skalierung um 200%:
Der einfachste Weg, um zu steuern, wie Ihre exportierten Dateien benannt werden, ist über Ihre Schicht oder Gruppe Namen. Wenn Sie eine einzelne Gruppe oder Ebene ausgewählt haben, wird Ihre Bilddatei entsprechend benannt, wobei Leerzeichen durch Bindestriche ersetzt werden. Wenn Sie mehrere Gruppen und / oder Ebenen ausgewählt haben, wird Ihre Datei so benannt, dass sie dem obersten Punkt in Ihrem Stapel entspricht.
Alternativ können Sie auch PNGHats prüfen Name der Eingabeaufforderung Option in den Einstellungen des Fensters und wählen Sie explizit Ihre Dateinamen bei jedem Export.
Um zum Einstellungsbereich zu gelangen, klicken Sie auf das kleine Zahnradsymbol unten im Fenster:
Dadurch wechselt die Anzeige des Fensters auf Folgendes:
Um wieder zurückzuschalten, klicken Sie ein zweites Mal auf das Zahnradsymbol.
PNGHat bietet Ihnen zwei Dateiformate zur Auswahl: PNG und JPEG.
Wenn Sie PNGHat zum ersten Mal installieren und ausführen, wird standardmäßig die Option PNG ausgewählt. Um jedoch zu JPEG zu wechseln, schalten Sie einfach den Selektor im PNGHat-Fenster um:
Sie können die Qualitätseinstellungen Ihrer exportierten Bilder auch steuern, indem Sie in das Einstellungsfeld (oben beschrieben) gehen und:
PNGHat bietet Ihnen die fünf oben beschriebenen Kopier- und Einfüge-Code-Vorlagen. Sie können diese jedoch auch bearbeiten und eigene erstellen.
Ein häufiger Fall, in dem Sie diese Vorlagen bearbeiten möchten, ist der Pfad, unter dem Ihre Bilder gespeichert werden. In diesem Fall können Sie das ändern PFAD Feld von seiner Standardeinstellung / statisch / images / DATEI, zu so etwas Bilder / DATEI, wie ich es zum ersten Mal gemacht habe. Sie können auch jeden Aspekt der Hauptvorlage ändern, z. B. das Hinzufügen Grenze = 0 zum HTML
Außerdem können Sie neue Vorlagen erstellen, wenn der benötigte Codetyp nicht standardmäßig vorhanden ist. Klicken Sie dazu auf + Geben Sie Ihrer neuen Vorlage einen Namen und fügen Sie Ihren Code unter Verwendung der Variablen hinzu BREITE, HÖHE und PFAD wie Sie es wünschen.
Selbst während des Schreibens dieses Artikels spürte ich persönlich den Unterschied mit PNGHat und nicht mit dem Standard-Export von Photoshop. Alle Bilder, die Sie oben sehen, wurden von PNGHat generiert, und ich habe festgestellt, dass es mir eine Menge Zeit spart. Neben der Zeitersparnis fand ich auch das Minimum Druckknopf Sie arbeiten viel reibungsloser und je weniger Schritte ich unternehmen muss, um meine Arbeit zu erledigen, desto glücklicher bin ich!
Es ist möglich, dass ich gelegentlich immer noch den nativen Photoshop-Export verwende, wenn eine Reihe von Umständen es wirklich erfordert, aber in den meisten Fällen wird PNG meine Export-Export-Methode von hier an sein.
.
Accentsconagua
