Comment créer des autocollants iMessage dans Adobe Illustrator et gagner de l'argent supplémentaire!

Ce que vous allez créer

Vous avez peut-être remarqué qu'il y a un engouement pour les autocollants iMessage depuis leur lancement avec iOS 10. Aujourd'hui, vous pouvez désormais créer et vendre vos propres autocollants numériques, au lieu d'utiliser les émojis préinstallés..

Les autocollants iMessage constituent un moyen amusant et amusant d'exprimer vos idées et vos pensées, car vous pouvez les éplucher, les placer et les coller dans vos discussions.!!

Si vous vous êtes déjà demandé ce qu'il en était de créer un pack d'autocollants pour iOS, nous allons dans ce tutoriel utiliser une esquisse pour concevoir des autocollants iMessage simples dans Adobe Illustrator à l'aide de lignes, de formes et de couleurs. Passons ensuite brièvement à iTunes Connect et Xcode pour lancer notre propre pack d'autocollants iMessage sur l'App Store..

Si vous êtes à la recherche d'inspiration émoticône pour vos propres designs d'autocollants, passez à GraphicRiver.

1. Trouvez un concept et préparez votre fichier d’autocollant dans Adobe Illustrator

Étape 1

Il me manque la maison depuis un moment. Peu importe combien j'apprécie les merveilles du voyage, mon ventre est toujours empli du parfum de la nourriture "maison". J'ai donc décidé de fonder mon thème sur "la cuisine libanaise". Il n'y a absolument rien d'aussi riche et abondant et varié que la cuisine libanaise.

Commençons donc par dessiner notre concept alimentaire sur papier ou numériquement..

J'ai esquissé 12 "autocollants" de nourriture de la table libanaise et leurs noms sont libellés en libanais, juste pour référence.

En général, il est bon d’avoir environ 24 motifs pour un pack d’autocollants, mais dans l’intérêt de ce tutoriel, nous ne travaillons qu’à 12 modèles..

Commencez par dessiner 12 éléments dans une grille de 4 x 3, comme ci-dessous.

Une fois l’esquisse terminée, déplacez l’esquisse dans Adobe Illustrator.

Étape 2

lancement Adobe Illustrator CC.

Ouvrir un Nouveau document: Fichier> Nouveau (Commande-N) et configurez votre Douane fichier:

Prénom: "Lebanese_Food_iMessage_Stickers".

  • Nombre de planches: 12 (en fonction du nombre de stickers, chaque sticker devant avoir sa propre planche)

Vous avez trois choix de tailles de vignettes à créer.

  • Petit: 300 x 300 pixels
  • Moyen: 408 x 408 pixels
  • Grand: 618 x 618 pixels

Personnellement, je préfère travailler sur 618 x 618. Alors ajuste le Nouveau document Réglages:

  • Les colonnes: 4
  • Largeur: 618 px
  • la taille: 618 px
  • Unités: Pixels
  • Mode de couleur: RVB
  • Cliquez sur Créer un document

Étape 3

Utilisez le Endroit raccourci (Commande-Shift-P) pour placer le croquis sur le premier Artboard. Faites glisser l'image pour remplir tous les plans de travail, afin que vos croquis remplissent tous les plans de travail créés.

Ensuite, nous devons créer une couche pour notre travail en ligne.. 

Ouvrez le Couches panneau, Fenêtre> Calques.

Cliquez sur le sous-menu du Couches panneau:

  1. prénom: Esquisser
  2. Sélectionner Fermer à clé
  3. Dim Images to:20%
  4. D'accord

Aprèsverrouiller le "Esquisser" couche, Créer un nouveau calque, au-dessus de la 'Esquisser', et nommez-le 'Ligne de travail'.

Fichier> Enregistrer (Commander-S), et enregistrez votre fichier Illustrator.

2. Comment dessiner le travail au trait

Étape 1

Préparons-nous à dessiner dans notre travail en ligne.

Premièrement, nous devons créer un pinceau d’art calligraphique «à pression». Ouvrez le Des pinceaux panneau: Fenêtre> Brosses.

Sélectionnez le Outil Ellipse (L), avec un noir Remplir, nul Accident vasculaire cérébral, et dessinez une petite ellipse de la taille du pinceau avec lequel vous voulez dessiner.

Étape 2

Avec l'ellipse sélectionnée, faites-la glisser dans la Des pinceaux panneau. 

UNE Nouveau pinceauLa boîte de dialogue s'ouvrira. Sélectionner Pinceau d'art, et D'accord.

le Options de pinceau d'art boîte de dialogue s'ouvrira.

Remarque: si vous possédez une tablette à stylet numérique, il est idéal pour créer un pinceau graphique qui réagit à la pression du stylet..

Pour créer un pinceau à déplacer avec la pression du stylo, dans le Options de pinceau d'art boîte de dialogue, sélectionnez:

  • Largeur: Pression
  • Options d'échelle de pinceau: Étirer pour ajuster la longueur de trait
  • Méthode de colorisation: Des teintes; cela nous permettra de personnaliser les couleurs de nos coups de pinceau plus tard.
  • Cliquez sur D'accord.

Une fois le pinceau créé, Effacer l'ellipse créée.

Maintenant, nous avons un pinceau d'art orienté pression!

Étape 3

Commençons à tracer l'esquisse.

  1. Ouvrez le Accident vasculaire cérébral panneau: Windows> Accident vasculaire cérébral.
  2. Du Des pinceaux panneau, sélectionnez le pinceau que nous venons de créer.
  3. Choisir la Pinceau Outil (b), du Outils panneau.
  4. dans le Accident vasculaire cérébral panneau, sélectionnez un noir Accident vasculaire cérébral de 0.5 pt, et Remplir mis à aucun.

Assurez-vous que votre pinceau n’est pas très lisse lorsque vous tracez, pour qu’il ressemble à un dessin à la main. Pour lisser le pinceau, double-cliquez sur le bouton Pinceau Outil (b), du Outils panneau, et le Options de l'outil Pinceau boîte de dialogue s'ouvrira.

Jeter le fidélité un cran ou deux.

Étape 4

Commençons à tracer avec le Pinceau Outil (b).

Suivez l'esquisse et tracez le travail en ligne. Il ne doit pas nécessairement être parfait, car nous voulons lui donner un simple effet de griffonnage dessiné à la main..

Une fois que tout le travail en ligne est mis en, Fermer à clé votre "Ligne de travail"Couche de la Couches panneau.

Créer un nouveau calque, sous 'Ligne de travail"et nommez-le"Couleur", ainsi nous pouvons appliquer la couleur au-dessous du travail de ligne.

Toujours sauvegarder votre dossier. Fichier> Enregistrer (Commander-S).

3. Comment rapidement colorier le dessin

Étape 1

Colorons!

Du Outils panneau, sélectionnez le Outil Pinceau Blob (Maj-B). le Brosse Blob est similaire à un marqueur, et c'est amusant à utiliser. 

Il suffit de sélectionner la couleur Accident vasculaire cérébral échantillon de votre choix, avec null remplir, et couleur dans les icônes de nourriture.

  • Un petit conseil: pour gérer le Outil pinceau blob taille, tenez la clé de crochet gauche ([) pour diminuer la taille du pinceau et le crochet droit (]) pour agrandir.
  • Avec le Outil pinceau blob (Shift-B), Utilisez le Outil Gomme (Maj-E), pour effacer toutes les formes de tâches que vous souhaitez nettoyer.

La coloration ne doit pas nécessairement être parfaite, car nous en avons besoin pour avoir une sensation organique.

Commencez avec le Hoummous.

Comme vous le voyez, vous pouvez réaliser beaucoup de choses avec le Outil pinceau blob juste en changeant sa taille et ses couleurs. De plus, il est rapide à utiliser.

Alors amusez-vous et colorez le reste de l'œuvre!

Étape 2

Vous devez organiser les formes de tâches en fonction de votre couleur, afin de Organiser objets, utilisez ces raccourcis pour accélérer le flux de travail:

  • Organiser> Amener au premier plan (Commande-Maj-])
  • Organiser> Avancer (Commander-])
  • Organiser> Renvoyer en arrière (Commander-[)
  • Organiser> Envoyer à l'arrière (Commande-Shift- [)

Une fois que vous avez tout arrangé, vous devriez avoir un joli jeu d’icônes colorées..

Étape 3

Maintenant nettoyons nos planches.

  1. Ouvrir la "Ligne de travail"couche de la Couches panneau.
  2. Supprimer le "Esquisser"Calque, en le faisant glisser depuis le Couches panneau à l'icône de la corbeille sur ce panneau.
  3. Sélectionnez le Outil de sélection (V), et pour chaque icône de nourriture, sélectionnez le trait et la couleur respectifs.
  4. Groupe (Command-G) ensemble Automatiquement, une fois que vous avez groupé les deux couches, le nouveau groupe passe au "Ligne de travail" couche.
  5. Centrez chaque icône au centre de la planche d’art en la regardant simplement.

6. Mettez à l'échelle les objets groupés pour qu'ils s'intègrent aux dimensions de la planche de travail et gardez un petit espace le long des bordures. Pour maintenir les proportions de l'objet, maintenez enfoncé Décalage lorsque vous faites glisser la poignée du cadre de sélection jusqu'à ce que l'objet ait la taille souhaitée.

7. Une fois que toutes les icônes de nourriture ont été mises à l'échelle, effacer la "Couleur"couche, comme c'est vide.

Fichier> Enregistrer (Commander-S).

4. Comment exporter et créer nos icônes d'application

Étape 1

Exportation les fichiers art, en utilisant le Exporter pour les écrans fonctionnalité (Fichier> Exporter> Exporter pour les écrans). 

  1. Exporter en tant que PNG.
  2. Clique le Icône Paramètres avancés, sélectionnez l'emplacement vers lequel exporter vos fichiers et définissez Échelle à 1 fois.
  3. Ensemble Couleur de fond: Transparent.
  4. Export Artboard.

Étape 2

Vous avez deux choix. Soit choisir d’utiliser une application secondaire Marketplace pour lancer les autocollants, comme LINE Créateurs Marché, ou le construire vous-même en utilisant le Compte développeurs Apple.

Pour ce tutoriel, je vais vous expliquer brièvement comment ouvrir une Compte développeurs Apple,qui coûte 100 $ par an. Le processus de candidature est assez simple et l'acceptation est rapide. Cependant, vous devez ensuite vous connecter à iTunes Connect et mettre en place les trucs administratifs comme le Taxe et banque,si vous envisagez de vendre vos autocollants (ceci n'est pas nécessaire pour les packs d'autocollants gratuits).

Pour plus de détails, consultez le Guide du développeur iTunes Connect et prenez le temps de vous en familiariser..

Étape 3

Générer nos stickers,nous devons utiliser Xcode.

Téléchargez la dernière version de Xcode 8 directement à partir du Mac App Store et Installer.

Étape 4

Télécharger les autocollants sur Xcode est facile; suivez simplement les étapes:

Ouvrir Xcode.

Assurez-vous que vous êtes connecté à Xcode avec votre identifiant Apple.

Préférence> Compte> Sélectionner +> Connexion.

  1. Créer un nouveau projet Xcode.
  2. Sélectionner Application du pack d'autocollants.
  3. Cliquez sur Suivant.
  4. Donnez à la vignette un Nom du produit pour l'identifier: 'Nourriture libanaise'.
  5. Puis remplissez le Équipe, nom de l'organisation, et Identifiant (com.votreentreprise.NomProduit), selon vos coordonnées.
  6. Cliquez sur Suivant
  7. Sélectionner Stickers.xcstickers> Pack d'autocollants dossier, et télécharger les autocollants, en glissant-déposant les images.

Étape 5

Suivant télécharger le Icônes d'application iMessage.

Le dossier est au dessus du 'Pack d'autocollants' dossier.

Choisissez une image de l'ensemble des aliments que vous souhaitez utiliser pour la Icône de l'application, et le convertir en un JPG dans Adobe Photoshop, donc il a un fond blanc. Renommer l'image de l'application: "Lebanese_Food_App_Icon.jpg".

Il y a 12 images d'icône au total dont vous aurez besoin pour Xcode, et 1 pour iTunes Connect. Pour générer facilement les icônes d'application, visitez le site MakeAppIcon.

Télécharger l'icône de la nourriture sélectionnée sur le site Web, entrez votre Email, et il va générer toutes les différentes tailles de fichiers d'icônes d'application pour vous.

Vous pouvez Télécharger les directement depuis votre email.

Une fois que vous avez téléchargé les images générées, Télécharger dans Xcode en glissant-déposant.

Cela devrait ressembler à quelque chose comme ça une fois que vous avez téléchargé sur Xcode.

5. Configurer et enregistrer les autocollants

Étape 1

Une fois que vous avez téléchargé les autocollants, vous devez 'Testez la construction' de Xcode, pour voir si les autocollants en action sont bons. Vous pouvez le faire à travers le Xcode Simulator, ou vous pouvez l'exécuter sur votre propre appareil. Tout ce que vous devez faire c'est:

  1. Sélectionnez votre appareil mobile, sous Définir le schéma actif.
  2. Clique le Courir bouton.

Si une erreur de notification s'affiche, apportez les modifications demandées, exportez et téléchargez à nouveau les icônes corrigées..

Puis testez les autocollants sur le Xcode Simulator en cliquant sur le Courir icône. Semble fabuleux!

Si vous avez besoin d'ajuster la taille d'affichage de vos autocollants sur iMessage, vous pouvez le faire dans le panneau de droite, comme indiqué ci-dessous.

Les tailles "Moyen" ou "Petit" bien travailler.

Une fois cela fait, nous devons enregistrer un ID de l'application pour les autocollants.

Étape 2

Connectez-vous à votre Compte développeur Apple enregistrer un ID de l'application.

  1. Entrer Compte> Identifiants> ID de l'application> Sélectionner +
  2. Remplissez les détails et registre.

Étape 3

Maintenant nous pouvons enfin Exporter et télécharger notre "construire" à iTunes Connect!

Revenir à Xcode.

  1. Sélectionnez “Périphérique iOS générique" sous Définir le schéma actif.
  2. Puis sélectionnez les 'Stickers.xcstickers' dossier, et dans le menu principal supérieur, cliquez sur Produit> Archive, à Archiver la construction.

Une nouvelle fenêtre devrait apparaître et affichera les archives "Construire". Vous verrez les autocollants dans le panneau de gauche.

Cliquez sur Valider pour voir si tous les autocollants sont bons pour aller. S'il y a des problèmes, Xcode affichera une notification en rouge dans la barre de menus supérieure.

Si tout va bien avec le "Construire", vous devez ensuite le télécharger sur iTunes Connect pour La revue.

Cliquer sur Transférer vers l'App Store. Cela téléchargera les autocollants sur iTunes Connect. Une fois le téléchargement terminé, il devrait apparaître sur votre iTunes Connect Compte. Donnez quelques minutes.

Étape 4

Il est temps de soumettre les autocollants à l'App Store!

Dans iTunes Connect:

  1. Sélectionner Mes applications.
  2. Sélectionner + > Nouvelle application, et sélectionnez le'Construire'nous venons de télécharger pour la soumission.
  1. Sélectionner iOS Plate-forme.
  2. Prénom: Nourriture libanaise.
  3. Sélectionner La langue et ID de lot.
  4. Créer un unique SKU "eg.location.com.bundle_title".
  5. Créer!

Dans le panneau de menu de gauche, remplissez le Informations sur l'application et Prix ​​et disponibilité. Ici, vous pouvez écrire la description de l'application, la langue, les catégories et le prix de l'application. Nous n'entrerons pas dans tous les détails, car c'est assez simple, mais cela devrait ressembler à ceci:

Étape 5

Dans Adobe Photoshop, créer des captures d’écran, en utilisant le Xcode Simulator, et les télécharger sur iTunes Connect, créer iMessage prévisualiser les images pour les captures d'écran. Cela pourrait prendre du temps. Créer 5 dimensions de la capture d'écran: Écran iPhone 5,5 pouces (1242 x 2208 px). Le système générera le reste des tailles pour vous.

Une fois terminé, cliquez sur Soumettre pour correction.

Et c'est tout!

Maintenant, tout ce que vous avez à faire est d’attendre quelques jours le processus de révision pour être approuvé..

Pendant que vos autocollants sont en révision, vous pouvez envoyer Tester invitations à vos fans à travers Vol d'essai, essayer les autocollants gratuitement pendant 60 jours. Ou vous pouvez utiliser ce temps pour configurer vos taxes, accords, certificats et coordonnées bancaires avec Apple.

Cela prend un peu de temps et vous ferez face à des erreurs en cours de route, mais avec un peu de patience et d'aide, vous y arriverez.

Toutes nos félicitations! Nos autocollants iMessage "Libanais Food" sont prêts!

Wow, j'espère que vous avez apprécié ce tutoriel! Créer des autocollants est amusant, surtout si vous pouvez gagner de l'argent! 

Achetez le pack d'autocollants «Lebanesy Food» sur iTunes.

J'espère que vous avez trouvé ce tutoriel utile! J'aimerais voir ce que vous créez! Partagez vos designs d'autocollants avec nous.