Photoshop Plugin: Cut&Slice Me
Heute möchte ich euch ein sehr schönes und kostenloses Photoshop Plugin vorstellen, das vor allem Webdesignern ungemein Arbeit abnimmt.
Offizielle Website:
Für dieses Tutorial stelle ich euch eine Beispiel-Datei zur Verfügung, damit ihr mitüben könnt bzw. leichter die Handhabung versteht.
------------------
Installation:
Ruft die Website auf und ladet euch das Plugin herunter.
Nun habt ihr .zxp Datei. Öffnet diese z.B. mit WinRar um den Inhalt sehen zu können.
Den Inhalt kopiert ihr hier hin:
C:\Program Files\Adobe\Adobe Photoshop CC (64 Bit)\Plug-ins\Panels\CutAndSliceMe\
(Je nachdem, wo euer Photoshop installiert ist)
------------------
Funktionen und Möglichkeiten:
Allgemein:
Mit diesem Plugin könnt ihr einzelne Ebenen bis zu mehreren Gruppen einfach exportieren. Hierbei ist neben dem normalen Desktop-Profil auch jeweils ein Profil für Android und iPhone (+Retina) vorhanden.
Funktionsweise:
Für dieses Plugin solltet ihr möglichst alles geordnet in Gruppen erstellen, da das Plugin nur funktioniert, wenn ihr Gruppen oder Ebenen speziell benennt.
Bennenungsmöglichkeiten:
- @
Wenn ihr ein @ am Ende einer Ebene oder Gruppe anfügt, so erfasst das Plugin dieses und exportiert es
- #
Wenn ihr innerhalb einer Gruppe, die ein @ im Namen hat, eine Ebene mit # benennt, so dient diese Ebene als Größe. Diese Maße bzw. Größe wird später das exportierte Bild haben.
- _BTN
Wenn ihr dieses Suffix an eine Gruppe anfügt, so erkennt das Plugin, dass es sich um einen Button handelt.
Innerhalb dieser Gruppe könnt ihr weitere Ebenen mit folgenden Namen erstellen:
- normal
- hover
- pressed
- selected
- disabled
------------------
Erklärung anhand der Beispiel-Datei:
So sieht die PSD aus. Passend dazu habe ich alle Ebenen und Elemente geordnet. Somit ist sichergestellt, dass alles optimal funktioniert.
Da wir den Text exportieren wollen, hat dieser ein @ im Namen.
Als weiteres Element haben wir den Abstand (ganz rechts im Bild).
Über die Rote Ebene mit dem Namen # (Füllfläche: 0%) lege ich die Größe fest (hier möchte ich unten noch ein wenig Freiraum haben).
Als letztes noch den Button. Die Buttons müssen nicht nebeneinander sein, sie können auch übereinander oder ausgeblendet sein.
Nun schauen wir uns mal die Plugin-Oberfläche an.
Ich habe es mir rechts angedockt:
Ganz rechts ist Desktop ausgewählt, in der Mitte ist Android und ganz links das iPhone.
Wenn wir nun z.B. auf Cut All Assets drücken, erstellt das Plugin die Bilder in einem extra Ordner im Verzeichnis, in dem die PSD liegt.
Meine PSD war z.B. auf dem Desktop, also siehts dann so aus:
Der Inhalt sieht dann beim Desktop so aus:
Beim iPhone sieht es etwas anders aus. Grund:
@2x bedeutet 2x so groß. Diese Bilder kann man für ein Workaround in CSS verwenden um seine Grafiken für Retina bereitzustellen.
Wie man beim Export sieht, übernimmt das Plugin die Namen, die vor dem @ bzw. _BTN stehen. Deshalb immer sinnvoll benennen!
------------------
Ich hoffe, dass ich euch Cut&Slice Me etwas näher bringen konnte und ihr ab sofort einen effektiveren und schnelleren Workflow habt.
Gruß
LeKoArts
P.S.:
Schaut doch mal auf meiner Homepage vorbei
