Share
Adobe Photoshop entwickelt sich ständig weiter. Mit jeder Version werden neue Funktionen hinzugefügt, während vorhandene Funktionen verbessert werden. Es gibt jedoch einen Bereich, der noch ziemlich veraltet ist. Die Art und Weise, wie wir unsere Designs in Photoshop schneiden, hat sich nicht geändert, seit das Web tabellenbasiert war.
Der Beginn der Unabhängigkeit der Auflösung (denke Retina) hat dazu geführt, dass wir uns bei unseren Websites immer weniger auf Bitmaps verlassen. Webfonts, CSS3 und Scalable Vector Graphics sind alles Beispiele moderner Techniken, die uns von der Sorge um Pixel abhalten. Manchmal müssen wir immer noch unsere PSDs aufteilen und die resultierenden Bilder verwenden, aber es ist an der Zeit, dies verantwortungsbewusster zu machen.
Enter Cut & Slice me, ein von Daniel Peruho entwickeltes CS6-Plugin. Cut & Slice me zielt darauf ab, den modernen Schneidprozess zu beschleunigen und bietet viele leistungsstarke Funktionen. Es ist kostenlos, einfach zu bedienen und funktioniert.
Zu den Angeboten, die es anbietet, gehört es, eine Gruppe von Ebenen als ein einzelnes Objekt zu behandeln. Dann werden alle nicht benötigten Pixel abgeschnitten und die Gruppe als Bilddatei exportiert. Wenn Sie beim Entwerfen von Schaltflächen die Ebenen nach dem vom Plugin benötigten Format benannt haben, können die verschiedenen Status der Schaltflächen automatisch in mehrere Ebenen aufgeteilt werden. Lust auf mehr zu lernen? Lass uns eintauchen.
Zunächst müssen Sie Photoshop CS6 ausführen. Sie müssen dann das Plugin auf Ihrem Computer installieren. Besuchen Sie die Cut & Slice me-Homepage und laden Sie die neueste Version des Plugins herunter. Laden Sie auch die Beispieldatei herunter, mit der wir die Funktionsweise des Plugins demonstrieren.
Doppelklicken Sie nach dem Download auf die Datei CutAndSliceMe.zxp, um die Installation des Plugins auszulösen. Wenn der Adobe Extension Manager angezeigt wird, folgen Sie einfach den Anweisungen.
Starten Sie Photoshop und wählen Sie "Fenster"> "Erweiterungen"> "Ausschneiden und in Scheiben schneiden". Sie sollten jetzt das "Cut & Slice Me" -Feld sehen können.
Extrahieren Sie dann die Datei CutAndSliceMe_sample.zip und öffnen Sie die Beispieldatei. Sie sollten Folgendes sehen:
Dies ist ein mobiles Design mit entsprechend benannten Ebenen gemäß den Anforderungen des Plugins. In Kürze werden wir sehen, wie es funktioniert, aber bevor wir das tun, gibt es ein paar Dinge, die Sie beachten sollten:
Stellen Sie sicher, dass die Schaltfläche mit dem iPhone-Symbol ausgewählt ist, und klicken Sie dann auf Schneiden Sie alle Assets. Navigieren Sie nach dem Slicing zum Beispieldateiverzeichnis und öffnen Sie den Ordner "CutAndSlice_sample_iPhone_assets", der automatisch vom Plugin erstellt wird.
Sie sehen jedes Asset in zwei Größen. eine für Retina (tatsächlich die volle Auflösung, die in Ihrer PSD-Datei verwendet wird) und eine andere für die verkleinerte Version des Originals.
Jetzt wiederholen wir unsere Übung, diesmal für Android. Ändern Sie den Plugin-Modus, indem Sie auf die Schaltfläche mit dem Android-Symbol klicken und dann auf klicken Schneiden Sie alle Assets nochmal. Der Ordner "CutAndSlice_sample_Android_assets" wird dieses Mal mit vier Unterordnern erstellt. eine für jede Bestandsgröße. Die ursprünglich von uns entworfene Größe finden Sie im xhdpi Ordner, alle anderen Assets werden verkleinert.
Jetzt haben wir mehr oder weniger gesehen, was das Plugin macht. Es ist an der Zeit herauszufinden, wie es funktioniert.
Der wichtigste Aspekt, der zu berücksichtigen ist, ist das Layer-Organisieren in Bezug auf Benennung und Gruppierung. Organisieren Sie Ihre Elemente in Gruppen, als wären sie Objekte. Dann anhängen @ bis zum Ende aller Gruppennamen, die Sie exportieren möchten, und klicken Sie anschließend auf Schneiden Sie alle Assets. Der Inhalt jeder Gruppe wird als PNG-Datei exportiert, wobei alle transparenten Pixel abgeschnitten werden.
Hinweis: Aus Performancegründen überprüft Cut & Slice nur Gruppennamen. Um exportiert zu werden, müssen Ihre Layer in einer Gruppe sein.
Manchmal möchten Sie möglicherweise nicht alle Assets exportieren. Vielleicht möchten Sie nur die Assets exportieren, die Sie in eine bestimmte Gruppe eingefügt haben. Wenn dies der Fall ist, klicken Sie einfach auf Untergruppen schneiden und Cut & Slice me exportiert alle Ihre @ Ebenen innerhalb der ausgewählten Gruppe.
Wenn Sie nur eine Gruppe oder eine einzelne Ebene schneiden möchten, wählen Sie diese aus und klicken Sie auf Auswahl ausschneiden.
Schließlich haben wir beim Umgang mit Knöpfen oft mehrere Zustände für sie. Um sie richtig zu exportieren, müssen Sie Gruppen hinzufügen, die Ihre verschiedenen Schaltflächenstatus enthalten, und diese wie folgt benennen:
Accentsconagua
normalschwebengeklickt / gedrücktausgewähltdeaktiviertDann legen Sie diese Gruppen mit in eine andere Gruppe _BTN an seinen Namen angehängt. Notiere dass der _BTN Das Suffix kann mit jedem Element verwendet werden, das Status hat.
Beispiele für Schaltflächen mit unterschiedlichen Status. Wie bereits erwähnt, schneidet Cut & Slice mich Bitmaps fest und entfernt alle umgebenden transparenten Pixel, die Sie nicht möchten. Aber was passiert, wenn Sie möchten, dass alle Schaltflächen die gleiche Größe haben? In diesem Fall können Sie eine rechteckige Vektorebene mit dem Namen verwenden #, Ganz oben in Ihrer Gruppe steht der Bereich, den Sie exportieren möchten. Ihre Gruppe wird in der Größe der Vektorform exportiert, ohne die Vektorebene selbst zu exportieren. Dies gilt für alle Gruppen, nicht nur für Knöpfe. Das Plugin verwendet für diese Funktion eine Vektorebene, wenn dies der Fall ist Vektor-Werkzeuge ausrichten und in Pixelgitter umwandeln Diese Option ist aktiviert. Wie bereits erwähnt, wird Ihre Vektorform pixelgenau ohne unscharfe Kanten sein.
Wählen Sie zum Testen dieses Prozesses die darunter liegende Ebene aus login_BTN Gruppe. Dann eingestellt Opazität bis 100% und Füllen bis 40%. Jetzt können Sie die Form über der Schaltfläche sehen. Ändern Sie die Größe nach Ihren Wünschen und exportieren Sie sie. Öffnen Sie nun den Assets-Ordner und überprüfen Sie die Größe der exportierten Schaltfläche. Es sollte die Größe sein, die Sie gerade definiert haben.
Wir haben jetzt ein solides Verständnis dafür, wie wir das Plugin verwenden können. Es ist also an der Zeit, es in der realen Welt zu testen. Hier werde ich Ihnen nicht beibringen, wie Sie eine Website-Vorlage von Grund auf entwerfen. Stattdessen verwende ich eine vorgefertigte Vorlage, um Ihnen zu zeigen, wie Sie Ihre Ebenen richtig benennen und ordnen.
Beginnen wir mit dem Herunterladen dieser kostenlosen Website-Vorlage von CSS Author. Die Vorlage hat eine Webversion und eine Mobilversion. Laden Sie beide herunter und öffnen Sie die Webversion der Vorlage.
Sie stellen möglicherweise bereits fest, dass die Benennung und Struktur der Ebenen weit von dem entfernt ist, was wir brauchen. Wir müssen einige Neuanordnungen und Umbenennungen vornehmen, um die Anforderungen des Plugins zu erfüllen. Im folgenden Screenshot sehen Sie einen Vergleich der Ebenenstruktur vor und nach unseren Bearbeitungen. Ändern Sie Ihre Ebenen (in Rot) so, dass sie mit denen auf der rechten Seite (Grün) übereinstimmen..
Schichtenvergleich vor (rot) und nach (grün) Bei dieser Gelegenheit möchten wir für das Internet exportieren. Ändern Sie den Modus, indem Sie auf die Schaltfläche mit dem Monitorsymbol klicken und dann auf klicken Schneiden Sie alle Assets. Der folgende Screenshot zeigt, was Sie sehen sollten. Wenn sich Ihre Ansicht unterscheidet, überprüfen Sie Ihre Ebenen auf eventuelle Fehler und versuchen Sie es erneut.
Herzliche Glückwünsche! Sie haben gerade Ihr erstes Design erfolgreich geschnitten. Öffnen Sie für die weitere Übung die mobile Version der Vorlage.
Wenn Sie die Datei bearbeiten, exportieren Sie in diesem Fall für iPhone und Android, und überprüfen Sie, ob alles korrekt ist. Wenn ja, können Sie dies auf die nächste Stufe bringen und Ihr eigenes Design schneiden.
Sie haben wahrscheinlich bemerkt, dass wir beim Exportieren unserer Assets viele PNG-Dateien erhalten haben. Wenn Sie mehr einzelne Bilddateien von einem Webserver abrufen, bedeutet dies bekanntermaßen mehr HTTP-Anforderungen, die das Rendern Ihrer Webseiten verlangsamen. Um das Problem zu lösen, können Sie alle PNGs (oder einige davon) in eine einzige Image-Sprite-Datei umwandeln.
Glücklicherweise ist dies heutzutage eine leichte Aufgabe, und es gibt viele Wege, um an sie heranzugehen. Es gibt viele Online-Tools, die den Prozess unterstützen können. Schauen Sie sich die folgenden Sprite-Generatoren an:
… Sehen Sie, welche Ihren Bedürfnissen am besten entspricht.
So weit so gut, aber es gibt noch eine Sache, die wir hervorheben müssen. Mit Technologien wie CSS3 und SVG verlassen wir uns nicht mehr nur auf Bilder. Wir können jetzt leicht SVG-Symbole oder CSS3-basierte Schaltflächen in unseren Designs verwenden. Der Hauptvorteil der Verwendung von SVG- und CSS3-Grafiken besteht darin, dass sie unabhängig von der Auflösung sind und sehr gut in einem responsiven Design funktionieren. Sie können sie auch direkt in Ihrem Code ändern und anpassen, ohne dass Sie den Bildeditor verwenden müssen. Aber warte! Dies bedeutet nicht, dass Bilder völlig ungeeignet sind. Sie können weiterhin für Fotos, komplexe Grafiken und Grafikelemente usw. verwendet werden. CSS3 und SVG sind großartig, aber die Browserunterstützung ist noch nicht vollständig zuverlässig. Daher müssen Sie bei ihrer Verwendung aufpassen.
Die Fähigkeit, unsere Konstruktionsaufgaben zu automatisieren, ist in der sich schnell verändernden Web-Welt von heute äußerst wichtig. Zum Glück ermöglichen uns Tools wie Cut & Slice eine solche Automatisierung und sparen enorm viel Zeit. Wie Sie sehen, können wir mit etwas Disziplin bei der Benennung und Organisation unserer Ebenen auch komplexe Konstruktionen schnell und einfach schneiden. Mit wenigen Klicks haben wir alle Assets, die wir benötigen, richtig geschnitten und können verwendet werden.
