LE CHOC DES AUTOCOLLANTS ! Créer un pack d'autocollants iMessage

1. Intro: Salut, je m'appelle Jess Elardo. Je suis directeur artistique, illustrateur, artistes vivant à Seattle, Washington. En plus de donner des cours sur Skillshare sur la conception d'affiches imprimées à cordes et une série de trois cours sur le design de personnages, j'ai été directeur artistique pour certains disques pop, j'ai développé des dessins animés pour Disney, Nickelodeon, et Cartoon Network, et j'ai collaboré sur des projets avec Starbucks et Nike et Raffa, Target et Penguin UK, et une tonne d'autres personnes. Plus tôt cette année, j'ai créé un pack d'autocollants iMessage pour l'App Store d'Apple. créer m'a forcé à penser de différentes manières, comment nous communiquons avec les autres et comment les images sont une partie toujours plus importante de notre communication. Cette divergence de création d'images et interaction sociale est un domaine qui est mûr pour l'exploration, et dans cette classe je veux l'explorer plus avant. Cette classe porte sur la conception et la création d'autocollants iMessage. Il ne s'agira pas de la façon de les soumettre à l'App Store et il ne s'agira pas de la façon de les créer sur d'autres plateformes. Mais les concepts que nous discutons dans la classe peuvent être appliqués à d'autres applications et plates-formes, même si nous allons spécifiquement parler d'autocollants iMessage pour l'iPhone. Donc je pense que nous sommes prêts à y aller. Commençons sur les choses. 2. Aperçu du cours: Tout d'abord, qu'est-ce qu'un autocollant ? Est-ce simplement une image ou est-ce qu'elle sert une sorte de but plus large ? Pour moi, les autocollants sont un moyen de communiquer rapidement des pensées, des idées, des émotions sans avoir à marteler un tas de mots. C' est rapide, c'est facile, et c'est beaucoup plus amusant à utiliser. Avant de commencer à travailler sur notre propre pack d'autocollants, prenons du recul et regardons comment vous les utilisez. Est-ce simplement un abrégé amusant ou sont-ils une sorte de proxy pour des indices de communication non verbaux que vous ne pouvez pas réaliser avec une communication écrite typique ? Pensez à la façon dont vous communiquez avec vos amis. Existe-t-il des moyens de communiquer, mais ne peuvent pas le faire pour le moment ? Comment pouvons-nous utiliser les autocollants différemment de ce que nous sommes actuellement ? Pour mon pack d'autocollants, je vais créer une série d'éléments faciaux que les utilisateurs peuvent combiner pour créer leurs propres visages uniques. Avoir une variété de formes de tête, les yeux, les bouches. J' invite l'utilisateur à faire preuve de créativité avec les autocollants, en les utilisant d'une manière que je ne pensais jamais. Le résultat est un faire votre propre emoji de toutes sortes, permettant aux utilisateurs de communiquer plus efficacement leurs propres pensées et émotions personnelles en combinant les éléments qui résonnent le plus avec eux. Comme les autocollants peuvent également être collés sur les images dans iMessage, vous pouvez également utiliser mon pack d'autocollants pour défacer les selfies ou toute autre photo que des amis envoient. Faire vos propres images sont une façon de repenser la façon dont nous utilisons des autocollants. Mais comme les autocollants sont un phénomène relativement nouveau, il y a encore beaucoup de découvertes et d'innovations qui peuvent être faites autour d'autres façons de les utiliser. 3. Diverses approches: Une fois que vous avez réfléchi à ce qui est possible avec les autocollants, il est temps de commencer à penser à quel pack d'autocollants vous voulez faire. Tu pourrais gifler un chat dessus. Peut-être un chat avec un beignet autour de ses déchets et l'appeler un jour. Je vous mets au défi de créer quelque chose de personnel pour vous-même. Les références de la culture pop sont amusantes et elles ont un large attrait , mais il a aussi la capacité de vous mettre de côté en tant que créateur. Si vous voulez mettre le travail dans la création de quelque chose, pourquoi ne pas créer quelque chose qui est complètement nouveau et qui est entièrement à vous ? Il y a assez d'autocollants de chat là-bas déjà ou divers autres autocollants de culture pop. Ces choses pop culture s'estomperont au fil du temps, mais créer votre propre chose qui est unique à vous permettra d'établir vous-même et votre voix créative et cela devient un élément de base pour votre propre carrière d'être longue et réussie et de vous guider dans bien d'autres façons. Alors que vous comptez sur une chose de pop culture comme votre carrière, il y a des limites à cela. Créez un pack d'autocollants qui vous est personnel, quelque chose que vous voulez voir dans le monde parce que je vous garantis que si vous voulez le voir dans le monde alors il y aura quelqu'un d'autre là-bas qui veut aussi le voir. Probablement beaucoup de gens qui veulent le voir. Nous n'avons pas besoin d'un autre chat avec un paquet d'autocollants en beignet. Utilisez cela comme une occasion pour vous d'inspirer d'autres personnes. Centrez-le autour de vos centres d'intérêt. Aimez-vous le camping ? Tu aimes faire du vélo ? Aimez-vous la plage ? Pensez à ce que vous aimez et créez un pack d'autocollants qui en parle d'une manière ou d'une autre. Vous pouvez également le traiter comme une occasion de perfectionner vos compétences. Peut-être que vous voulez fléchir vos compétences en lettrage, il suffit de prendre votre pack d'autocollants devient quelque chose qui est centré sur les mots. Peut-être que vous aimez les dessins de personnages, donc vous utilisez des autocollants comme une occasion de créer de nouveaux personnages. L' un de mes aspects préférés des autocollants est la possibilité d'incorporer l'animation. Même quand un super subtil, animation peut donner à vos autocollants à l'élément dynamique, leur donnant plus d'impact. Pensez à des façons d'incorporer l'animation dans vos autocollants. 4. Conceptualisation: À présent, vous avez pris un certain temps pour réfléchir à ce pack d'autocollants que vous voulez faire et vous êtes prêt à commencer à concevoir autour de cette idée. Il peut s'agir de croquis, de notes, ou de quelque chose que vous vous sentez le plus à l'aise de travailler. Le but ici est de jeter autant d'idées que vous le pouvez, hors de votre tête et sur le morceau de papier devant vous. Même vos idées terribles et horribles peuvent conduire à de très bonnes idées, alors sortez tout et concept autant que vous pouvez sur la page, et à partir de là, vous pouvez déterminer ce qui est important et ce qui ne l'est pas. Je pense que quelque part entre 20 et 30 autocollants dans un paquet est un point doux, donc vous aurez envie de tirer pour probablement environ 40-60 concepts différents autour de votre idée. Tant qu'il suffit de se sentir comme un ensemble cohésif sans qu'il devienne trop navigable, c'est vraiment à vous de décider, et tout le monde est différent, alors choisissez une quantité qui a le plus de sens pour vous. Comme vous commencez à concevoir, vous n'avez vraiment pas besoin de beaucoup, vous avez juste besoin de papier. Ce n'est pas du papier fantaisie. Vous pouvez avoir des ordures sur le dos, ou vous pouvez utiliser votre carnet de croquis, peu importe. Les crayons sont parfaits pour esquisser, juste parce que vous pouvez effacer. Ces stylos sont amusants, car vous pouvez choisir différentes couleurs et annoter en différentes couleurs. Ce que je vais utiliser, c'est que je vais utiliser un stylo noir parce qu'il sera le meilleur pour vous les gars. Comme je l'ai déjà dit, je fais une série de formes de tête, de formes d'œil et de formes de bouche, et donc je vais juste commencer avec des têtes, et ensuite vous commencez à dessiner. Un cercle, un carré, un triangle, et le point est juste d'obtenir le plus rapidement possible, et vous allez les affiner numériquement afin qu'il n'ait pas besoin d'être fantaisie ou quoi que ce soit, et plus vite vous travaillez mieux juste parce que vous veulent obtenir autant d'idées que possible. Si je tourne pour 15 au total, je vais vouloir trouver une trentaine de croquis. Je continue à faire ça jusqu'à ce que je frappe mes 30 et parfois les choses vont vous conduire à d'autres idées, donc cette forme de tête. Je pensais que nous pourrions utiliser les yeux là et une bouche ici, mais ça ressemble aussi à un orignal, alors laissez vos autres idées inspirer de nouvelles idées. Le cercle m'a poussé à penser à quoi s'il s'agissait d'une forme satellite. Je sais que j'ai dit que la culture pop est stupide, mais pourquoi ne pas jeter un Mickey Mouse. Continuez avec ça. Une fois que j'en aurai fini avec ma tête, je commencerai sur les yeux et j'aurai des formes d'yeux. Je ne fais que des yeux simples ici parce qu'il est assez facile extrapoler et de réaliser que celui-ci sera en fait deux yeux qui ressemblent. C' est un clin d'œil. Le clin d'œil m'a inspiré à faire des cils et des lunettes de soleil. Au lieu de lunettes de soleil, qu'en est-il des lunettes à rayons X ? Continuez à voler et cela ne devrait pas prendre trop de temps, et parfois ce qui peut être utile, c'est de prendre des notes. Ce stylo est utile à cet égard. Donc parce que je ne m'en souviens peut-être pas, parce que je travaille si vite, je ne me souviens peut-être pas que je veux que ces spirales soient animées, donc je vais faire cette note ici juste pour ne pas l'oublier. Continuez jusqu'à ce que vous ayez à court d'idées, c'est la meilleure façon d'y aller. Une fois que vous avez terminé vos croquis et que vous avez choisi vos favoris, il est temps de démarrer la boîte nerd et de créer l'illustration finale dans Illustrator ou Photoshop. J' utiliserai Illustrator parce que c'est ce qui est le plus facile pour moi. 5. Numériser: Dans mes classes précédentes, la classe de conception d'affiches et le personnage de construction aussi, j'ai déjà eu des tutoriels sur la façon dont je crée des images vectorielles à partir de mes dessins à l'encre, alors, consultez ces classes si vous êtes intéressé à voir cette partie de mon processus. Au lieu de cela, passons à la configuration d' un fichier Illustrator de manière à faciliter l'exportation de nos images ultérieurement. À ce stade, j'ai dessiné tous mes éléments et ils sont juste dans un fichier Illustrator ouvert. À partir de là, je vais créer un nouveau fichier Illustrator dans lequel je viderai tous mes éléments individuels dans des pages séparées. À ce stade, vous voudrez décider si vous voulez faire des autocollants de petite, moyenne ou grande taille. Je fais toujours grand juste parce que plus grand est mieux dans ce cas. Si vous voulez faire petit, vous voudrez faire vos tailles de page 300 pixels par 300 pixels. Si vous voulez faire moyen, vous ferez 408 pixels par 408 pixels et si vous voulez faire grand, vous ferez 618 par 618. Donc, nous allons commencer un nouveau fichier, créer un 618 x 600 pixels et je vais aller 15 tableaux d'art parce que j' ai 15 formes de tête et je vais faire un fichier différent pour les têtes, la souris et les yeux. Une fois que j'ai ça, je clique sur « Ok », et à partir d'ici, je commence juste à les déposer. Je vais sélectionner chacun individuellement, puis aller à chaque page, puis si je zéro sur la page, et puis je peux juste coller et il le centre automatiquement ce qui le rend assez facile. Ensuite, allez à la page suivante, sélectionnez la suivante. Alternativement, vous pouvez simplement les amener tous et ensuite les centrer à partir de là. Maintenant, je vais faire la même chose avec la bouche et les yeux, et maintenant pour la bouche et nous allons, d'ici vous sauvegardez vos fichiers et nous pouvons commencer à animer certains éléments. 6. Intégrer l'animation: À ce stade, vous avez tous vos éléments sur leur propre plan de travail, et si vous le souhaitez, vous pouvez les exporter dans des images séparées, et commencer à les déposer dans Xcode pour créer votre pack d'autocollants. Mais, au lieu de cela, commençons à animer quelques-uns des éléments. L' animation est amusante et elle rend votre pack d'autocollants plus dynamique et agréable pour l'utilisateur. Allons aux yeux et ce que j'aime faire, c'est réorganiser les plans de travail pour qu'ils soient tous sur une seule ligne. Pour ce faire, je vais le faire, 15 colonnes donc elles sont toutes en une seule ligne. Ensuite, je vais, cliquez dessus et puis je vais juste le dupliquer vers le bas. Une fois que vous l'avez dupliqué, prenez ces éléments, et changez simplement quelque chose à ce sujet. Ça peut être assez subtil, donc je vais faire pivoter ça, 45 degrés. Ensuite, à partir de là, je recommencerai, je me suis un peu sorti de bêtises alors, je vais entrer et taper ça. Il est important de noter, assurez-vous que vous dupliquez une page, ne copiez pas et collez pas. De cette façon, vous pouvez vous assurer que vos images se trouvent au même endroit exact que l'itération précédente de cette animation. Sinon, il va être très difficile pour elle de se fondre parfaitement, et votre animation finira par devenir un peu déchiquetée. De là, je changerai ça en yeux écarlats. Continuez à peaufiner les choses jusqu'à ce que vous les ayez animées de manière amusante et différente. Ensuite, vous pouvez aller à la bouche et faire la même chose avec les bouches. Sur celui-ci, je vais juste l'ajuster un peu. Vous n'avez pas à le déplacer trop pour qu'il se démarque vraiment. Parfois, des petits réglages subtils sont tout ce qu'il faut. Ensuite, une fois que vous avez parcouru et réalisé toutes vos animations, ce que j'aime faire, c'est que j'aime aller à vos plans de travail et m'assurer qu'ils sont toujours dans le bon ordre. Assurez-vous que tout le plan de travail 1 est ensemble et que le plan de travail 2 est ensemble et le plan de travail 3, donc lorsque nous avons dupliqué le plan de travail 3, nous avons fait une copie et nous nous assurons simplement qu'il est en dessous, car cela va vous faire gagner du temps lorsque vous exportez toutes ces images. Sur les yeux de l'autocollant, nous avons fait quelques-unes de ces spécifications de rayons X. Je vais vouloir revenir en arrière et m'assurer que ceux-ci sont bien organisés. Une fois toutes vos animations effectuées, assurez-vous d'enregistrer votre fichier, et nous allons passer à l'exportation des images. 7. Importer dans XCode: Une fois vos animations terminées, nous sommes prêts à exporter. Accédez à Fichier, Exporter. Choisissez le dossier dans lequel vous souhaitez les placer. Je suggère de faire un nouveau dossier juste pour que tout soit en un seul endroit et c'est propre. Assurez-vous que vous exportez en tant que PNG, sélectionnez Utiliser les plans de travail et assurez-vous que tout est sélectionné, sauf si vous ne souhaitez pas en inclure certains. Mais nous allons sélectionner tout, puis aller Exporter. Assurez-vous que votre résolution d'écran est à 72. Ici, votre couleur d'arrière-plan est transparente, puis cliquez sur « OK » et il les enregistre tous dans ce dossier. Je vais répéter ça avec les yeux et la bouche. Ensuite, une fois que j'ai fini avec tout cela, alors toutes mes images sont prêtes à être jetées dans Xcode pour créer réellement le pack d'autocollants. À ce stade, nous avons exporté tous nos autocollants dans des fichiers PNG, et nous voulons ouvrir Xcode. Téléchargez-le si vous ne l'avez pas, c' est une application gratuite. Mais une fois que vous le faites, ouvrez-le, créez un nouveau projet Xcode, sélectionnez Sticker Pack Application, sélectionnez Suivant. Nom du produit, il suffit de nommer votre produit. Je vais nommer ces autocollants Skillshare. Le nom de l'équipe, vous pouvez sauter ça pour l'instant. Lorsque vous souhaitez soumettre ceci à l'App Store, c'est à cet endroit que vous indiquez votre nom de développeur. Le nom de l'organisation est généralement votre propre nom ou celui de votre entreprise. Ensuite, l'identificateur d'organisation est généralement votre nom de domaine et il est dans les notations de nom de domaine inversées. Mon nom de domaine est ledouxville.com, donc vous allez juste aller com.ledouxville. Si votre site Web est hamburger.org, alors vous allez org.hamburger. Sélectionnez Suivant, déterminez un endroit où les enregistrer. Je vais créer un nouveau dossier sur mon bureau et le nommer Skillshare xcode, Créer, puis il le configure. Ce sont toutes des valeurs par défaut que je ne blesse pas généralement. Mais ce que vous voudrez faire est ici sur le côté gauche où il est dit stickers.xcstickers, sélectionnez cela. Ici, dans la colonne suivante est iMessage App Icône. Vous souhaitez exporter des icônes pour votre application qui toucheraient sur votre écran d'accueil de votre iPhone dans toutes les tailles. Ce qu'on va faire, c'est aller au pack d'autocollants ici. C' est là que nous faisons glisser nos autocollants dans Xcode. Je vais y aller, cliquez dessus. Voici tous mes autocollants. Pour les autocollants statiques, autocollants sans animation. Il vous suffit de les sélectionner tous, puis de les faire glisser. Ensuite, si vous avez des autocollants avec des animations, ce que je fais évidemment. À partir de là, vous voulez soit aller à l' éditeur et cliquer sur « Ajouter des actifs Nouvelle séquence d'autocollants ». Ensuite, vous choisissez tous les éléments pour un autocollant particulier. Ici, ce sont toutes mes images de lunettes de rayons X que je veux compiler dans une animation. Je les fais glisser dans ma séquence d'autocollants. Au lieu de passer à l'Éditeur et Ajouter des ressources, vous pouvez également contrôler le clic et Ajouter des ressources et créer une nouvelle séquence d'autocollants. Il suffit de parcourir tous vos autocollants et de les ajouter tous à Xcode. Je vais exploser et faire ça assez vite. Une chose si vous voulez, vous pouvez simplement aller à nouveau Sticker Sequence. Comme ça, tout ce que tu as à faire, c'est de les jeter tous dedans, et je suis là. J' ai tout jeté dedans. J' ai fait une séquence d'autocollants supplémentaire, donc je peux juste enlever ça. Ensuite, à partir d'ici, je veux m'assurer que tous mes autocollants sont de la bonne taille. Je vais les sélectionner tous et je veux qu'ils soient grands. Ici, à droite, je sélectionne Large. À ce stade, vous souhaitez modifier vos paramètres d'animation. Si vous cliquez sur la flèche de lecture au-dessus de l'autocollant, elle vous montrera à quoi ressemble l'animation. Pour moi, cela va trop vite, donc je veux le ralentir. Je pourrais essayer cinq et voir à quoi ça ressemble. C' est trop lent, alors peut-être que je vais essayer neuf. Ça a l'air bien. Passez en revue et faites tout cela à toutes vos animations d'autocollants pour vous assurer que vous les avez à la recherche correcte. Une fois que vous avez toutes vos animations à la recherche correcte, vous allez tester votre pack d'autocollants. Ici, sous l'extension Sticker Pack, sélectionnez la taille de téléphone que vous souhaitez essayer sur iPhone ou iPad. Je vais essayer sept. Allez à Product, allez courir et il compilera votre Sticker Pack en un simulateur. Ensuite, votre exemple de téléphone apparaîtra, sélectionnez votre pack d'autocollants Skillshare. Ensuite, ils se présenteront, et voici tous vos autocollants. Faites défiler et trouvez celui que vous voulez. Je vais faire le squelette. Je lui mettrai des rayons X, des dents. Voilà, ça marche. En ce moment, je suis Kate. Mais tu peux aller ici et choisir John et avoir une conversation avec toi même. Assurez-vous que tout fonctionne comme vous voulez que cela fonctionne. C' est là, tu as fini. Si vous voulez continuer à peaufiner vos autocollants, vous pouvez quitter le simulateur et revenir en arrière et continuer à peaufiner toutes vos animations, puis simplement reconstruire votre simulateur de téléphone. C' est aussi simple que ça. 8. Synthèse: Félicitations. Vous avez maintenant conçu votre propre pack d'autocollants. Si vous souhaitez les intégrer dans l'App Store, vous devez vous inscrire au programme de développement d' Apple et prendre les mesures nécessaires pour soumettre votre application au magasin. C' est un peu impliqué. Il vous oblige à exporter diverses icônes dans différentes tailles, ce qui est facile, mais il y a aussi des certificats numériques, le débogage, et d'autres jumbo techniques que je ne traite généralement pas dans mon quotidien et juste en dessinant photos. Mais il y a assez de tutoriels qui vous guident à travers le processus que, je pense, vous serez probablement en mesure de le faire avec des niveaux très minimes. Si un crâne engourdi comme moi peut le comprendre, alors je suis sûr que vous pouvez aussi. Entre-temps, publiez des images traitées de vos concepts, de vos croquis et de vos images vectorielles finales et tout cela dans la galerie du projet afin que nous puissions tous nous inspirer mutuellement et espérons-le, repousser les limites de ce qui est possible avec autocollants numériques. Merci d'avoir suivi ce cours, d'en avoir fait partie, de m'avoir écouté. Je suis désolé pour l'assaut de l'aumône, mais j'espère que vous avez passé un bon moment et consultez mes autres cours si vous ne l'avez pas déjà fait. Merci.