Mach deine eigenen Sticker für den Messenger: Wie ich meine in 8 Tagen in Apple iMessage veröffentlicht habe

Hast du dich schon mal gefragt, wie du deine eigenen Sticker machen und sie auf Apple iMessage veröffentlichen kannst? Die Designerin und Illustratorin Adelyn Tam erzählt, wie sie es in nur einer Woche geschafft hat.

Dim Sum Abdeckung

Adelyn Tam ist eine Produktdesignerin und Illustratorin aus Kuala Lumpur, Malaysia. Sie konnte ihre Dim-Sum-Cartoon-Sticker in etwas mehr als einer Woche auf Apple iMessage hochladen. In diesem Tutorial zeigt sie, wie du deine eigenen Sticker für iMessage erstellen kannst. Alles, was du brauchst, ist ein Set von Stickermotiven und deinen Computer.

Als Apple iOS 10 ankündigte, war ich begeistert von den Stickern in iMessage. Wenn Emojis nicht ausreichten, um meine Gedanken mitzuteilen, machte ich ein Doodle, machte ein Foto und schickte es an die andere Person (was ist eigentlich ein Telefonat?).

Mir gefiel der Gedanke, dass einige meiner Kunstwerke in den täglichen Chat-Gesprächen verwendet werden, und ich beschloss, es zu versuchen. Hier erzähle ich dir, wie ich von den Skizzen auf Papier zu den Dim und Sum Aufkleber im iMessage App Store veröffentlicht. Dies ist mein erster Versuch, einen Sticker oder eine iOS-App im Selbstverlag zu veröffentlichen (es ist derselbe Prozess), und ich teile dies aus der Perspektive eines Designer.

Erstelle deine professionelle Portfolio-Website in wenigen Minuten. Starte noch heute deine kostenlose 14-tägige Testversion, keine Kreditkarte erforderlich.

dim-sum-1

Meine Vorgehensweise für die acht Tage in Kurzform:

Tag 1-3:

Ich habe mir ein Konzept ausgedacht und es auf Papier skizziert. Mit Illustrator habe ich digitale Versionen meiner Skizzen erstellt. Habe 24 Sticker fertiggestellt.

Tag 4:

Ich habe Xcode heruntergeladen und gelernt, wie man Sticker erstellt. Ich meldete mich für einen Apple Developer's Account an und erledigte gefühlte tausend Schritte, um meine Sticker hochzuladen.

Tag 5:

Endlich habe ich meinen Build zur Genehmigung in den iMessage App Store hochgeladen.

Tag 6:

Der Status der App wurde auf "Warten auf Überprüfung" geändert.

Tag 7:

Der Status der App wurde auf "In Prüfung" geändert.

Tag 8:

Die Aufkleber wurden genehmigt und sind zum Verkauf bereit!

Hier siehst du, wie ich mein Kunstwerk für iMessage vorbereitet habe.

imessage-stickers-1

1. Bereite deine Aufkleber in Adobe Illustrator vor

Ich arbeite normalerweise mit Illustrator, wenn ich Vektoren erstelle. Ich werde einige grundlegende Dinge behandeln, die du bei der Vorbereitung deiner Illustrator-Dokumente für Aufkleber beachten solltest:

  • Kenne die Größe deines Aufklebers. Du musst später in Xcode eine der 3 Größen auswählen. Daher sollte deine Zeichenfläche in Illustrator entsprechend groß sein. Generell gilt: Je detaillierter dein Kunstwerk ist, desto größer sollte dein Aufkleber sein. Ich habe die normale Größe (408px x 408px) für meinen Aufkleber verwendet.

  • Wähle deine Größe. Dieses Bild stammt aus den iOS Human Interface Guidelines.

imessage-Aufkleber-11
  • Erstelle separate Zeichenflächen für jeden Sticker. Für den iMessage Store gibt es keine festgelegte Anzahl von Aufklebern (die ich finden konnte). Daher rate ich dir, eine Anzahl zu wählen, von der du glaubst, dass sie den Nutzern gefällt, vor allem, wenn du sie verkaufst.

  • Denke daran, dass es sich um ein Aufkleber-Set handelt, also versuche, ein gewisses Maß an visuellem Zusammenhalt zwischen den verschiedenen Aufklebern beizubehalten.

  • Verwende die Funktion "Für Bildschirme exportieren". Exportiere als PNG, stelle sicher, dass dein Hintergrund auf transparent eingestellt ist und @1x ausreicht.

2. Erstelle deine App-Symbole

Für die App-Symbole habe ich mich für Sketch entschieden. Hier ist eine nützliche Vorlage die ich gefunden habe, indem ich michaellee auf Github, um die App-Symbole in Sketch zu erstellen. Insgesamt gibt es 12 Icon-Bilder, die du für Xcode brauchst, und eines für iTunes Connect. So sieht es aus:

imessage-Aufkleber-2

Einige Profi-Tipps für die Erstellung von App-Symbolen in Sketch:

  • Wenn du deine Vektoren direkt aus Illustrator kopierst, solltest du sicherstellen, dass du deine Striche vorher in Konturen umgewandelt hast. Denn du willst nicht, dass einige Striche zu dick oder zu dünn sind, wenn du sie auf die verschiedenen benötigten Größen skalierst.

  • Lege deine Icons als Symbole fest. Auf diese Weise musst du bei der Erstellung deines zweiten Aufkleber-Sets nur ein Bild ersetzen.

  • Exportiere sie @1x und lege sie alle in einem Ordner ab.

3. Übertrage deine Assets in Xcode

Jetzt, wo du deine Assets fertig hast, ist es an der Zeit, sie in Xcode zu konfigurieren, einem Tool von Apple zur Softwareentwicklung. Du kannst herunterladen kostenlos im Mac App Store.

Der Prozess, um deine Assets in Xcode zu übertragen, ist ziemlich einfach. Du kannst es dir in diesem Video. Im Grunde genommen gibt es zwei Teile: zum einen die Übertragung deiner Sticker-Vorlage und zum anderen die App-Symbole.

Der größte Teil der Arbeit, die mit der Veröffentlichung der App verbunden ist, kommt danach, vor allem, wenn du das zum ersten Mal machst, so wie ich. Wie du Xcode für deine Sticker einrichtest, wie du sie testest und zu iTunes Connect hochlädst und was sonst noch so anfällt, erfährst du im Rest dieses Beitrags.

4. Tritt dem Apple Developer's Program bei

Wenn du noch nicht an dem Programm teilnimmst, musst du dich registrieren, um Apps im App Store vertreiben zu können. Das kostet $99 pro Jahr. Der Prozess ist unkompliziert und die Akzeptanz erfolgt sofort. Das einzige Problem, das ich hatte, war, dass ich den Apple Support kontaktieren musste, um meinen vollständigen Namen zu ändern, was etwa einen Tag dauerte.

Dieser Teil könnte für manche ein Hindernis sein, weil er eine gewisse Anfangsinvestition erfordert, aber wie ich immer zu allen Apple-Produkten sage: "Nimm mein Geld!"

5. Richte deine iOS-Zertifikate ein

Du brauchst iOS-Zertifikate, um deine Sticker und Apps zu entwickeln und zu vertreiben. Du brauchst zwei Zertifikate: Entwicklung und Vertrieb. Die Zertifikate gelten für ein Jahr.

imessage-Aufkleber-7

Klicke oben auf die Schaltfläche +, um ein neues Zertifikat zu erstellen.

Wenn dein Entwicklerkonto fertig ist, gehst du zu Konto > Zertifikate und siehst das folgende Bild. Ich habe mich dafür entschieden, meine iOS-Zertifikate manuell hinzuzufügen. Schau dir dieses tolle Video-Guide um zu sehen, wie es gemacht wird.

Der Prozess erfordert ein bisschen Herumklicken, aber ansonsten ist er ziemlich klar. Ich fasse den Vorgang hier im Video kurz zusammen:

Ein neues Zertifikat für die Produktion erstellen

  1. Klicke auf den + Button > Wähle iOS App Entwicklung
  2. Erstelle eine Zertifikatsanforderung (Certificate Signing Request, CSR) über Keychain Access.
  3. Lade die neu erstellte CSR hoch.
  4. Erstelle das Produktionszertifikat, lade es herunter und installiere es. Es wird nun in deinem Schlüsselbund angezeigt.

Ein weiteres Zertifikat für die Verteilung erstellen

  1. Klicke auf die Schaltfläche + > Wähle App Store und Ad Hoc.
  2. Du kannst die gleiche CSR wie oben verwenden.
  3. Erstelle das neue Vertriebszertifikat, lade es herunter und installiere es.
  4. Du bist fertig!

6. Registriere eine App-ID für die Sticker

Du musst eine App-ID für deine Sticker registrieren. Die gleiche ID wird später in der Xcode-Konfiguration verwendet. Hier ist ein kurzer Durchgang:

  1. Gehe zu Konto > Kennungen > App ID > Klicke auf das +

So sah meine aus:

imessage-Aufkleber-5
  1. Ein Beispiel dafür, wie eine Bundle-ID geschrieben wird. Sie kann alles sein, solange sie noch nie verwendet wurde, aber sie sollte so geschrieben sein, dass sie für dich Sinn ergibt, wenn du sie liest.

  2. Bestätige deine Angaben und registriere dich. Du bist fertig!

7. Erstelle deine Bereitstellungsprofile

Ich überspringe die Erklärung der Zweck der BereitstellungsprofileAllerdings brauchst du einen, um deine Sticker oder Apps auf deinen Testgeräten zu installieren und sie im Apple App Store einzureichen.

Es gibt zwei Bereitstellungsprofile, die du für deine Aufkleber brauchst, die unten hervorgehoben sind:

imessage-Aufkleber-12

Sobald du deine Zertifikate und deine App-ID eingerichtet hast, ist das Erstellen der Profile ganz einfach. Wähle einfach aus den Dropdown-Menüs aus, was du zuvor erstellt hast, wenn du dazu aufgefordert wirst, lade es herunter, installiere es und schon bist du fertig!

8. Eine neue App bei iTunes Connect erstellen

Wenn du es bis hierher geschafft hast, sind wir fast am Ziel!

Mit iTunes Connect kannst du deine App veröffentlichen, testen und die Analysen deiner App einsehen. Du findest es in deinem Account. Ich persönlich fand es ein bisschen versteckt, deshalb hier ein Bild:

imessage-Aufkleber-8

Wenn du auf iTunes Connect klickst, siehst du plötzlich eine ganz andere Welt, bumm.

imessage-aufkleber-9

Um eine neue App zu erstellen, gehe zu Meine Apps > Klicke auf + > Fülle das Formular aus. Wenn du die vorherigen Schritte bereits ausgeführt hast, solltest du keine Probleme beim Ausfüllen des Formulars haben. Du solltest jetzt deine erste App (Sticker) erstellt haben.

Nimm dir etwas Zeit, um dich mit iTunes Connect vertraut zu machen. Hier gibt es zwei Dinge, die du beachten solltest:

Tab 1: App Store

Was du hier tun musst:

  • Fülle alle erforderlichen Informationen über deine Sticker aus (Preis, Beschreibung, Kategorien usw.). Lade Screenshots/Kunstwerke deiner Sticker für den App Store und den iMessage App Store hoch.

  • Die Abmessungen die du brauchst: iPhone 5,5 Zoll Display (1242 x 2208 px), iPad (2048 x 2732 px).

  • Lade dein App-Icon hoch (1024 x 1024 px)

  • Hier siehst du auch den Status deiner Bewerbung (Vorbereitung zur Einreichung, Warten auf die Prüfung usw.).

Tab 3: Testflug

Testflight verwendest du, wenn du deine Sticker mit anderen Nutzern testen willst. Es bietet Optionen für interne und externe Tests. Internes Testen bedeutet, dass du es innerhalb deines eigenen Teams mit registrierten Nutzern (nur bestimmte Rollen) mit bis zu 100 Personen testest. Bei externen Tests kannst du bis zu 2000 Tester/innen einbeziehen, aber du musst deine Beta-Version zur Prüfung bei Apple einreichen, bevor sie den Tester/innen zur Verfügung gestellt wird.

9. Konfiguriere deine Aufkleberdatei in Xcode

Nachdem du die Einstellungen in iTunes Connect vorgenommen hast, musst du deine Stickerdatei in Xcode einrichten.

  1. Wenn du noch nicht mit deiner Apple ID in Xcode angemeldet bist, gehe zu Einstellungen > Account > Klicke auf + > Anmelden.

  2. Gehe zu Project Navigator > Deine Aufkleberdatei. Dort siehst du alle Felder, die du ausfüllen musst.

  3. Fülle das Feld Bundle Identifier mit der gleichen Bundle ID, die du zuvor erstellt hast.

  4. Deaktiviere "Signierung automatisch verwalten" und wähle das Bereitstellungsprofil, das du zuvor erstellt hast.

  5. Meine sieht so aus:

imessage-Aufkleber-5

Nachdem du das eingerichtet hast, musst du auch die Informationen für die Nebenstelle bearbeiten, etwa so:

imessage-Aufkleber-4

Wenn du das noch nicht getan hast, lege die Größe deiner Aufkleber fest. Das kannst du jederzeit während des Projekts tun. So sieht es aus (auf der rechten Seite):

imessage-Aufkleber-10

10. Exportiere deinen Build mit Xcode

Jetzt können wir den Build endlich in iTunes Connect hochladen!

  • Achte darauf, dass du unter Aktives Schema festlegen "generisches iOS-Gerät" auswählst, dann wähle deinen .xcstickers-Ordner aus > gehe zu Produkt > Archiv.

  • Gehe zu Fenster > Organizer. Es sollte ein neues Fenster erscheinen und du solltest deine Aufkleber im linken Bereich sehen.

  • Klicke auf Validieren, um zu sehen, ob mit deinen Aufklebern alles in Ordnung ist. Wenn es Probleme gibt, wird Xcode dich benachrichtigen.

  • Wenn alles in Ordnung ist, ist es an der Zeit, die App in iTunes Connect hochzuladen! Klicke auf "In den App Store hochladen"... Aber keine Sorge, das bedeutet, dass die Aufkleber zuerst in iTunes Connect hochgeladen werden, wo sie geprüft werden.

imessage-Aufkleber-13

Sobald das Hochladen abgeschlossen ist, solltest du dir etwas Zeit lassen, damit es in deinem iTunes Connect Account erscheint.

11. Einreichen deiner Sticker im App Store

Auf iTunes Connect kannst du den Build auswählen, den du gerade zur Einreichung hochgeladen hast.

Wenn du dich entscheidest, deine App zu testen, bevor du sie einreichst, kommt hier Testflight ins Spiel. Sieh dir alle deine Angaben an und vergewissere dich, dass sie in Ordnung sind, denn du kannst sie nicht mehr ändern, wenn deine Aufkleber geprüft werden.

Sobald du bereit bist, kannst du auf die Schaltfläche "Abschicken" klicken.

Und das war's! Jetzt musst du nur noch auf den Prüfungsprozess warten. Bei mir ging das ziemlich schnell, etwa drei Tage. In der Zwischenzeit solltest du die Wartezeit nutzen, um deine Vereinbarungen, Steuer- und Bankdaten bei Apple einzurichten. Es müssen noch einige Formulare ausgefüllt werden (juhu), aber das war's dann auch schon!

Wenn du es bis hierher geschafft hast, danke ich dir und wünsche dir eine tolle Reise mit deinen iMessage-Stickern! Ich hoffe, dass andere Künstler/innen, Designer/innen und Illustrator/innen ihre Arbeit auf verschiedenen Medien veröffentlichen können und die Kontrolle über ihre Arbeit haben.

imessage-Aufkleber-3

Dieser Artikel wurde ursprünglich auf Medium veröffentlicht. Wiederveröffentlicht mit Erlaubnis.

A4 1 4

Entfalte dein kreatives Potenzial

Verbessere deine kreative Arbeit mit unserem exklusiven Starterpaket. Erhalte unschätzbare Einblicke, Werkzeuge und Strategien, um dein Handwerk zu verfeinern, deine Fähigkeiten zu verbessern, ein beeindruckendes Online-Portfolio zu erstellen und deine berufliche Entwicklung voranzutreiben.

Name(Erforderlich)
Abonnieren Sie den Newsletter Field Label
de_DEDE