PaintCode 2

PaintCode ist ein durchaus bekanntes Design Tool für die App Entwicklung. Es generiert aus gezeichneten Formen, Linien und Text Code zum einbinden in iOS oder Mac Apps. Nun gehen die Entwickler in die 2. Runde und haben einige Neuheiten für das neue PaintCode 2 an Bord.

Review Test

Auffällig ist das neue Interface von PaintCode 2. Dies ist jetzt noch dunkler gehalten und aufgeräumter. Das Fenster ist wie bei Xcode in 4 Bereiche Unterteilt. Zudem hat sich der Dokument Aufbau ziemlich geändert. Es ist jetzt zum einen möglich mehrere Zeichenflächen zu erstellen und zum anderen mehrere Tabs in einem Dokument einzurichten. In den Tabs kann man so dann seine Zeichenflächen verteilen. Interessant dabei ist, dass der Inspector jeweils nur die Elemente der Ausgewählten Zeichenfläche anzeigt und nicht alle aus dem Tab.

PaintCode bringt aber nicht nur eine umstrukturierte Benutzeroberfläche mit sich. Es hat auch ein paar sehr wichtige neue Funktionen!
So haben die Entwickler einen neuen Weg gefunden den Code optimal in das eigene Xcode Projekt einzubinden. Zwar besteht weiterhin die Möglichkeit über die untere Fensterleiste den sofort generierten Code einfach per Copy & Paste in Xcode einzubinden. Diese Variante ist jedoch weniger Entwicklerfreundlich. Der neu vorgestellte Weg geht über das sogenannte StyleKit.

Review Test

StyleKit

Jedes Dokument besitzt einen eigenen StyleKit Tab über den sich, man wird es kaum glauben, das StyleKit einrichten lässt.😉
Das StyleKit ist eine eigene Klasse, die von PaintCode generiert wird. Sie enthält standardmäßig alle gezeichneten Objekte bzw. Zeichenflächen. Wer möchte kann aber auch einzelne Zeichenflächen aus dem StyleKit ausschließen. Zusätzlich zu den Zeichenflächen kann man auch einzelne Farben, Verläufe, Schatten und Bilder verlinken. Für diese jeweils hinzugefügten Eigenschaften wird in dem generierten Code eine einzelne Referenz erstellt. So kann man z.B. die verwendete Schriftfarbe auch an anderer Stelle im Code verwenden. Ebenfalls erstellt das StyleKit für jede Zeichenfläche eine „drawing Methode“. Auf Wunsch kann man jede einzelne Zeichenfläche auch so konfigurieren, dass das StyleKit auch eine „image Methode“ beinhaltet.

Review Test
PaintCodeDrückt man nun auf exportieren erstellt PaintCode in dem gewünschten Verzeichnis eine .h und .m Datei. Diese kann man in das Xcode Projekt einbinden und direkt verwenden. Werden Änderungen an der PainCode Dokument vorgenommen, braucht man lediglich das StyleKit erneut exportieren und alle Änderungen sind sofort sichtbar.

Dieses neu eingeführte StyleKit wird jedem Entwickler das Leben genial einfacher machen. Man hat sich nicht mehr selber darum zu kümmern, wie der Code auch letztlich in der App angezeigt wird. Jetzt kann man einfach auf die jeweilige Methode (image oder drawing) verweisen und fertig.🙂

Frames

Review TestWo nun die Gerüchte immer mehr für ein größeres iPhone sprechen wird die responsibility bei iOS Apps immer wichtiger werden. Natürlich wird man durch das iPad oder auch so immer wieder Grafiken brauchen, welche in der Größe variabel sind.
Mit den neuen Frames lassen sich nun auch dynamische Formen bzw. Objekte erstellen. Legt man ein solches Frame über die Elemente in seiner Zeichenfläche lassen sich für die Formen in dem Frame verschiedene Einstellungen tätigen. So kann man, wie das aus Xcode bekannt ist, festlegen an welchen Kanten das Element “haftet“ und in welchen Achsen es vergrößerbar ist.
Etwas seltsam ist, dass das Frame nicht etwa als Gruppe agiert (in der Ebenen Übersicht), sondern als einzelne Ebene gezählt wird. Das Frame bzw. die Elemente im Frame erkennen automatisch wenn sie in der Fläche des Frames sind.

Variablen

Eine weitere neue Funktion ist die Verwendung von Variablen. Diese lassen sich in so ziemlich überall verwenden. Die Variablen können Zahlen, Winkel, Punkt, Größe, Boolean oder Text sein. Diese lassen sich dann, wie man es aus dem Interface Builder von Xcode kennt, per Drag ‘n Drop verknüpfen. Über eine „Expression Variable“ kann man sogar Variablen wieder verwenden und in einfachen Rechenoperationen verrechnen. Für die Expressions eigenen sich „Number“, „Fraction“ und „Angle“. Punkt oder Größen Variablen lassen sich nicht in Expressions wieder verwenden.

Variablen

 

PaintCode

dynamische Farben

Eine weitere sehr überarbeitete Stelle sind die Farben. Wie bisher, lassen sich verschiedene Farben Referenzen erstellen, welche auch in Verläufen oder Schatten wiederverwendet werden können. Das neue ist jedoch, dass man nun auswählen kann ob die neue Farbe eine „Base Color“ hat oder nicht. Wählt man eine „Base Color“ aus (welche nur eine aus den eigens erstellten sein darf), kann man mit der neuen „Tochter“-Farbe einzelne Farbwerte ändern. So lässt sich z.B. mit Shadow oder Highlight die Farbe aufhellen bzw. abdunkeln oder mit Opacity die Base Color transparenter machen.
Diese Funktion ist sehr zum Vorteil, wenn man z.B. sein Design auf einer CI Farbe auslegt. Ändert man nun die Basis Farbe passen sich alle anderen „Tochter“-Farben entsprechend ihrer Werte an.

dynamische Farben

dynamische Farben 2

PSD & SVG import

Mit der neuen Version ist der PSD und SVG import bereits aktiviert. Beim Vorgänger musste dies über einen In-App Kauf nachgerüstet werden. Das ist schon mal gut, nicht noch mal dafür extra zu zahlen. Nur leider ist die Verlässlichkeit des PSD imports etwas ungenügend.
Beim importieren verschiedener heruntergeladenen PSD’s mit UI Kit’s erstellte PaintCode 2 jedes mal nur ein Bitmap von dem PSD und fügte dies so ein. Bei eigens erstellten PSD’s (mit Verläufen, Schatten, Konturen, usw.) erstellte zwar PaitCode die Vektor Formen und füllte diese mit den Stilen. Jedoch war das Ergebnis hier nicht 1 zu 1. Einige Schatten fehlten oder Mehrpunkt-Verläufe wurden in 2-Punkt-Verläufe geändert (einfach aus dem Grund weil PaintCode nur 2-Punkt-Verläufe unterstützt).

Sind also die PSD’s nicht zu komplex und nur mit den basis Ebenenstilen erstellt, kann dieser import durchaus gut funktionieren. Man sollte aber damit rechnen, das man noch einige Sachen nacharbeiten bzw. korrigieren muss.

Der SVG support hatte bei unseren Tests soweit einwandfrei funktioniert. PaintCode erstellt die Vektor Formen korrekt und passt diese auch mit den richtigen Stil Attributen an. Hier sollte also mehr verlass als bei den PSD’s sein.😉

Fazit

Alles in allem ist PaintCode 2 ein gelungenes Upgrade. Mit einigen neuen Funktionen und einer aufgeräumten Benutzeroberfläche strahlt PaintCode in neuem Licht. Wer gerne die neuen Funktionen erst mal Testen möchte kann sich auf der Webseite die Testversion laden oder sich die Tutorials anschauen. Diese zeigen prima wie die Neuheiten funktionieren.

Lohnt sich das Upgrade?
Auf jeden fall! Schon alleine das neue StyleKit wäre ein Upgrade wert. ^^ Dies hat unglaublich viel Potenzial und macht es den Entwicklern leichter den je. Und natürlich auch die anderen neuen Funktionen wird man im Nachhinein nicht mehr missen wollen!
Wer also bereits mit der 1. Version viel gearbeitet hat sollte unbedingt umsteigen, denn es lohnt sich!😉

Lohnt sich der Einstieg?
Also die App an sich ist sehr gut gemacht. Schon nach kleiner Einstiegszeit hat man sich sehr an den Workflow gewöhnt, denn dieser ist sehr vertraut mit den bekannten Grafik Tools. Auch das Code Generieren funktioniert super, erst recht mit dem neuen StyleKit. Wir finden, dass sich also auch ein neueinstieg lohnt. Auf der Webseite findet ihr eine Testversion, mit der ihr euch die App auch erst mal genauer anschauen könnt.

Was interessant zu wissen wäre ist, ob sich das von der Performance auch lohnt alle Grafiken Code gerändert zu generieren. Zwar spart man einiges an MB für die Bitmap Grafiken im App Bundle. Leider kann ich aber eben keine Aussage machen ob RAM, Prozessor und co. besser mit Bitmaps klarkommen oder mit Code Generierten Grafiken. Vielleicht weis ja ein Entwickler bescheid, der mit der Materie besser vertraut ist und mag uns über ein Kommentar aufklären?😉

PREIS:
69,99€

ENTWICKLER:
PixelCut

SYSTEMVORAUSSETZUNGEN:
OS X 10.8 oder neuer, 64-Bit-Prozessor

MAC APP STORE LINK

Schreibe einen Kommentar

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s