Adelyn Tam est une conceptrice de produits et une illustratrice basée à Kuala Lumpur, en Malaisie. Elle a réussi à télécharger ses autocollants de dessins animés sur le thème des dim sum sur Apple iMessage en un peu plus d'une semaine. Dans ce tutoriel, elle vous explique comment créer vos propres autocollants pour iMessage. Tout ce dont vous avez besoin, c'est d'un ensemble de dessins d'autocollants et de votre ordinateur.
Lorsqu'Apple a annoncé iOS 10, j'ai été enthousiasmé par les autocollants sur iMessage. En tant que grande utilisatrice d'iMessage, lorsque les emojis ne suffisaient pas à transmettre mes pensées, je faisais un gribouillis, prenais une photo et l'envoyais à l'autre personne (qu'est-ce qu'un appel téléphonique de toute façon ?).
J'ai adoré l'idée de voir certaines de mes œuvres d'art utilisées dans des conversations de chat quotidiennes et j'ai décidé de tenter l'expérience. Je vais donc vous expliquer comment j'ai procédé, depuis les croquis sur papier jusqu'à l'utilisation de mes dessins dans les conversations en ligne. Autocollants Dim et Sum publié sur l'App Store iMessage. Il s'agit de ma première tentative d'auto-publication d'un autocollant ou d'une application iOS (c'est le même processus), et je partage ceci du point de vue d'une concepteur.
Mon processus pour les huit jours en bref :
Jour 1-3 :
J'ai trouvé un concept, je l'ai dessiné sur du papier. J'ai utilisé Illustrator pour créer des versions numériques de mes croquis. J'ai terminé 24 autocollants.
Jour 4 :
J'ai téléchargé et appris à utiliser Xcode pour créer des autocollants. J'ai ouvert un compte Apple Developer et j'ai fait ce qui m'a semblé être un millier d'étapes pour télécharger mes autocollants.
Jour 5 :
J'ai finalement téléchargé ma version pour approbation sur l'App Store iMessage.
Jour 6 :
Le statut de l'application est passé à "En attente de révision".
Jour 7 :
Le statut de l'application est passé à "En cours d'examen".
Jour 8 :
Les autocollants ont été approuvés et sont prêts à être vendus !
Voici comment j'ai préparé mon œuvre pour iMessage.
1. Préparez vos autocollants sur Adobe Illustrator
Je travaille généralement avec Illustrator pour créer des vecteurs. J'aborderai quelques points essentiels à prendre en compte lorsque vous préparez vos documents Illustrator pour les autocollants :
Connaître la taille de l'autocollant. Vous devez choisir 1 des 3 tailles plus tard dans Xcode. Votre artboard sur Illustrator doit donc être dimensionné en conséquence. En général, plus votre dessin est détaillé, plus la taille de votre autocollant doit être grande. J'ai utilisé la taille normale (408px x 408px) pour le mien.
Choisissez votre taille. Cette image est tirée des lignes directrices de l'interface humaine d'iOS.
Créez des artboards distincts pour chaque autocollant. Il n'y a pas de nombre fixe d'autocollants (à ma connaissance) pour la boutique iMessage. Je vous conseille donc d'opter pour un nombre d'autocollants qui vous semble intéressant pour les utilisateurs, surtout si vous les vendez.
N'oubliez pas qu'il s'agit d'un jeu d'autocollants, alors essayez de conserver un certain niveau de cohésion visuelle entre les différents autocollants.
Utilisez la fonction "Exporter pour les écrans". Exportez au format PNG, assurez-vous que l'arrière-plan est transparent et que la résolution @1x est suffisante.
2. Créez les icônes de votre application
Pour les icônes des applications, j'ai opté pour Sketch. Voici une modèle que j'ai trouvé en michaellee sur Github pour générer les icônes de l'application sur Sketch. Au total, il y a 12 images d'icônes dont vous aurez besoin pour Xcode, et une pour iTunes Connect. Voici à quoi cela ressemble :
Quelques conseils de pro pour créer des icônes d'applications sur Sketch :
Si vous copiez vos vecteurs directement à partir d'Illustrator, veillez à convertir vos traits en contours au préalable. En effet, vous ne voulez pas que certains traits soient trop épais ou trop fins lorsque vous les adapterez aux différentes tailles requises.
Définissez vos icônes comme des symboles. Ainsi, lorsque vous créerez votre deuxième jeu d'autocollants, vous n'aurez à remplacer qu'une seule image.
Exportez-les @1x et placez-les tous dans un dossier.
3. Transférer vos actifs dans Xcode
Maintenant que vos ressources sont prêtes, il est temps de les configurer dans Xcode , un outil de développement de logiciels créé par Apple. Vous pouvez télécharger gratuitement sur le Mac App Store.
Le processus d'intégration de vos ressources dans Xcode est assez simple. Vous pouvez l'observer dans ce vidéo. En fait, il y a deux parties : l'une est le transfert de l'illustration de l'autocollant et l'autre, les icônes de l'application.
Le gros du travail de publication de l'application vient après, surtout si vous le faites pour la première fois comme moi. Je parlerai de la configuration de Xcode pour vos autocollants, des tests, de l'envoi sur iTunes Connect et d'autres choses délicates dans la suite de cet article.
4. Adhérer au programme des développeurs d'Apple
Si vous ne faites pas encore partie du programme, vous devrez vous inscrire pour pouvoir distribuer des applications sur l'App Store. Cela coûte $99 par an. La procédure est simple et l'acceptation est immédiate. Le seul problème que j'ai rencontré est que j'ai dû contacter l'assistance Apple pour modifier mon nom légal complet (obligatoire), ce qui m'a pris environ une journée.
Cette partie pourrait être un obstacle pour certains car elle implique un investissement initial, mais, comme je le dis toujours à tous les produits Apple, "Prenez mon argent !".
5. Configurez vos certificats iOS
Vous avez besoin de certificats iOS pour développer et distribuer vos autocollants et vos applications. Vous aurez besoin de deux certificats : développement et distribution. Les certificats ont une durée de validité d'un an.
Cliquez sur le bouton + en haut pour créer un nouveau certificat.
Une fois que votre compte développeur est prêt, allez dans Compte > Certificats, et vous devriez voir l'image ci-dessous. J'ai choisi d'ajouter mes certificats iOS manuellement. Regardez cette excellente guide vidéo pour voir comment cela se passe.
Le processus nécessite quelques clics, mais il est assez clair. Je résume brièvement le processus dans la vidéo ici :
Créer un nouveau certificat pour la production
- Cliquez sur le bouton + > Choisissez le développement d'applications iOS
- Créez une demande de signature de certificat (CSR) via l'accès au trousseau.
- Téléchargez le CSR nouvellement créé.
- Générez le certificat de production, téléchargez-le et installez-le. Il sera maintenant affiché dans votre accès au trousseau.
Créer un autre certificat pour la distribution
- Cliquez sur le bouton + > Choisissez App Store et Ad Hoc.
- Vous pouvez utiliser le même CSR que ci-dessus.
- Générer le nouveau certificat de distribution, le télécharger et l'installer.
- Vous avez terminé !
6. Enregistrer un identifiant d'application pour les autocollants
Vous devrez enregistrer un identifiant d'application pour vos autocollants. Ce même identifiant sera utilisé plus tard dans la configuration de Xcode. Voici une brève présentation :
- Allez dans Compte > Identifiants > App ID > Cliquez sur le +.
Voici à quoi ressemblait le mien :
Exemple d'écriture d'un identifiant d'offre groupée. Il peut s'agir de n'importe quoi, tant qu'il n'a jamais été utilisé auparavant, mais veillez à ce qu'il ait un sens pour vous lorsque vous le lisez.
Confirmez vos coordonnées et enregistrez-vous. C'est fait !
7. Créez vos profils de provisionnement
Je ne vais pas expliquer le objectif des profils de provisionnementIl vous en faut un pour pouvoir installer vos autocollants ou vos applications sur vos appareils de test, et pour les soumettre à l'Apple App Store.
Vous aurez besoin de deux profils de provisionnement pour vos autocollants, mis en évidence ci-dessous :
Le processus de création des profils est simple une fois que vous avez configuré vos certificats et votre App ID. Choisissez simplement ce que vous avez créé précédemment dans les menus déroulants lorsque vous y êtes invité, téléchargez, installez et le tour est joué !
8. Créer une nouvelle application sur iTunes Connect
Si vous êtes arrivés jusqu'ici, c'est que nous y sommes presque !
iTunes Connect est l'outil que vous utiliserez pour publier, tester et consulter les analyses de votre application. Vous le trouverez dans votre compte. Personnellement, j'ai trouvé qu'il était un peu caché, alors voici une image :
En cliquant sur iTunes Connect, on découvre soudain un tout autre monde.
Pour créer une nouvelle application, allez dans Mes applications > Cliquez sur + > Remplissez le formulaire. En supposant que vous ayez déjà effectué les étapes précédentes, vous ne devriez pas avoir de problème pour remplir le formulaire. Vous devriez maintenant avoir créé votre première application (autocollants).
Prenez le temps de vous familiariser avec iTunes Connect. Il y a deux choses qui vous intéressent ici :
Onglet 1 : App Store
Ce que vous devez faire ici :
Remplissez toutes les informations nécessaires concernant vos autocollants (prix, description, catégories, etc.). Téléchargez des captures d'écran/artwork de vos autocollants pour l'App Store et l'iMessage App store.
Les les dimensions dont vous avez besoin : écran iPhone 5,5 pouces (1242 x 2208 px), iPad (2048 x 2732 px).
Téléchargez l'icône de votre application (1024 x 1024 px)
Vous y verrez également l'état d'avancement de votre demande (préparation de la soumission, attente de l'examen, etc.).
Onglet 3 : Vol d'essai
Testflight est l'outil que vous utiliserez si vous souhaitez tester vos autocollants avec d'autres utilisateurs. Il offre des options de test interne et de test externe. Les tests internes sont réalisés au sein de votre propre équipe avec des utilisateurs enregistrés (uniquement pour des rôles spécifiques) jusqu'à 100 personnes. Les tests externes vous permettent d'aller jusqu'à 2000 testeurs, mais vous devrez soumettre votre version bêta à l'examen d'Apple avant qu'elle ne soit mise à la disposition des testeurs.
9. Configurez votre fichier d'autocollants sur Xcode
Maintenant que vous avez configuré iTunes connect, vous devez configurer votre fichier d'autocollants dans Xcode.
Si vous n'êtes pas encore connecté à Xcode avec votre Apple ID, allez dans Préférence > Compte > Cliquez sur + > Se connecter.
Allez dans Project Navigator > Your sticker file. Vous verrez tous les champs à remplir.
Remplissez le champ Identifiant de l'offre groupée avec l'identifiant de l'offre groupée que vous avez créé précédemment.
Décochez la case "Gérer automatiquement la signature" et choisissez le profil de provisionnement que vous avez créé précédemment.
Le mien ressemble à ceci :
Maintenant que vous avez configuré cela, vous devez également modifier les informations relatives à l'extension, comme suit :
Si vous ne l'avez pas encore fait, définissez la taille de vos autocollants. Vous pouvez le faire à n'importe quel moment du projet. Voici ce que cela donne (sur le panneau de droite) :
10. Exporter votre construction avec Xcode
Maintenant, téléchargeons enfin le build sur iTunes Connect !
Assurez-vous de sélectionner "generic iOS device" sous Set the Active Scheme, puis sélectionnez votre dossier .xcstickers > allez dans Product > Archive.
Allez dans Fenêtre > Organisateur. Une nouvelle fenêtre devrait apparaître et vous devriez voir vos autocollants sur le panneau de gauche.
Cliquez sur Valider pour voir si tout va bien avec vos autocollants. S'il y a des problèmes, Xcode vous en informera.
Maintenant que tout va bien avec votre construction, il est temps de la télécharger sur iTunes Connect ! Cliquez sur Upload to App Store... Mais ne vous inquiétez pas, cela signifie en fait que vous allez d'abord télécharger les stickers sur iTunes Connect, où il y aura un processus de vérification.
Une fois le téléchargement terminé, laissez-lui un peu de temps et il devrait apparaître sur votre compte iTunes Connect.
11. Soumettre vos autocollants à l'App Store
Sur iTunes Connect, vous pourrez sélectionner la compilation que vous venez de télécharger pour la soumettre.
Si vous décidez de le tester avant de soumettre votre application, c'est ici que Testflight intervient. Vérifiez tous vos détails et assurez-vous qu'ils sont corrects, car vous ne pourrez pas les modifier une fois que vos autocollants auront été examinés.
Une fois que vous êtes prêt, vous pouvez cliquer sur le bouton "Soumettre".
Et le tour est joué ! Il ne vous reste plus qu'à attendre la procédure d'examen. Dans mon cas, cela a été assez rapide, environ trois jours. En attendant, il est conseillé de profiter de ce temps d'attente pour configurer vos accords, vos impôts et vos coordonnées bancaires avec Apple. Il y aura encore quelques formulaires à remplir (yay) mais ce sera tout !
Si vous êtes arrivé jusqu'ici, je vous remercie et vous souhaite un bon voyage avec vos autocollants iMessage ! J'espère que d'autres artistes, designers et illustrateurs pourront faire connaître leur travail sur différents supports et avoir le contrôle sur leur travail.
Cet article a été publié à l'origine sur Medium. Reproduit avec l'autorisation de l'auteur.
FR 
EN 
ES 
PT 
DE 