Procreate: Gestenbasierte Kreativwerkzeuge
„Wir wollen die leistungsstärksten Kreativwerkzeuge unsichtbar machen, damit sich Künstler auf das Erschaffen von Kunst konzentrieren können.” — James Cuda, Gründer von Savage Interactive
Procreate ist eine der seltenen Apps, die eine Hardware-Einschränkung in einen Designvorteil verwandelt hat. Als Savage Interactive 2011 startete, wurde das iPad als reines Konsumgerät abgetan. Procreate bewies, dass ein Touchscreen eine professionelle kreative Leinwand sein kann — nicht durch die Übertragung von Desktop-Paradigmen auf mobile Geräte, sondern durch die Erfindung eines völlig neuen Interaktionsmodells, das auf Gesten, Druckempfindlichkeit und den natürlichen Bewegungen einer Hand mit Stylus aufbaut.
Das Ergebnis ist eine App, die professionelle Illustratoren, Concept Artists und Animatoren täglich nutzen. Procreate wurde über 30 Millionen Mal heruntergeladen, hat mehrere Apple Design Awards gewonnen und all das ohne Abo-Modell erreicht. Die Designphilosophie ist kompromisslos: Jede Interaktion muss sich so anfühlen, als wäre das Werkzeug verschwunden und der Künstler würde direkt auf der Leinwand arbeiten.
Warum Procreate wichtig ist
Savage Interactive, ein kleines australisches Studio, entwickelte Procreate als Herzensprojekt und machte es zur dominierenden Kreativ-App auf dem iPad.
Wichtige Meilensteine: - Apple Design Award Gewinner (mehrere Jahre) - iPad App des Jahres - Über 200 handgefertigte Pinsel mit vollständiger Anpassbarkeit - Über 30 Millionen verkaufte Exemplare ohne jegliche Abo-Einnahmen - Animation Assist brachte Bild-für-Bild-Animation auf das iPad - Branchenstandard für Concept Art, Illustration und Storyboarding - Läuft mit 120fps auf ProMotion-Displays bei unter 7ms Latenz
Zentrale Erkenntnisse
- Gesten müssen entdeckbar UND unsichtbar sein — Zwei-Finger-Tippen zum Rückgängigmachen ist intuitiv, sobald man es gelernt hat, unterbricht aber nie den kreativen Fluss
- Latenz ist eine Designentscheidung — Unter 7ms Stift-zu-Pixel-Latenz lässt Digitales analog wirken; alles Langsamere zerstört die Illusion
- Touch-Ziele bei Kreativwerkzeugen brauchen andere Regeln — Die Trefferbereiche einer Mal-App müssen Handballenerkennung, Stiftwinkel und die Physik einer auf Glas ruhenden Hand berücksichtigen
- Ebenenverwaltung für Touch ist ein gelöstes Problem — Procreates wischbasierte Ebenensteuerung beweist, dass komplexe Operationen keine komplexe Oberfläche erfordern
- Einmalkauf schafft Loyalität — Die Ablehnung von Abonnements war eine Designentscheidung, nicht nur eine geschäftliche; sie kommuniziert Respekt vor der Beziehung des Künstlers zu seinen Werkzeugen
Grundlegende Designprinzipien
1. Die unsichtbare Benutzeroberfläche
Procreates wichtigste Designleistung ist das, was man nicht sieht. Im Malmodus nimmt die Leinwand den gesamten Bildschirm ein. Die Werkzeugleiste ist ein schmaler Streifen, der ausgeblendet werden kann. Der Pinselcursor ist das einzige permanente UI-Element. Alles andere wird über Gesten aufgerufen.
LEINWAND-MODUS (Standardzustand)
┌─────────────────────────────────────────┐
│ [Galerie] [+] [⚙] [🔧] [Ebenen] [Farbe]│
│ │
│ │
│ │
│ │
│ Reine Leinwandfläche │
│ Kein Chrome, keine Panels │
│ Nur deine Kunst │
│ │
│ │
│ │
│ ← Pinsel- ● │
│ größe Deckkraft │
│ │
└─────────────────────────────────────────┘
VERGLEICH: Traditionelle Desktop-Mal-App
┌─────────────────────────────────────────┐
│ [Menüleiste] │
│ [Werkzeugl.] [Werkzeugl.] [Werkzeugl.] │
│ ┌────┐┌─────────────────────┐┌────────┐│
│ │Werk││ ││Ebenen- ││
│ │zeug││ Leinwand ││Panel ││
│ │Pane││ (60% des Screens) ││ ││
│ │ ││ ││ ││
│ │ │├─────────────────────┤│ ││
│ │ ││ Pinseleinstellungen ││ ││
│ └────┘└─────────────────────┘└────────┘│
│ [Statusleiste] │
└─────────────────────────────────────────┘
Der Unterschied ist frappierend. Procreate gibt 95% der Bildschirmfläche an die Leinwand. Desktop-Apps opfern oft 40% für Werkzeugleisten, Panels und Menüs. Das ist möglich, weil Gesten die Buttons ersetzen.
2. Gesten-Grammatik
Procreates Gestensystem folgt einer konsistenten Grammatik, die — einmal verinnerlicht — jede Operation sofort verfügbar macht.
GESTEN-REFERENZ
──────────────────────────────────────────
RÜCKGÄNGIG / WIEDERHOLEN
Zwei-Finger-Tippen → Rückgängig
Drei-Finger-Tippen → Wiederholen
Zwei-Finger-Halten → Schnelles Rückgängig (durch Verlauf scrollen)
LEINWAND-MANIPULATION
Zwei-Finger-Pinch → Hinein-/Herauszoomen
Zwei-Finger-Drehen → Leinwand drehen
Zwei-Finger-Ziehen → Leinwand verschieben
Schnelles Zusammenziehen → Leinwand an Bildschirm anpassen
AUSWAHL & WERKZEUGE
Drei-Finger-Wischen ↓ → Ausschneiden/Kopieren/Einfügen-Menü
Berühren und Halten → Pipette (Farbe aufnehmen)
Zeichnen und Halten → QuickShape (Linie wird gerade)
EBENEN
Auf Ebene nach rechts wischen → Mehrere Ebenen auswählen
Auf Ebene nach links wischen → Sperren / Löschen / Duplizieren
Zwei Ebenen zusammenziehen → Ebenen zusammenführen
Lange drücken + ziehen → Ebene neu anordnen
FARBE
Farbfeld berühren und halten → Farbe löschen
Vom Farbkreis ziehen → Farbfüllung
Die Grammatik hat Regeln: zwei Finger für Leinwand-Operationen, drei Finger für Zwischenablage-Operationen, Berühren-und-Halten für Aufnehmen/Einrasten. Diese Konsistenz bedeutet, dass Künstler das System lernen, nicht einzelne Shortcuts.
3. Handballenerkennung als unsichtbare Ingenieursleistung
Auf einer Leinwand, auf der man die Hand beim Zeichnen ablegt, muss das System zwischen Handballen, Fingertippen, Fingergeste und Apple Pencil-Strich unterscheiden. Procreates Handballenerkennung ist so zuverlässig, dass Künstler vergessen, dass sie existiert — und genau das ist der Punkt.
EINGABE-UNTERSCHEIDUNGS-HIERARCHIE
──────────────────────────────────────────
Priorität 1: Apple Pencil
→ Wird immer als Zeicheneingabe behandelt
→ Druck, Neigung und Azimut werden erfasst
→ Unter 7ms Latenz bis zum Pixel
Priorität 2: Fingergesten (erkannte Muster)
→ Zwei-Finger-Pinch/Drehen/Verschieben
→ Zwei-Finger-Tippen (Rückgängig)
→ Drei-Finger-Tippen (Wiederholen)
→ Innerhalb von 50ms erkannt
Priorität 3: Einzelner Fingertouch
→ Wird als Wischen/Malen behandelt WENN „Fingermalen" aktiviert
→ Ansonsten als Leinwand-Interaktion behandelt
→ Wird nie mit ruhendem Handballen verwechselt
Abgelehnt: Handballen-Kontakt
→ Große Kontaktfläche + niedriger Druck + Handkante
→ Innerhalb des ersten Touch-Frames abgelehnt
→ Keine Markierung, keine Geste ausgelöst
Die Technik dahinter ist komplex, aber das Design-Ergebnis ist einfach: Lege deine Hand auf den Bildschirm und zeichne. Das Werkzeug verschwindet.
Design-Muster zum Nachahmen
Druckkurven und Pinsel-Anpassung
Procreates Pinsel-Engine basiert auf Druckkurven, die Apple Pencil-Eingaben auf Pinselverhalten abbilden. Der Kurven-Editor selbst ist eine Designlektion darin, wie man komplexe Parameter greifbar macht.
DRUCKKURVEN-EDITOR
──────────────────────────────────────────
Ausgabe (Pinseleffekt)
100% │ ╱
│ ╱
│ • ← Kontrollpunkte ziehen
│ ╱
50% │ ╱
│ •
│╱
0% └──────────────────
0% 50% 100%
Eingabe (Stiftdruck)
LINEARE KURVE (Standard):
Leichter Druck → dünne Linie
Starker Druck → dicke Linie
Proportionale Reaktion
S-KURVE (für Lettering):
Leichter Druck → sehr dünn (Haarlinie)
Mittel → springt auf mittlere Stärke
Starker Druck → Plateau bei Maximum
Mehr Kontrolle im mittleren Bereich
SCHWERE KURVE (für Skizzen):
Leichter Druck → bereits mittlere Stärke
Minimale Variation bei Druck
Gleichmäßige Linienstärke
/* Web-Äquivalent: SVG-basierter Druckkurven-Editor */
.pressure-curve-editor {
position: relative;
width: 200px;
height: 200px;
background: #1a1a2e;
border: 1px solid #333;
border-radius: 8px;
overflow: hidden;
}
.pressure-curve-editor .grid-line {
stroke: #ffffff10;
stroke-width: 1;
}
.pressure-curve-editor .curve-path {
fill: none;
stroke: #5ce1e6;
stroke-width: 2;
stroke-linecap: round;
}
.pressure-curve-editor .control-point {
width: 12px;
height: 12px;
background: #fff;
border-radius: 50%;
cursor: grab;
position: absolute;
transform: translate(-50%, -50%);
box-shadow: 0 0 8px rgba(92, 225, 230, 0.5);
}
.pressure-curve-editor .control-point:active {
cursor: grabbing;
transform: translate(-50%, -50%) scale(1.2);
}
/* Füllung unter der Kurve */
.pressure-curve-editor .curve-fill {
fill: rgba(92, 225, 230, 0.08);
}
Ebenenverwaltung für Touch
Procreate löste die Herausforderung, Dutzende von Ebenen auf einem Touchscreen zu verwalten. Das Ebenen-Panel verwendet Wischgesten statt winziger Buttons, und das Zusammenführen erfolgt durch physisches Zusammenziehen zweier Ebenenzeilen.
EBENEN-PANEL
┌─────────────────────────────────┐
│ Ebenen [+] │
│ │
│ ┌─────────────────────────────┐ │
│ │ ☑ Ebene 8 (Details) N │ │ ← Mischmodus: Normal
│ │ [Miniaturvorschau] 100% │ │ ← Deckkraft-Regler
│ ├─────────────────────────────┤ │
│ │ ☑ Ebene 7 (Lichter) S │ │ ← Mischmodus: Screen
│ │ [Miniaturvorschau] 80% │ │
│ ├─────────────────────────────┤ │
│ │ ☑ Ebene 6 (Schatten) M │ │ ← Mischmodus: Multiply
│ │ [Miniaturvorschau] 60% │ │
│ ├─────────────────────────────┤ │
│ │ ☑ Ebene 5 (Farbe) N │ │ ← Links wischen: Sperren/Löschen
│ │ [Miniaturvorschau] 100% │ │ ← Rechts wischen: Mehrfachauswahl
│ ├─────────────────────────────┤ │ ← Diese zwei zusammenziehen: Zusammenführen
│ │ ☑ Ebene 4 (Linienkunst) N │ │
│ │ [Miniaturvorschau] 100% │ │
│ └─────────────────────────────┘ │
│ │
│ Hintergrundfarbe: [■ #f5f0e8] │
└─────────────────────────────────┘
GESTEN:
Miniatur tippen → Sichtbarkeit umschalten
Ebenenname tippen → Umbenennen
Links wischen → Sperren | Duplizieren | Löschen
Rechts wischen → Für Mehrfach-Ebenen-Operationen auswählen
Zwei-Finger-Tippen → Alpha Lock umschalten
Lange drücken+ziehen → Neu anordnen
Zwei Zeilen zusammenziehen → Ebenen zusammenführen
Die Zusammenzieh-Geste zum Zusammenführen ist besonders elegant. Sie bildet die physische Metapher des Zusammendrückens zweier Dinge auf die digitale Operation des Kombinierens von Ebenen ab. Kein Bestätigungsdialog — einfach zusammenziehen, und sie werden zusammengeführt. Rückgängig ist immer nur ein Zwei-Finger-Tippen entfernt.
Animation Assist
Procreates Animation Assist verwandelt den Ebenenstapel in eine Bild-für-Bild-Zeitleiste. Das Design verwendet bestehende Konzepte wieder (Ebenen sind Frames), anstatt ein völlig neues Paradigma einzuführen.
ANIMATION ASSIST MODUS
┌─────────────────────────────────────────┐
│ │
│ [Leinwand mit Onion Skinning] │
│ │
│ Aktuelles Frame in voller Deckkraft │
│ Vorheriges Frame bei 25% (Rotton) │
│ Nächstes Frame bei 25% (Grünton) │
│ │
├─────────────────────────────────────────┤
│ ◀ ▶ ● ○ ○ ○ ○ ○ ○ ○ ○ ○ ○ ▶▶ │
│ ↑ ↑ ↑ │
│ Play Aktuelles Frame FPS: 12 │
│ (hervorgehoben) │
│ │
│ [Onion Skin] [Einstellungen] [Frame +] │
└─────────────────────────────────────────┘
ONION SKIN EINSTELLUNGEN
Angezeigte Frames: 1-4 vorherige, 1-4 nächste
Deckkraft: 10%-80% pro Frame
Farbe: Rot (Vergangenheit) / Grün (Zukunft)
Mischung: Normal oder Multiply
Das Onion Skinning verwendet Rot für vergangene Frames und Grün für zukünftige Frames — eine Konvention, die von traditionellen Animations-Leuchttischen übernommen wurde. Künstler, die auf Papier gelernt haben, verstehen das System sofort.
Export-Workflows
Procreate unterstützt den Export in alle gängigen Formate, aber die Export-Oberfläche ist um die Absicht des Künstlers herum gestaltet, nicht um technische Spezifikationen.
TEILEN-MENÜ (Absichtsbasiert)
┌─────────────────────────────────────────┐
│ Teilen als... │
│ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │Procreate│ │ PSD │ │ PDF │ │
│ │ .pro │ │Photoshop│ │ Druck │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ JPEG │ │ PNG │ │ TIFF │ │
│ │ Teilen │ │ Web │ │ Archiv │ │
│ └─────────┘ └─────────┘ └─────────┘ │
│ │
│ Für Animationen: │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ GIF │ │ MP4 │ │ PNG │ │
│ │Animiert │ │ Video │ │Sequenz │ │
│ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────┘
Der PSD-Export behält Ebenen, Mischmodi und Masken bei — das bedeutet, Procreate kann das Startwerkzeug in einem Workflow sein, der auf dem Desktop abgeschlossen wird. Diese Interoperabilität ist eine Designentscheidung, die den bestehenden Arbeitsprozess des Künstlers respektiert, anstatt zu verlangen, dass er ihn aufgibt.
Das Fazit
Procreate hatte Erfolg, indem es die Annahme zurückwies, dass professionelle Kreativwerkzeuge professionelle Kreativwerkzeug-Oberflächen benötigen. Anstatt Photoshops 30 Jahre angesammelte Benutzeroberfläche auf einen Touchscreen zu quetschen, fragte Savage Interactive, wie sich das Zeichnen auf Glas tatsächlich anfühlen sollte, und entwickelte von dieser Frage ausgehend nach außen.
Die Gesten-Grammatik ist das Fundament. Jede Entscheidung — von der Handballenerkennung über das Zusammenziehen zum Zusammenführen von Ebenen bis zu QuickShape — dient dem Prinzip, dass die Oberfläche verschwinden und den Künstler allein mit der Leinwand lassen soll. Unter 7ms Latenz ist keine Datenblatt-Zahl; es ist der Unterschied zwischen „auf einem Bildschirm zeichnen” und „zeichnen”.
Am besten geeignet zum Lernen: Wie man gestenbasierte Interaktionssysteme für Kreativwerkzeuge gestaltet. Studieren Sie die Konsistenz der Zwei-Finger/Drei-Finger-Grammatik, den Druckkurven-Editor als Modell dafür, wie komplexe Parameter greifbar gemacht werden, und wie die Ebenenverwaltung für Touch neu gedacht wurde, ohne professionelle Funktionalität einzubüßen.
Häufig gestellte Fragen
Wie erreicht Procreate eine Stift-Latenz von unter 7ms?
Procreate nutzt Apples prädiktive Touch-API in Kombination mit Metal-Rendering, um die Lücke zwischen Stiftkontakt und Pixelantwort zu minimieren. Die App sagt voraus, wohin der Strich basierend auf Geschwindigkeit und Winkel verläuft, und rendert vorhergesagte Pixel vor den tatsächlichen Touch-Daten. Wenn die tatsächlichen Daten eintreffen, wird die Vorhersage nahtlos korrigiert. Diese Vorhersage-Pipeline erzeugt in Kombination mit ProMotions 120Hz-Bildwiederholrate die Illusion von null Latenz.
Warum hat Procreate ein Abo-Modell abgelehnt?
Savage Interactives Position ist, dass Kreativwerkzeuge besessen und nicht gemietet werden sollten. Ein Einmalkauf schafft eine andere Beziehung zwischen Künstler und Werkzeug — eine des Besitzes statt der Verpflichtung. Diese Entscheidung bedeutet auch, dass Procreate in jedem großen Update genug Mehrwert liefern muss, um neue Verkäufe anzutreiben, anstatt sich auf wiederkehrende Einnahmen bestehender Nutzer zu verlassen. Das Ergebnis sind Updates, die das Werkzeug wirklich weiterentwickeln, statt inkrementeller Feature-Beschränkungen.
Wie funktioniert QuickShape?
Wenn ein Künstler eine Form zeichnet und den Stift am Ende des Strichs hält, erkennt Procreate die Geometrie und rastet sie zu einer sauberen Version ein. Ein wackeliger Kreis wird zu einem perfekten Kreis. Eine grobe Linie wird perfekt gerade. Ein unordentliches Rechteck rastet zu rechtwinkligen Ecken ein. Die Haltedauer ist der Auslöser — sie unterscheidet beabsichtigtes Formenzeichnen vom schnellen Skizzieren. Der ursprüngliche Strich bleibt im Rückgängig-Verlauf erhalten, sodass der Künstler immer zurückgehen kann.
Wie handhabt Procreate die Neigung und den Azimut des Apple Pencil?
Procreate bildet den Neigungswinkel und den Rotationsazimut des Stifts auf Pinselparameter ab. Ein Bleistiftpinsel in steilem Winkel erzeugt dünne, präzise Linien. Derselbe Pinsel in flachem Winkel erzeugt breite, schattierende Striche — genau wie ein echter Bleistift. Jeder Pinsel kann über die Pinsel-Engine-Einstellungen anpassen, wie er auf Neigung und Azimut reagiert, sodass Künstler Werkzeuge erstellen können, die sich wie bestimmte physische Medien verhalten.
Was macht Procreates Ebenensystem anders als Desktop-Apps?
Procreates Ebenensystem hat dieselben Fähigkeiten wie Desktop-Apps — Mischmodi, Deckkraft, Alpha Lock, Schnittmasken, Gruppen — aber das Interaktionsmodell ist vollständig gestenbasiert. Es gibt keine Rechtsklick-Menüs oder winzige Icon-Buttons. Wischen, Zusammenziehen, Tippen und langes Drücken ersetzen jede traditionelle Steuerung. Die maximale Ebenenanzahl wird durch Leinwandauflösung und Geräte-RAM begrenzt, was Procreate beim Erstellen einer neuen Leinwand vorab kommuniziert.