STICKER SHOCK! Create an iMessage sticker pack

1. Intro: Hi, my name's Jess Elardo. I'm an art director, illustrator, artists living in Seattle, Washington. In addition to teaching classes here on Skillshare about string printed poster design and a series of three classes on character design, I've been an art director for some pop records, I've developed cartoons for Disney, Nickelodeon, and Cartoon Network, and I've collaborated on projects with Starbucks and Nike and Raffa and Target and Penguin UK, and a ton of other folks. Earlier this year, I created an iMessage sticker pack for Apple's App Store. Creating it forced me to think in different ways, how we communicate with others and how images are an ever-increasing part of our communication. This divergence of creating images and social interaction is an area that's ripe for exploration, and in this class I want to further explore it. This class is all about the concepting and creation of iMessage stickers. It's not going to be about how to submit them to the App Store and it's not going to be about how to create them on other platforms. But the concepts that we discuss in the class can be applied to other apps and platforms, even though we will specifically be talking about iMessage stickers for the iPhone. So I think we're good to go. Let's get started on things. 2. Class Overview: First off, what is a sticker? Is it simply an image or does it serve some sort of larger purpose? For me, stickers are a way to quickly communicate thoughts, ideas, emotions without having to hammer out a bunch of words. It's fast, it's easy, and it's a lot more fun to use. Before we start to work on our own sticker pack, let's take a step back and look at how you use them. Is it simply a fun shorthand or are they a sort of proxy for nonverbal communication cues that you just can't achieve with typical written communication? Think about how you communicate with your friends. Are there ways you want to communicate but currently can't? How can we use stickers differently than we are now? For my sticker pack, I'm going to create a series of facial elements that users can combine to create their own unique faces. Having a variety of head shapes, eyes, mouths. I'm inviting the user to get creative with the stickers, using them in ways that I would never ever think of. The result is a make your own emoji of sorts, allowing the users to more effectively communicate their own personal thoughts and emotions by combining the elements that resonate most with them. Since stickers can also be stuck over images in iMessage, you can also use my sticker pack to deface selfies or any other photos that friends send. Make your own images are one way to rethink of how we use stickers. But since stickers are a relatively new phenomenon, there's still a lot of discovery and innovation that can be made around other ways we can use them. 3. Various Approaches: Once you put some thought into what's possible with stickers, it's time to start thinking about what sticker pack you want to make. You could slap a cat on it. Maybe a cat with a doughnut around its waste and call it a day. I challenge you to create something that is personal to yourself. Pop-culture references are fun and they have a broad appeal but it also has the capability of sidelining you as a creator. If you're going to put the work into creating something, why not create something that's completely new and that's wholly yours? There are enough cat stickers out there already or various other pop-culture stickers. Those pop-culture things will fade over time but creating your own thing that's unique to you will establish yourself and your creative voice and it becomes a building block for your own career to be long and successful and lead you in many other ways. Whereas relying on a pop-culture thing as your career, there are limitations to that. Create a sticker pack that's personal to you, something that you want to see in the world because I guarantee if you want to see it in the world then there's going to be somebody else out there who also wants to see it. Probably a whole lot of people who want to see it. We don't need another cat with a doughnut sticker pack. Use this as an opportunity for you to inspire other people. Center it around your interests. Do you love camping? Do you love cycling? Do you love the beach? Think about what you love and create a sticker pack that somehow speaks to that. You can also treat it as an opportunity to hone your skills. Maybe you want to flex your lettering skills, just take your sticker pack becomes something that's word centering. Maybe you love character designs, so you use stickers as an opportunity to create new characters. One of my favorite aspects of stickers is the ability to incorporate animation. Even when a super subtle, animation can give your stickers at dynamic element, giving them more impact. Think about ways to incorporate animation into your stickers. 4. Concepting: By now you've taken some time to think about what sticker pack you want to make and you're ready to start concepting around that idea. These can either be sketches, or notes, or however you feel most comfortable working. The goal here though is to just dump as many ideas as you can, out of your head and onto the piece of paper in front of you. Even your terrible, horrible ideas can lead to really good ideas, so just get it all out and concept as much as you can onto the page, and from there you can determine what's important and what's not. I think somewhere between 20 and 30 stickers in a pack is a sweet spot, so you'll want to shoot for probably about 40-60 different concepts around your idea. As long as it's enough to feel like a cohesive set without it becoming too navigable is really up to you, and everybody's different, so pick a quantity that makes most sense for you. As you start concepting, you really don't need much, you just need some paper. This isn't fancy paper. You can have junk on the backside, or you can use your sketch book, whatever. Pencils are great to sketch with, just because you can erase. These pens are fun, because you can choose different colors and annotate in different colors. What I'm going to use is I'm just going to use a black pen because it will show up the best for you guys. As I said before, I am doing a series of head shapes and eye shapes and mouth shapes, and so I'm just going to start out with heads, and then you just start drawing. A circle, square, triangle, and the point is just to get as many down as quickly as possible, and you'll refine them digitally so it doesn't need to be fancy or anything, and the quicker you work the better just because you want to get as many ideas out as possible. If I'm shooting for 15 total, I'm going to want to come up with probably about 30 sketches. I just keep doing this until I hit my 30 and sometimes things will lead you to other ideas, so this head shape. I was thinking that we could use eyes there and a mouth here, but it also looks like a moose, so allow your other ideas to inspire new ideas. The circle got me to thinking about what if it's a satellite shape. I know I said pop culture is dumb, but why not throw in a Mickey Mouse. Just keep going with this. Once I'm done with my head's, I'll start on eyes and come up with eye shapes. I'm only doing single eyes here because it's pretty easy to extrapolate and realize that this one will actually be two eyes that look the same. That's a wink. The wink inspired me to do eyelashes and some sunglasses. Instead of sunglasses, what about x-ray glasses? Just keep flying through and it shouldn't take too long, and sometimes what may be helpful is to make notes. This pen is helpful in that regard. So because I may not remember this, because I'm working so quickly, I may not remember that I want these to be spiral when animating, so I'll make that note right here just so that I don't forget it. Just keep going until you've run out of ideas, is the best way to go. Once you're finished with your sketches and pick your favorites, it's time to boot up the nerd box and create the final art in Illustrator or Photoshop. I'll be using Illustrator because that's what's easiest for me. 5. Digitizing: In my previous classes, the poster design class and building character too, I've already had tutorials on how I create vector images from my ink drawings so, check out those classes if you're interested in seeing that part of my process. Instead, let's move on to setting up an Illustrator file in a way that will make it easy for us to export our images later. At this point, I have drawn all of my elements and they're just in an open Illustrator file. From here, I'm going to create a new Illustrator file that, I will dump all of my individual elements into on separate pages. At this point, you'll want to decide whether you want to do small, medium, or large stickers. I always do large just because bigger is better in this instance. If you want to do small, you'll will want to make your page sizes 300 pixels by 300 pixels. If you wanna do medium, you'll do 408 pixels by 408 pixels and if you want to do large, you'll do 618 by 618. So we'll start a new file, create a 618 by 600 pixels and I'm going to go 15 art boards because I have 15 head shapes and I'll do a different file for the heads, the mouse, and the eyes. Once I have that, I click "Okay", and then from here, I just start dropping them in. I'll select each one individually and then go to each page and then if I zero in on the page, and then I can just paste it in and it automatically centers it which makes it pretty easy. Then go to the next page, select the next one. Alternately, you can just bring them all in and then center them from there. Now I'll do the same with the mouth and the eyes, and now for the mouths and there we go, from here you save your files and we can get started on animating some elements. 6. Incorporating Animation: At this point you have all your elements on their own artboards, and if you wanted you could export them into separate images, and start dropping them into Xcode to create your sticker pack. But, instead let's start animating a few of the elements. Animation is fun and it makes your sticker pack more dynamic and enjoyable for the user. Let's go to the eyes and what I like to do is, rearrange the artboards so they're all on a single line. In order to do that I'll do, 15 columns so they're all in one single line. Then I will, click on this and then I'll just duplicate it down. Once you've duplicated it, then take those elements, and just change something about it. It can be pretty subtle, so I'll just rotate this, 45 degrees. Then from there, I'll do it again, I've gotten a little out of whacks so, I'll go in and type that up. It's important to note, make sure that you duplicate a page, don't copy and paste. That way you can make sure that your images fall right in the same exact spot as previous iteration of that animation. Otherwise, it's going to be very difficult for it to blend perfectly, and your animation will end up becoming a little jagged. From there, I will change this into scarlet eyes. Just keep tweaking things until you've animated them in fun and different ways. Next you can go to the mouths and do the same with the mouths. On this one I'm just going to just tweak it a little bit. You don't have to move it too much for it to really stand out. Sometimes subtle little tweaks are all it takes. Then once you've gone through and made all your animations, what I like to do is I like to go to your artboards and just make sure that they're still in the right order. Make sure that all of artboard 1 is together and artboard 2 is together and artboard 3 so when we duplicated artboard 3, we made a copy and just make sure that that is below it, because that's going to save you some time when you export all of these images. On the sticker eyes we made a few of these x-ray specs. I'm going to want to go back and make sure that those are organized properly. Once you have all your animations done make sure you save your file, and we'll move on to exporting the images. 7. Importing into XCode: Once you're done with your animations, we're ready to export. Go to File, Export. Choose the folder that you want to put them in. I suggest making a new folder just so everything is all in one place and it's clean. Make sure that you're exporting as a PNG, select Use Artboards and make sure that all is selected unless there's some that you don't want to include. But we're going to Select All and then go Export. Make sure your screen resolution is at 72. Right here your background color is transparent, and then click "Okay" and it saves them all into that folder. I'll repeat this with the eyes and mouth. Then once I'm done with all of those, then all of my images are ready to be dumped into Xcode to actually create the sticker pack. At this point, we've exported all of our stickers into PNG files, and we want to open up Xcode. Download it if you don't have it, it's a free app. But once you do, open it up, create a new Xcode project, select Sticker Pack Application, select Next. Product name, just name your product. I'm going to name this Skillshare stickers. The team name, you can skip that for now. When you want to submit this to the App Store, this is where you would put in your developer name. Organization Name is typically your own name or the name of your company. Then the Organization Identifier is typically your domain name and it's in reverse domain name notations. My domain name is ledouxville.com, so you will just go com.ledouxville. If your website is hamburger.org, then you will go org.hamburger. Select Next, figure out a place to save them. I'm going to create a new folder on my desktop and name it Skillshare xcode, Create and then it sets it up. These are all defaults that I don't typically mess with. But what you will want to do is over here on the left-hand side where it says Stickers.xcstickers, select that. Up here in the next column over is iMessage App Icon. You want to export icons for your app that would hit on your home screen of your iPhone into all of the various sizes. What we're going to do is go to Sticker Pack here. This is where we drag our stickers into Xcode. I'll go to this, click that. Here are all my stickers. For the static stickers, stickers without animation. You can just select them all and then drag them all right in. Then if you have stickers with animations, which I obviously do. From there, you want to either go up to editor and click "Add Assets New Sticker Sequence." Then you choose all of the assets for one particular sticker. Over here, these are all of my X-ray specs glasses images that I want to compile into an animation. I drag all of those into my Sticker Sequence. Instead of going up to Editor and Add Assets, you can also control click and Add Assets and create new Sticker Sequence. Just go through all of your stickers and add them all to Xcode. Going to blast off and do this pretty quick. One thing if you want, you can just go new Sticker Sequence. That way, all you need to do is just dump them all in, and there I am. I've dumped everything in. I made one extra Sticker Sequence, so I can just remove that. Then from here, I want to make sure that all of my stickers are the right size. I will select all of them and I want them large. Over here on the right, I select Large. At this point now, you want to go in and tweak your animation settings. If you click the play arrow on top of the sticker, it will show you how the animation looks. For me this is going too fast, so I want to slow it down. I might try five and see how that looks. That's too slow, so maybe I'll try nine. That looks good. Go through and do all of that to all of your sticker animations to make sure that you have them looking right. Once you've got all of your animations looking right, then you're going to test out your Sticker Pack. Up here under Sticker Pack extension, select the telephone size that you want to try it out on iPhone or iPad. I'm going to try seven. Go up to Product, go run and it will compile your Sticker Pack into a mock. Then your sample telephone will pop up, select your Skillshare Sticker Pack. Then they'll show up, and here are all of your stickers. Scroll through and find out the one you want. I'm going to do the skeleton. I'll put some X-ray specs on him, some teeth. There you go, it works. Right now, I'm Kate. But you can go over here and choose John and have a conversation with yourself. Make sure that it all works how you want it to work. There it is, you're done. If you want to continue tweaking your stickers at all, you can quit the simulator and just go back and keep tweaking all of your animations and then just rebuild your telephone mock. It's as simple as that. 8. Wrap-Up: Congratulations. You have now designed your very own sticker pack. If you're interested in getting them into the App Store, you'll need to enroll into Apple's developer program and take the necessary steps to submit your app to the store. It's a little involved. It requires you to export various icons into different sizes, which is easy, but then there are also digital certificates, debugging, and some other technical mumbo-jumbo that I don't typically deal with in my day-to-day and just drawing pictures. But there are enough tutorials out there that guide you through the process that, I think, you'll probably be able to do it with very minimal tiers. If a numb skull like me can figure it out, then I'm sure you can, too. In the meantime, post processed images of your concepts and your sketches and your final vector images and all of that to the project gallery so that we can all inspire each other and hopefully push the boundaries of what is possible with digital stickers. Thanks for taking this class, being a part of it, listening to me ramble on. I'm sorry for the onslaught of the alms, but I hope you had a good time and check out my other classes if you haven't already. Thanks.