Transcripts
1. Intro: Hi, my name is Jeremiah Rodriguez. By day I work as a middleware engineering in Provo Utah, but in the off hours, I like to get more creative. I liked to draw. I like to express myself artistically, whether that's through woodworking, sign making, lettering, carving, cooking, grilled cheese sandwiches. I actually wrote a book about grilled cheese sandwiches. Anything where I can make, where I can create even something as simple as doodling. One thing that I really like to do is to take that and measure it with technology to have ways to share what I create in this class, what we're going to look at is taking your art work, taking your doodles and converting those into sticker packs for iPhone and iPad. If you're not familiar with sticker packs, they're a feature that Apple released about a year or two ago for the iPhone and the iPad. The basically lets a person add to the existing emojis when they're using iMessage to message somebody, of course, iPhone and iPad come with tons of emojis built in. Sticker packs in iMessage let somebody create their own artwork of basically whatever you want and add that to iMessage as an iMessage app, in this case a sticker pack. You can submit those to the App Store so that other people can download your artwork and use it. You can sell it, get a little extra income for that artwork that you've created. My best-performing sticker pack, beady make beard face, was actually doing better than the sticker pack that Ellen DeGeneres released for about a week. Eventually she passed me, but for a little bit I was beating her and that's awesome. If you would like to take some of your own doodles, your own artwork, your own pictures, and create sticker packs that you can use yourself or that you can submit to the App Store. Follow along in this class and I'll show you how to do it.
2. Software and Hardware: One of the things that we need to talk about is what you're actually going to need to be able to do this, now obviously you need an idea. You're going to have to come up with some type of doodle, some artwork, something that you can take from a drawn form and convert that to digital. For the things you're going to need on the hardware side to actually get an app published in the App Store, you do need to have a Mac. It's important to note that it doesn't need to be like a top of the line Mac Pro, pretty much any recent Mac is going to work, whether it's a Mac Mini, MacBook Pro, MacBook, MacBook Air, any of those are going to work. Basically, if you can run the latest version of Mac OS, which right now is High Sierra, if you can run that, you're going to be able to publish to the App Store. Now to actually get your artwork created, you don't have to have a Mac for that. On several of my sticker packs, I actually did the artwork on a Windows computer because I had a better setup at the time. It's just that when you go to prepare your file to actually upload the Apple, that's when it's going to be a Mac. Now along with that, you're also going to need to install Xcode. Xcode is a program that Apple has created for developers. Whether you're writing programs for the Mac, whether you're writing apps for the iPad or iPhone, Xcode is Apple's tool for doing that. That tool is necessary to get your images all packaged together the way that Apple wants them, to get them ready for the App Store. It is a free tool. Now that's not to say that you actually need to know how to program, to submit a sticker pack you actually don't need to know how to write any code at all, and I'll walk you through all of the steps. Now it doesn't need to be the absolute latest version of Xcode usually, you're generally going to want the newest version of Xcode for sticker packs, I believe you can go as far back as Xcode 8, and Apple will still accept those submissions, but usually it's best to just go with whatever the latest released version is. It's important to not use the Beta versions because generally projects submitted with a Beta version, are not going to be accepted until that Xcode version is in full release. Now the other thing that you're going to need is some type of art program for your computer. This is true whether you're going to do your art on the Mac or on a Windows computer. Personally, I like to use Adobe Photoshop and Adobe Illustrator, but those are by no means required. Free tools like Inkscape and Gimp would work. There are several competitors to Photoshop and Illustrator that would also work just fine. The main thing that you're after is that you need to be able to save your image as a PNG with transparency. Now that's not required, Apple will let you submit JPEGs and GIFs but you're going to get the best result with a PNG. If you want to be able to take that image as a sticker and apply it over another message, that's where it needs to support transparency. Now with this the version of these programs doesn't really matter that much. The version of Illustrator and Photoshop that I've done most of my sticker pack work in, I think I bought six or seven years ago. Still works just fine. Now if you had to pick between Photoshop and Illustrator, there it depends on what your end goal is. There is a big difference between those two programs. Photoshop is raster-based, Illustrator is vector-based. The difference being in Illustrator, those images are basically math equations to get those lines drawn and they're infinitely scalable up and down, in Photoshop, it isn't. If you take a small image and blow away up, it's going to look pixelated. The same thing can happen with your artwork, where this makes a difference for taking your doodles and your artwork and converting them to stickers is, for me personally in Photoshop, I find it easier to draw because I can treat my stylus or my mouse or whatever I'm using, I can treat it more like an actual pencil or paintbrush, whereas in Illustrator I feel like that's a little bit more constrained. Depending on what your end goal is, what you actually want your image to look like, either one will work, it just depends on what the look is that you're going for. I'll show you some examples. My first sticker pack, Beardy McBeardface, was done in Illustrator, but another one of mine called Jellymojis, this one was done completely in Photoshop. There you just have to look at your work and decide which look you're going for. For this class, I'm going to use Photoshop because I feel like you're able to get more of a genuine doodle look in Photoshop. But that's up to you.
3. Installing Xcode: Okay. Let's go ahead and install Xcode. Now this is one that can take a little while depending on the speed of your Internet connection because it is a big file. To do that, you want to open up your App Store, and then in the App Store, let's take a look under apps made by Apple. Scroll down, and here we have Xcode, and if we click on Xcode, look over here on the right, it's over five gigs. Like I said, depending on the speed of your Internet connection, it might take a little while. Go ahead and click "Install", and if you're not on Google Fiber, now would be a good time to go grab a snack. Okay. It looks like Xcode has finished downloading and installing. Let's go ahead and click "Open". You will need to agree to the license agreement. It will want your password. Now we got to wait for it to finish it in its last bid of install. Okay. So Xcode is now open. There's a little bit more that we still have to do to have it fully set up and ready to go. To do that, let's go ahead and click on "Create a new Xcode project", and this is going to be your main starting point for anything that you do in Xcode. They've already got several templates setup for various types of applications that you could make using Xcode. For our purposes, we want to make sure that we have iOS selected, and then down here under application, just choose Sticker Pack App. Go ahead and hit "Next", here where it says product name, that's what's going to show up in the App Store. We can go ahead and just start with whatever we want. But one thing you do have to keep in mind is, there is the potential that you may have to come back and change this if somebody else is already taken the name that you want to use. Just be prepared that the naming part of this process can sometimes be the most frustrating part of the whole thing. Because there are times where you think of a name, you try, it's taken, you come up with another one, taken, varying on that one taken, and you may end up having to go with something completely different from what you had originally planned. For mine since he's shaped like a gum drop, I think I'm going to call this Mr. Gum Drop. Kind of dumb, but doesn't matter. Like I said, we can always change this later. Your organization identifier, this is basically at once a website with a name in reverse order. When you do publish to the App Store, you do have to have some sort of a website, and it doesn't need to be anything complicated. You could set up a free website on something like wordpress.com or Wix or Squarespace, whatever you want. My businesses run under bitsandwood.com. I'm going to put com, because they want this in reverse, com.bitsandwood, and the bundle identifier, it's just going to fill that in for you. Now the team where it says, "Add Account," this is where you would specify your developer account. One of the things that you have to have in place in order to be able to submit and publish your sticker pack on the iMessage App Store, is an Apple Developer license. Unfortunately, this part isn't free, but if you do plan on trying to sell your sticker packs, you can think of it as what could potentially be a good investment. It's $99 a year and there's no way around that if you want it on the App Store. I'm going to go ahead and enter mine. Okay. So I've now got it connected to my developer account. Once you've got it connected, another thing that you have to do is you have to have your certificate, and basically what the certificate is, is this is a way for your installation of Xcode to authenticate with Apple's iTunes servers when you go to upload your projects. Basically it's a way of showing that you are who you say you are. I've just recently wiped out everything on this Mac and reinstalled the operating system. None of my certificate stuff is set up. I did that on purpose, so we can start from scratch. Going to hit "Manage Certificates". You'll notice I don't have any sign in certificates currently. Okay. I've got a distribution cert, it's your development cert. I don't do any Mac developments, so I'm not going to worry about those. Lastly, the developer ID. If you miss that, basically all you have to do is just click the down arrow and select each thing that you need to create a certificate for. It's basically going to do the rest. Go ahead and hit "Done", and then let's go ahead and close out of here. Now that we've associated our Xcode install with our developer account, we can come up here and select our team. In my case, I'm an individual developer, so I'm not really a team, but go ahead and hit next. What it's asking for here is where you want to save this project. It is going to give you the option to create a Git repository. If you were actually doing code development, I would probably do that, but in this case we're not. I'm going to uncheck that, and then I like to create a folder under documents that I just call Dev. Here you can see a bunch of other apps and things I've done in the past. I'm going to go ahead and hit "New Folder". We're going to call this Mr. Gum Drop. Create that folder and then hit "Create". This will create the project. Now, okay. From here, we're basically ready to go. There are a lot of other options that you have available here. We're not going to worry about most of this. One that can be important for your deployment target. I generally leave it as whatever the newest is, what this is referring to is whatever version of iOS, somebody might be running. For somebody that's got relatively new iPhone, if they've got the eight or the 10, whatever, they're going to be running, the latest version of iOS. You can go with that. But Xcode will allow you to deploy to older versions, and you can see here it goes all the way back to Version 8. All right? From this screen we're basically ready to go. We're ready to start importing our images, and we can start testing and getting everything ready to go.
4. Getting an Apple Developer Account: So one of the things you're going to need in order to be able to publish is an Apple Developer account. To create an Apple Developer account, you need to have an Apple ID, which if you're already running a Mac, you probably already have an Apple ID and you can use the same one. You don't have to make a new one. You're going to want to go to developer.apple.com. Click on account. If you don't already have an Apple ID or if you want to make a new one, just go ahead and click on create Apple ID. If you do already have an Apple ID that you want to use as your developer account. Go ahead and put in your login information and then sign in. Then you'll notice down here at the bottom it says join the Apple Developer Program. So you're going to want to click on that. At the upper right, click enroll. You need to pick whether you're enrolling as an individual or as a business. If you're enrolling as a business to do that, you have to already be set up as an LLC or something like that and take your tax ID number and request a D-U-N-S number. Otherwise you can't enroll as a business, you would enroll just as an individual, which is just fine. As an individual you can still sell. The big difference here is as an individual within the App Store where the developer name is shown, it's going to show your first and last name. It's not going to show your phone number, but your first and last name will be shown. If you enroll as an organization, it's going to show your legal business name instead. So just something to think about. So from here, you will need a website. It doesn't have to be anything fancy. It could be something on WordPress, doesn't matter. But you need a site so that you can have a support page basically. For a sticker pack, there's not really going to be any support to do. Apple is going to require you to have some a web page dedicated to this app within your website. So just scroll to the bottom, hit start your enrollment. Choose what type of entity you're going to be. If you're going to be an individual or a company, whatever. I'm just going to choose individual, hit continue. Then you're going to have to put in your contact information. You have to accept the developer license agreement, agree to the agreement, and continue. Make sure that that's all correct. This is the part where you're going to have to pay. It is $99 a year. The automatic renewal, you don't have to do that. You can manually renew if you want. Personally, I think it's easier to just do the auto renew. So just select that and you purchase and it's going to charge to whatever credit card you have setup with your Apple ID. Once that's all processed, you're officially an Apple developer, you're ready. You're now able to submit your apps and your sticker packs to the App Store. So you're ready to rock and roll.
5. Developing Project Ideas: The title of the class is turning your doodles into iOS sticker packs. To do that, of course you're going to need some doodles. Let's talk about that for a second. Now as the term doodle implies, it's not, you're not going for a full-on Michelangelo, like it doesn't need to be an immaculate work of art. It just needs to be some silly idea. For me, I find it helpful to doodle, to draw, to sketch a lot. Working in an IT office environment like I do there's a lot of conference calls and things like that, that if we're being honest, there are times where there's not much for him to do. You don't really need to be paying a whole lot of attention, just listen for your name, but that does give you time to draw. I like to have a sketch pad with me all the time. Whether it's just a little notebook in my pocket, like a field notes or something like this. I really love these types, these, or mole skins because they're small enough. You can just stick them in your pocket and anytime you have time waiting for a bus, sitting in the bookstore, grabbing breakfast at your favorite Malachi place, you've got time to draw, and by having that with you all the time, then anytime an idea hits you, you can hurry and jot it down, dry it out, at least get started. Now when I have an idea that I think is a good one and I want to maybe expand on and I want to iterate on it, then I'll usually go for more of a full-size sketchbook. Now for a sticker pack, the size of your sketch isn't critically important because that's going to be, the actual size is going to be done in the computer. But the thing I like with a full-size sketchbook is I've got lots of canvas to go through several different ideas in one place and look at those different ideas as I'm working through them and for something like a sticker pack, I think that's important because if you want to treat it like normal emojis, you have to have more than one face. If you were going to draw a silly face and have that be the basis of whatever your sticker pack is going to be. You need to have more than one expression. You need to have your smiles and your frowns and you're laughing and you're angry and you're sad and you're sick and all of those different things. You need room to draw and you need to draw a lot. It doesn't really matter what you draw with so much. I'd like to do my initial doodles and sketches and pencil. But when I'm getting it ready to go digital, I do like to switch to ink just because a nice dark pen is going to scam better than a pencil line is. When I'm working on getting a whole set of stickers ready to go and I want to have all of those different facial expressions, those moods shown. I like to keep my phone. I like to have my phone at my side and just open up i message, click on the emojis and it scroll through them just to make sure I'm not forgetting anything and sometimes those will give me ideas of different ways to draw an expression. Just to give you an example, I'm going to start out. I've had a couple of ideas in my head. I don't want to show you what's in my book. I don't want you stealing my ideas. Real quick, I'm just going to dry out a couple of different ideas and then start working on getting different emojis, different expressions of that particular doodle put down. Since we are talking about doodles. I think a common thing that people probably wonder is like, does my art actually have to be good? The answer is no. Some of the best performing sticker packs out there if you look at them from a purely artistic standpoint in the quality of the drawing that's done. Some of them are really terrible. But there's still something neat about them. Something cute or endearing.How ever you want to phrase that and people use them, people buy them. It's more about having something unique and I think something that speaks to whatever it is you're trying to show whatever type of emotion or style or whatever that you want to show especially in this case where we're going more for a doodle look. That means we're not, we're not trying to go for fine art. We're just, we're just trying to have fun with whatever the ideas are that we come up with. My first one here is a gum drop shape. It's alright. For me, I do like to keep the face, the actual expressions on their face rather simple. When you're trying to figure out what to draw. I like to go for things that just generally interest me, whether it's an avocado because avocados are awesome, or grilled cheese sandwiches because those are also awesome. Really just whatever speaks to you. Now with these few doodles that I have here, if I'm looking at what I'm going to be able to digitize most accurately. This one is going to be the most difficult if I don't want to do some cleanup of it later. Ones like these where I've got a nice solid dark lines. These are going to be easier to do. When you get to this point, if you are wanting to go digital, If this is when you're wanting to take digital, this is where it's nice to come back with some type of black pen, black marker. I'm using a co-pic marker on this guy there that. This one here would basically has, as be ready to sketch. Now I could come back on the ink is dry and erase some of these extra pencil lines that will make some of the digital clean up a little bit easier if you do this. So far, I'm liking the gum drop look and so I think that's what I'm going to go with. Sometimes I find it also helpful to just to one side sketch some of the basic emotions that I want to draw. This just helps for when you're working on your actual models that you want to use. This helps you to not forget any. A common question is, how many stickers do I actually need to come up with to have a complete sticker pack? The answer is whatever you want. Apple doesn't really care. They don't have a minimum or a maximum. I find it handy sometimes to have this screen up just to help remind me of some of the common emojis that are use so I can copy a lot of the, the faces and expressions that are shown. Here we've got just a little over 20, I think I counted 22 different faces and happy with this gum drop look. Now I'm going to take that, duplicated that many times and throw all these faces him.
6. Tips On Content: There are a couple of things to watch out for as well when you're picking your content, when you're picking your subject. You want to stay away from things that are copyrighted because that's going to get rejected, and even if they don't, the copyright holder can come after you. Just make sure your stuff is original and unique, that it's your own creation. You want to keep your stuff unique. You want to keep it original, and you want to try to make sure you've got some value there for the customer. Don't really limit yourself on the number of stickers that you make for an individual sticker pack. People prefer more rather than less, even though you're probably only charging $0.99. I think it's good to shoot for at least 25-30 stickers at a minimum, I'd gone as high as like, I think 72 in one of my sticker packs.
7. All the Moods: Now there's one kind of cheat that you can do here if you want. You can take your time and draw just one body, one face, one head, whatever it is you're going for, draw one really well and you can draw all of your expressions separate, draw all of those really well and then once you get this into Photoshop, you can grab this face, put it on, save it as an image, delete it, grab this face, put it on, save it, and so on and go through and do all of them and then you're not having to draw the body over and over and over. Now if you do that, one thing that I like to do to make them distinct, is to have each one be maybe a slightly different color, a different flavor like for mine, I'm going for a gum drop shape those usually come in several different colors. So I may try to do these in several different colors and when I do that, I try to pick a color that is going to somehow go along with the emotion being expressed. So like this one and this one that are not feeling well, sick, I'd probably go for some greenish-blue body shape. If it was just a happy face or some of these more common ones. I like using a yellow there for faces that are more sad or crying. I like to go for some blue, angry faces. I think do really well with a darker orange or red. Surprise could be like a light blue, something muted colors. That's just one thing to think about and if you're having trouble coming up with faces that are expressing a certain emotion that you want to show; one resource that I find to be really handy is just go look at your Sunday comics or in a comic book. The artist in those pages are generally very good at conveying emotion with a very simple set of attributes on the face. So you don't have to get extremely detailed. Mine where I'm going in this case, going very, very simple. Just copying the emojis that are shown on my phone is good enough. So just another thing to think about. In this case, I think the route I'm going to go, instead of drawing 22 individual bodies, I'm going to go for the tip I was just mentioning, I'm going to draw one that I really like and then I'm going to redraw these faces a little bit bigger and then once the sketching and the drawing is complete, then I'll come back with a pen, ink those up, get some nice dark lines and then we'll be ready to scan.
8. Perfect Your Doodles: All right. So to prep for scanning, I'm going to draw this guy, like I said, but I'm going to go a little bit bigger. Okay. I think for the body, the head of my character, I think this is going to work pretty well. Get some nice dark lines, I'm going to go with the idea of drawing the faces separate just so I can show how that's done, so I'm not going to draw in any expression on this particular one. Another advantage of doing it this way is if you're not sure, do you want a little small face or do you want a larger face that's going to fill his whole body. By doing it this way, you don't have to decide yet, you can do that all on the computer. So I'm going to call this one good as far as inking goes, and I still want to clean up these extra lines that the ink didn't cover, because that'll just be one less thing I have to clean up in photoshop. For the expressions, I'm going to draw them a little bit bigger than what I have here, and make sure and give yourself some space in between each face just so that it's easy to keep them separate when you go into Photoshop. I did a few extra, got 25 here. So now that I'm happy with the outlines on these, I'm going to go ahead and fill them in. This time I'm going to use a pygmy marker, this ones are 03. Usually, I prefer something actually a little bit thicker than this, like a 1.0 but couldn't find my other markers. So there we go, we've got 25 faces sketched in ink. Now, as far as how many of these do you actually need to have a complete sticker set. Apple doesn't really have a requirement, you can do as many or as few as you want. I've found it's generally better to lean towards more, the more ideas you can come up with, the better value the customer is going to feel like they're getting, so the better chance that they'll actually sell. I've got 25 here. Ideally, I'd actually like to double that, but this is sufficient for what we need right now. I like to set probably 30 as my minimum, 30 different stickers for each sticker pack. I've had some vary quite a bit, I think I've had some as low as 20 and I think the most I've done so far is somewhere around 75 and I discharged $0.99 for all of mine. So now I will erase an ink has had long enough to dry. At this point, we are ready to digitize.
9. Digitize Your Doodles: Now that we have the doodle done, we need to get that digitized. We need to get it into the computer. There's a couple of different ways to do this. Some simple, some a little more complicated and depending on your specific artwork, it may not matter how you do it. Let me clarify that. With a doodle that I've put together for this, I've got one body and several different faces. When I get that into Photoshop, I'm going to use that almost like tracing paper and I'm going to draw over it so that I've got a nice clean digital lines and that'll be what goes into the final product. If you've really nailed your Doodle, you've got it exactly the way you want. Then maybe you don't want to do that. Maybe you want to go with exactly the lines that you had on the paper. In that case, you do need to be a little more careful about how you get it into the computer because you're going to want as higher quality scan as you can get. If you're just going to redraw over it, you really just need to reference. The easiest way to get your scanned into the computer is just to grab your cell phone, stand over your picture, get it nice and centered. You want to try to be as vertical over your drawing as you can, snap a couple pictures, e-mail those to yourself, or just import them, whatever is easiest for you. You can load those into Photoshop, You're on your way. Now another thing that you can do, that's maybe slightly better than that, but not so far as using a scanner is to use a scanning app. I've been playing with one that's called scanner and it does a pretty good job at taking a picture of your drawing, and then you can clean things up so that you really just left with the lines that you've put on the paper and not so much the grain of the paper and that thing. There's several of them out there though. Then probably the best way, especially if you want to preserve as much of your original line art as you can is just to use a scanner. I'm going to show you how I do that. You don't have to have anything fancy. My scanner is just this ancient cannon multi-function thing that I've had for years and years. But it does the job just fine. To get started, we're going to take our Doodle, throw that thing on their face art side down, and usually most scanners are going to have some orientation mark and that's what it treats as zero, zero. Just scoot your drawing up there, close the lid. Once you've got your document in the scanner, you can either use the software that came with your scanner or I'm just going to use Apple's image capture. The first thing you're going to want to do, is you need to tell the software where you want your scan to go. I've got Mr. Gum Drop already in the list here, but you could click Other and then browse through your system to show where exactly you want to save it. Go ahead and select Mr. Gum Drop, Show Details. This will get the scanner started giving you a preview. I'm going to change it to black and white and I'm going to bump the resolution up to 300. Now, one note on this is the higher the resolution, the better quality scan you're going to get. If you really wanted to preserve your original lines, you're going to want to go higher on that end. If you just want to use this as a rough reference, then you could of course go significantly lower and still end up fine. I'm going to turn off the auto selection. Because I wanted to just grab the whole thing. I've got the auto selection off actually going to rotate this, 90 degrees hit "Scan." It's going to ask me to select the area to scan. I want that main head right there. Button, hit scan and we wait. If we go look at that folder and Mr. Gum Drop, there we go. We've got the head, the body. Now I'll go ahead and put in the other art work. Now I've got my second sheet, the one that had all of the facial expressions in the scanner, and let's scan and grab the area that I want. Now we've got both items in there. Now we've got our base images in the computer. If you had drawn several pages worth, of course you would just rinse and repeat over and over until you had everything in the computer. The next step is to clean this up in Photoshop.
10. Cleaning Up In Photoshop: [MUSIC] Before we get too far in Photoshop or whatever image editing program you're going to use. There's a couple of things we need to go over real quick and review. Number one, our end goal is to save this as a PNG. That way we can have transparency. You can take your sticker, you can overlay it over an existing text. Whatever you see behind there will show around your image rather than just being a big, looking like you put a piece of paper over the top of it and blocking things out, unless that's what you're going for. Now secondly, beyond just the format, we have to also pay attention to the sides. Apple is going to classify all of the images that you use in a sticker pack as either small, medium, or large. Small is going to be 300 by 300 pixels, medium 408 by 408, and large is going to be 618 by 618. I like to prepare everything as if it were going to be 618. Then from there when I go to export my image, I can keep it that size, I can shrink it down depending on what I want it to be. If it's something with a lot of detail, you might not want to go for really small image because you're going to lose some of that detail in how small it is shown on the screen. But if it was something just like the built-in emojis, does not really need to be very big to get the point across. You just need it big enough to get that detail. Personally, I like to have mine a little bit larger. I skew more towards the 618 for just about everything. Unless it was something that just really felt like it needed to be small to get the right feel that you are going for across. On that note, I am just going to open a new document. I'm going to set my size as 618 by 618. I'm going to use that same 300 pixels per inch. On the background contents, you're going to make it a little bit easier for yourself if you go ahead and just set that as transparent. Then I'm going to go ahead and click "Create". Now I have my workspace that I'm going to need. Now I need to bring in the other images. We're going to go ahead and open up Mr. Gum Drop, I am going to grab these two items that we had scanned in, we're going to go ahead and open both of those. We can see we've got both things here. Now on this one, I'm going to go ahead and rotate this 90 degrees clockwise. This one's already at 90 degrees. Because if you recall when I scanned it and I told it to rotate it 90 degrees and I forgot to do that on the second one. Now at this stage where it's time to clean up, you can do all of this with just your mouse. I use one of these digital drawing tablets just because then you're drawing with a stylus. For me it's a more natural feel. It's closer to what you're going to get with your pen and pencil. But this is by no means required. You can actually get some of these pretty cheap. You can go with really high end WACC cams. This sci-fi, I don't even know how to pronounce this one. I found it on Amazon. Ycom also has their bamboo line, which are fairly inexpensive. They're much smaller, but for this type of work, they work just fine. First off, I want to zoom in a little bit and then we're going to make some adjustments here. Click the brightness and contrast and crank up your brightness and your contrast. The reason you're doing that is you're trying to get rid of as much of the other errant details that are on the page, the smudges and erase remarks and things like that. Now that we have our adjustments made, we need to clean up. We need to get rid of all of this coloring in the background. This part is a little more optional, but I'm still going to get rid of it. Just cause I want to get rid of these little specs and we're going to fill this in with color later. One thing that you might jump to is, well, I can just grab my magic wand and select all of this and then hit Delete. But if you do that, then it's going to want to try to refill that. That's not something that we want to do, we want to leave this transparent. I'm just going to cancel out here and deselect this, so on the Mac Command + D. I'm going to switch to come down here to your eraser. I'm going to choose the background eraser tool. I already have the brush set really big. But what I'm going to do is just clean up a little bit of this. Now I'm going to switch back to the magic wand, select all this area, hit delete. Now it's deleted it and made it match what we had just previously done with the background eraser. Also going to select on the inside, hit delete there. Now we're really just left with our black line. Now in my case, I don't really want to keep my original line. I want to redraw this. But you could keep that if you wanted to, it would be perfectly acceptable if you wanted to have more of that grain look that you can already see here, that's leftover from the paper and the scanning process. What I'm going to do though, let's create a new layer. I'm going to lock my original layer. You don't have to lock it, but every time I don't I end up screwing something up, so just to make it edit proof. Come back to our active layer. I'm going to switch to my paintbrush, got the brush tool. I'm going to modify this brush a little bit. I want the hardness at a 100 percent. I'll go up a couple more pixels, let's try 15,15 looks good. I want my primary color as black. Now I'm just going to come in and trace over my original lines. Like I said, you don't have to have a drawing tablet to do this. It can be done just with a pencil. Sorry, it can be done with just a mouse. I just find this easier, a little more accurate and a little more natural to go this way. I've drawn that, and so just to get a better idea of how this should look, I'm going to go ahead and hide my base layer. Now we're left with just the drawing. Because of the squares that are left to show the transparency. One thing that can help to clear this up, if you go ahead and add another layer and drop it right in between those two layers, grab your paint bucket and switchover to white. You can fill that whole layer with white and you get a better idea of how smooth or not smooth your lines are. I'm going to keep that here temporarily. Now if I want, I can come back in here, we want to make sure and switch back to our paintbrush though, and our color is back. I can come back in and add more of a sketched look to this, because for this one, I don't really want it to be perfect lines, like you could do an illustrator. Depending on the subject, I mean, sometimes you may prefer that. Like I said, it really just depends on the look that you're going for. I want this to be a little more whimsical, make it look a little bit more like one of my kids drew it. This way we are going to end up with a little bit of variability in the line thickness, but I like that. I think that's good. From here, we're going to go ahead and hide this background. You want to do a Command + A or Edit Select All and a Command + C to copy. Now we're grabbing this whole layer and then come back into that 618 by 618 project that we opened. In here I'm going to create a new layer, this bottom layer, I'm just going to lock that. That's going to be our main transparency. This layer is going to be our coloring layer. I'm going to tap that and just type in coloring to name it. For now I'm going to lock that layer, add one more layer. This will be our head shape. I'm going to label that real quick. Then that image that we just copied, go ahead and paste that. Now of course it doesn't fit right now because we took something much larger and we're putting it into a smaller space. If you hit Command + T, I believe Control + T for Windows, that'll put you in transform mode. Take your arrow, go right up to one of these corner blocks, hold down Shift so that you can keep your aspect ratio and just drag that down a bit. What you're doing is shrinking that. You can really get it whatever size you want. In my case, since I want this image to really be the only thing in this space. If I wanted to I could put in a dozen at this, all in this one thing and one sticker would have a dozen of those things. Like with everything we see in here, it's going to equal one sticker. I don't want that. I want to treat this more like an emoji. I'm going to do just to one and size it just about as big as I can, and then drag it around until it's centered. That looks good to me. I'm going to go ahead and lock that layer and then just hit Enter to lock in that change. Now, I'm going to lock this layer as well, and we need one more layer for the facial expression. Now we need to go back to our other image that has all of our little faces. Since we did all of them in one shot, there's a few different things we can do here. What I'm going to do, I think this will be the fastest. I'm going to zoom in a little bit. Then like we did before, I'm going to go to Image and Adjustments, Brightness and Contrast. I'm going to crank up that brightness, crank up that contrast. That seems to get rid of most of the blemishes, not all. Go ahead and hit Okay on that. Now I'm going to come in to my background eraser like I did before and just get rid of some of this. Then switch over to my magic wand, select all of that, let's see how it does. Now I'm just going to go to some of these other areas. If you hold down Shift, you can select more than one at a time. Delete those, for some of these finer ones we're going to have to zoom in even a little bit more. There we've basically done it. Now, one thing you need to make a decision on here, and it's not vital, but you have to decide, do I want to redraw my faces here and do all of them at once or do I want to separate these out? Personally, I like to separate it out. What I'm going to do here is choose the rectangular marquee tool. I'm just going to select this smiley face here, Control + C to copy. Come back to our project, make sure I'm on that expression layer. Then I'm going to go ahead and paste that. Do my Control + T again. Now I'm just going to try to size this however I want it to look for final sticker. I'm liking that right there, so then I hit enter to save that change. Now of course, this is the original drawing. This is a new layer that was done in Photoshop and they don't match. What I'm going to do here is create one more layer. I'll call this maybe clean expression, this will just be the one that I'm going to draw. I'm going to lock the expression and make sure clean expression is highlighted. Switch back over to our paintbrush, on black. We'll try this brush, this will work for the eyes, for the mouth I might want to go a little bit smaller. Let's just see, like that. That looks good. I think that works. Now we want to come over to the expression layer that we had locked that original drawing, erase that, and this is basically what we have. The last thing we need to do here is this needs to be colored.
11. Playing With Color: Our cleaned up expression, I'm going to lock that. This layer that has our Expression, the one that we scanned in, I'm going to unlock that. I'm going to make this layer visible again, make sure it's selected. Rectangular selection tool, I'm going to grab that piece that we had imported before and just delete that. But I want to keep the layer, because since we're going to reuse this body, we can reuse basically all of these layers for everything else that we need to do. I just want to keep that one there so that I don't need to create it again. I'm going to go ahead and lock that again, bring the face layer back. Now, before we color this, there's two ways we can do it. There's probably more than two, but two that come to mind. One is, on this layer that I have down here underneath the head shape, I can just grab the paintbrush and just start coloring in whatever color I want, and just keep it inside of these lines. It will be good. Actually, one thing I want to talk about real quick. If you're not familiar with Photoshop or some of these other image editing tools that let you use layers, It's an important concept to understand, because it gives you a lot of power in how you edit and manipulate your image. Basically, you want to think of it as multiple sheets of tracing paper, and you have all of these stacked on top of each other. Anything that's higher than something below it, that's higher up in the hierarchy, it's going to be on top of whatever is beneath it, so you can use that to your benefit to add color, and shadow, and things at different layers, as opposed to having them all on the same layer. The advantage that gives you is, if you decide, there's one thing that's in here, I hate it. If you had that all on one image, you're stuck, but if it's on separate layers, you can grab that one layer discard it, edit it, whatever you want without disturbing anything else. Back to work. The other thing that we can do here, this is because I have an object here that is completely closed. Another thing I can do is grab this layer that has the head shape. If I just drag that down over the new layer button, it makes a copy. The reason that's important, now I can take this copy. I'm going to drag it beneath the actual outline of the head. I'm going to remove the lock. What this allows me to do is take the paint and bucket tool. Now, I can come over here to the paint swatches and pick something different. For a happy one, I'm going to choose a light yellow. Let's see how this looks. Come over here, and there we go. See, it's filled in all of the edges perfectly, and that's because we took this outline, made a copy of it. Since that outline is sealed, it's going to use that as a constraint. It's going to keep all of that paint within those lines. This way, we don't have to go in and, actually, dry in all of the color. In this case, that's a lot easier, a lot quicker. That's what I'm going to do. It's going help us go a lot quicker to finish this particular project. Basically, this picture, this guy, this one sticker is done, so we need to save it. We're going to go to file. With these, I like to save two copies. I like to save the Photoshop project file, and then the actual file that you are going to use. The reason why is, let's say you're in a group, you're going, you're getting all of these done. You make a mistake that you don't notice. If you haven't saved that project file, you're either going to have to edit your final image which has never advisable, or you're going to have to go back and create the project from scratch. If you save one of each, you'll have one ready to throw into Xcode, and you'll have one as a backup that you can make changes to later. I'm going to hit "Save as" for inner Mr. Gum Drop folder. I'm going to go ahead and create a new folder here, and just call this PSDs, meaning this is where all of my Photoshop project files are going to go, and I'm going to call this gumdrop1. I'm going to keep it as the layers so that I could come back and make changes individually if I wanted to. I'm going to save that. I'm going ahead and hit "Okay". Now, I'm going to come back to file. I'm going to go to Export. You can go with the newer export tool if you want, or this Quick Export as PNG. Most of my time in Photoshop has been in Photoshop CS5.5 from eight years ago. I like to go with the Legacy one. You can go with whichever one you prefer. Up here under the format type, I'm going to choose PNG-24. I want to make sure that transparency is selected. I want to make sure I'm in 618 by 618. This is part of the reason I wanted to save the Photoshop project file. When we get to the testing phase, if I go with all the large size of 618 by 618 pixels, and then I decide that's too big, I can come back to my original document. If I wanted to go with the 408 by 408, I could just come down here and change that dimension, and it's going to resize it. It's going to look perfect. For now though, I'm going to leave it at 618. I'm going to go ahead and click "Save". I'm going to create another folder that I'm just going to call Final Images. You can call it whatever you want. This is just to help keep it organized. Hit "Create" on that. I'm going to keep it with the same name so that I can cross reference that if I need to. You could make your project files a different name than your final images. But If you have to go back and make a change, that's going to be tricky. Go ahead and hit "Save". Image number 1 is done. To get this ready for the next piece, now we're ready to start on the second one. Now, you're going to see the speed advantage of creating just one body and multiple faces. Now, we can come back to the faces page, grab our selection tool. I want to go with this silly one here. Grab that Ctrl C or Command C. Come back here to our project file. Click on our "Expression" layer. I'm going to unlock that. Paste this in, Command T to transform. You'll notice I've left that original face in there. The reason why is now that I'm bringing in this new face, I can look at that as a size reference, so that I can keep a consistent scale between all of the faces that I'm going to make. I like that. I'm going to move it off to the side a little. Save that. Then I'm going to go ahead and lock that layer. I'm going to come back to the clean layer, unlock that. Again, with our selection tool, grab that face that we had just drawn, delete it, Command D to deselect. Back to our paintbrush, fix our colors. That is too big. Let's drop that back down. I think I used 15 before, so let's try that again. I'm going to zoom in a little. I'm going to do the pupils first. On this one, one's going to be bigger than the other. Because for this one, I'm wanting this to be a crazy face, so we're going to try that. Then our outline, that's a little too heavy. I'm going to drop this down to a nine. Let's see how this looks. That already looks a lot better. I think that'll work. Okay, got that done. I'm going to come back to that expression layer and hide it. You'll notice here in this area right here that's not very clean. Let me come back to my clean layer. I'm going to fill some of that in just a little bit. You may not even be able to tell once you see this on an iPhone screen, but it's not hard to do. One difference we have on this face, and this is why I wanted to pick this one for the next piece is our first face. We didn't really have to color, the expression itself. It was just simple lines. There was no enclosed areas. With this one, we have eyeballs, we have teeth, we have a tongue, we have an open mouth. Those need to be colored. I'm going to copy a trick I showed you on the previous one. We're going to take this clean layer. We're going to drag it down to the new layer button to get a copy. We're going to take that copy, drag that layer beneath the clean layer. We're going to use this one to color. We're going to go back and choose our paint bucket. We already have white selected down here, so we're just going to switch. I'm also going to make sure that the clean layer is locked just in case. Come back to our expression layer, boom, all whites are done. The tongue, I'm going to go for some pink, but not too crazy. This pastelish pink. Let's try that. That's okay. Wants something a little bit lighter, so if I switch over to the color palette, I can modify that color a little bit. There. I like that better. Let's go back to our color swatches. Look for something brownish. One thing you'll notice here, and this is why I did a separate layer is you see how around the edges we've got these spots where it didn't quite fill it in. This is one of the things you just have to deal with when you're using Photoshop instead of Illustrator, because you're going to get more of these blends in between the lines because it's pixel based, it's not vector-based, but because we have two separate layers, this is super easy to fix. You just go up, switch from your paint bucket to your paintbrush. We haven't changed colors, we still have that selected. We made sure that we're on our layer beneath, so we can paint on this one. The layer on top can help to hide any imperfections. I can come right on along here alongside this side of the mouth and just paint right over this. Notice I don't have to be careful, but on the top, you're not seeing any over paint into that black area, and that's because we have this other layer on top. So now, if we zoom out, I think that works. One place where you would have to be careful if you decided, I don't really like the placement of that phase, I want to move it. This face is actually made up of two layers currently. If you try to move one, I'll just show you. I'll unlock the top, grab that, grab the Move tool. Look what happened. It looks like crap. It looks terrible. So let's undo that. There is a way around this though. Hold down, click one of those layers. Hold down Command, click the other layer. I've got those two layers selected. Right-click. Choose Merge Layers, they're now one layer, and [inaudible] grab that same Move tool. Make sure I have that new layer selected. I can move that around wherever I want. Those two layers have been compressed together now. It's all one layer. I can move it around however I want. Before you do that though, you want to make sure that you're happy with the layers that you have because, if you needed to do that little paint trick again, it's not going to work now. You're going to have to do a couple of undoes to be able to separate those layers again. Just make sure you nail that part first. I'm going to put this about right there. Call that good. Let's go ahead and save this. It's important here, since I'm reusing the original project that I created, I didn't change the color of the head even though I could for this one, I'm just going to leave it as this color. Most of the happy ones, I think they're going to stay this color. If I were to just click File and go to Save, this would overwrite the project that I had saved previously. I'm going to choose Save As again. It keeps me in my PSD folder. I'm just going to change this to Gumdrop 2, save that. Go [inaudible] and click Okay. Come back to File, Export, Save for Web. Same as before. Transparency selected. I'm on PNG 24. Photoshop should remember your last export saves. You shouldn't have to re-enter those every time. I still double-check them just in case. Go ahead and hit Save. Since I save this as a new project with Gumdrop 2, because it's defaulting to that for this image name. I don't have to change anything there except, I do want to make sure I have final image is selected. But again, Photoshop should remember that your last image export was done that way so it should keep the same thing. Hit Save. There, we're done. Let's do another one, but this time we're going to change some of the background colors. For this expression here, got that layer selected in a grab. Make sure all of my other layers are locked, and that I'm just on the clean one. Grab everything. Delete that, and you'll notice because the other layers are locked, it kept the outline of the head. It kept the background colors. Let's come back over here. I'm going to pick this angry face. Command C to copy, back here to our working project. We're going to unlock the expression layer. I'm going to select what's in there, delete it. Command V to paste, command T to transform. You'll notice I deleted the previous phase before I imported this one. I could undo it, bring it back, then add this on another layer. I think it's fine where it's at. I'm liking that size as it is right there. Let me go just a touch bigger. Because that expression looks like he's looking for his left shoulder, I'm going to scoot it towards the left a little bit. I'm happy with that. Let's lock that. Go back to our Clean Expression. Let's go select our Brush tool again. Change our color back to black. Zoom in, Command Plus. Let's fill in these big angry eyes. Now I'm going to come down to the copy we did of the head shape. I'm an unlock that because we're going to change the color. Let's grab our paintbrush, come back to our color swatches. I'm going to want something right around in here, something an angry orange or red. I like that. I think that one's going to stay just the way it is. I like that. Again, our safe process as we've done before, File, Save As, make sure we changed this. This will be number three. Another thing that you can do, you don't have to number it if you don't want to. Xcode isn't going to care because it's just going to look at the filename. If it would be easier. I've done this before, you can give each of these files something that more matches the expression. You could call this one angry, the other happy or whatever. The reason I didn't on this one is because there's several that are happy. Rather than trying to think of different words for happy, I'm just going to number them, but whatever works for you. Now that we've saved these, I'm going to rush through the rest of them real quick. I'm not going to make you sit there and watch me redraw all 25 of these images. But I'm just going to bust through them real quick and move on to the next step.
12. Testing Your Sticker Pack In the Simulator: Now one thing you want to pay attention to is, up here at the top, it has the simulator set for a specific device. Just to get an idea of how some of this looks right now, I'm going to start with iPhone six and hit play. What this is going to do is, it's going to build our app because this is treated as an actual app, even though we've done zero programming, it's going to build that into a package. It's going to load up the simulator and we're going to be able to look at it as if it were on an actual device. Once we're happy with this, we're still going to want to test it on an actual iPhone or iPad, which we'll do that here in just a second. Here we have our test device floating up our sticker pack here. We've got our name. Takes a little while, but here we go. Now, keep in mind, we save these as large images. So you'll notice we're only fitting six at a time here. But let's go ahead and test one and see how it does. This Kate that it shows, this is just part of the simulator. You're not actually sending it to some random person named Kate. But you can just click on that, and if you wanted, you could add something, send it. This is about what it's going to look like on the actual device. That seems fine to me. I'm happy with this size. If you prefer yours to be smaller, when you're exporting your images, just remember to save them at either 300 by 300 or 408 by 408. This is what it's going to look like on an iPhone six if you go with the 618 by 618. I'm happy with this, but now I want to see what it looks like on an actual device.
13. Testing On Your iPhone and iPad: So before we finish building this, let's go ahead and look at how to connect to a device, run the tests there, and then we'll be ready to ship this off. So to connect your device, you're going to need your lightning cable. Just plug that into your laptop, your desktop, whatever you're using, go ahead and plug that into your device. I'm using my iPhone 8 Plus here. Unlock that and you'll notice that it's showing that the name of my device has shown up. You might get a popup asking if you want to trust the computer. Obviously say, "Yes" to that. I'm going to click on this down arrow, and now if I scroll to the top, it's showing my iPhone. So I'm going to go ahead and select my iPhone, and then I'm going to hit build and run. Now, since we've just set this up, we need to register the device. If you already have a developer account and you've already tested on your device, of course you're not going to have to do this. But in this case, this phone has never been connected to my developer account. If you're testing and you've never done this before, you will have to do the same thing. So just click register device and wait for it to build. You may get this here. So the code-signing is part of what Xcode needs to do to be able to communicate back and forth with Apple. It's a security thing. I'm going to do always allow. Okay, the build has succeeded. So here momentarily, it's start running on my phone. It's installed, so now I can just tap on iMessage. Over here on the right, I'm going to have the installed ones, and I haven't created an icon for my sticker pack yet, so it's getting this default one here. So I'm going to go ahead and tap that, and there we go. You can see it actually running on my device. I can just tap on a sticker to load it in and I could actually send this. Now, what I'm going do to test this for real, which you can do, it's now on your device, I'm going to send one of these to my wife, and you can see they've been sent. So these are actually processing. These are ready to go. See, I even got a response saying these are cute. All right. So as far as this test goes, I think we're good. I'm happy with the size, I like how they look, obviously they're working, so we're going to kill this test, and I want to do one more test. For this, I'm going to use my iPad. There's an iPad mini, and we're going to go through the same process. Come up here at the top, select my iPad. It's asking, "Do I trust this computer?" Say, "Trust." All right, and now we come back up and select the iPad again now that it's been trusted. Go ahead and hit build, okay, and now we've got it running on the iPad. Just as before on my iPhone, they all seem to be sending just fine, so I think we're good.
14. Creating Your App Icons: Since the testing looks good, we're basically ready to go except for one important thing, and this one can be a pain. Well, it's not a pain, it's just repetitive. What we want to do is come up here and click on iMessage app icon, and you'll notice we've got a whole bunch of different blank squares. All of these have to be filled with an image. What these are going to be is the images that are used in the app store, the images that are used at the very bottom when you're in iMessage and you're scrolling through your different sticker packs and there's different sizes depending on whether it's being installed on an iPhone or an iPad or an iPad Pro, so there's several different ones here. Now one thing that's helpful is it does tell you what sizes you need. You'll notice here we've got 29 by 29, 60 by 45. All of these different things here. For this, we have to go back to Photoshop. The thing that's misleading with these though, is it's not actually wanting something that's 29 pixels by 29 pixels. I'll provide a cheat sheet that gives you what it actually wants. What it actually wants you'll notice with these, we've got a 2x and a 3x, so instead of 29 by 29, what it's really looking for is 58 by 58 for this one, and 87 by 87 for this one. Basically just whatever numbers it gives you here, multiply them by these numbers here and that's going to be the pixel setting that you need. One thing you can do to speed this up a little bit is, we could start one, add 87 by 87 and then when we go to save it, save it at that, and save it at 59 by 59, so you're not having to do the work multiple times. Let's just start right here. I'll get Photoshop open again am going to do, create new and so we'll do 87 by 87. Now one thing that's important to note here is because this is going to be the application icon, it doesn't need to be transparent. You can do that if you want, but you can pick a background color that's complimentary to whatever the focus of that icon is going to be. For mine, I'm just going to leave it as white for now, as you can see it's quite small, so I'm going to zoom in a little. I'm also going to open up one of my gum drops from earlier. I'm going to go with this guy here, and I'm going to select all of the layers. Merge those, select all and copy, so command A, command C, come over here to our new item paste that it's going to be way too big. Control T, Control minus to zoom out a little bit, hold down, shift, drag. There's probably a faster way to resize, but if there is, I don't know that trick. I'm going to rotate it a little bit just for fun. We're going to go File, Save As, and I'm going to change this to app icon 29. The reason I'm doing that is so that I know what the scale is that I'm going for. Actually I am going to change this background just a little bit. I think I want to give that some really light blue. Yeah, I think I like that sky blue. There we go, I like that. We save that, and now we're going to export for the web, just as we did before. We got our 87 by 87, we don't need transparency here. On the app name, I'm going to leave the 29 in there because it's based on that 29 factor, but since this is the 87 by 87, I'm throwing in a times three. Do another at 58 for the times two. Go back to Xcode, open up our finder window. Client's going to want all of these as PNGs as well. So we'll drag in our X2, drag in our X3, see if there's anywhere else we can use that. Looks like for iPad it needs an X2. That scale that all we can do. Now for these last few, these last two here, the thing that's a little bit tricky with these is they're a larger resolution than what our original images were. Since it wants this at 1024, this could present a problem. In my case, it's going to be okay. Just another thing to consider as you go along. The original image that I did was 618 by 618, if I scale that up, since we're not doing this in Illustrator, we're doing this and Photoshop it is going to get grainy. I don't want it to be grainy, but we're also going for a square this time, rather than these scrunched in rectangles. Those scrunched in rectangles are actually going to zoom. It's going to give the appearance of zooming in on that image because you have less vertical space as compared to your horizontal space, whereas with this icon here, it's going to be the same for both. I'm going to go ahead and make a project that's 1024 by 1024, and I'm just going to drop in my 618 and let's see how it looks. I'm actually okay with that. I'm going to rotate them a little bit. The reason this works, if you remember, I drew this at 618. This measures 1024 by 1024. It's almost like it's just meant to be a slightly smaller component within this larger icon, and so it works. Now if you had drawn your original at like 300 and you needed to make this one here. What you would have to keep in mind if you didn't want to redraw it, is it going to be about half the size of my smiley face right here. It's going to look a little small. That's not to say you can't still make it work. What you could also do in that situation is go grab a couple of your other stickers and since you've done them as transparencies, hopefully, you can layer those in there. You can have them as like a little group. If you want to see what that looks like, I'm going to take this same guy and just paste him in here a couple more times, and you'd see that could still work. Obviously you wouldn't want it to be the same face over and over. You'd want to grab a couple of different ones that you have, but you could do it. But I'm happy with this so I'm going to go ahead save this one as and this time when I go to export the PNG, this is actually a 1X, so I don't really need to make any changes here. I'm just going to leave that as is. Jump back to Xcode, grab our finder. There we go. We have now finally filled all of our app icons. Now there's more than one way to do this. I've heard there are tools that will generate all of these different sizes for you. In fact, Apple has some templates you can use with Photoshop that are supposed to generate all these. I've never used them. I do have a link for it. I'll provide the link. You can try that out if you want. I don't know the process to make that work, so it would take a little research, I think reading through Apple's documentation, which is generally pretty good. I like to have a lot of control over the images even though, if you look at these, they are super simple, but I like it to be exactly what I was going for, so I don't want to use their template thing to do it for me. You can do either way, whatever you prefer. Now that we've got all of these done, we're basically ready. What I want to do now, we're going to come up to product, we're going to go to build. The build has succeeded. We're ready to submit this to Apple.
15. Prepping Your App: Now that we've got to build, we're ready to submit it to the App Store, but to do that, we have to have a project on that end. You want to go to developer.apple.com and login to your developer account while we're waiting for that. I'm also going to go to iTunes Connect.apple.com, and login there, we're going to need both of these sites to get the project actually uploaded. Under iTunes Connect, you'll want to go to my apps on the developer page, we want to go ahead and sign in. Once you're signed in, you want to go over here and click on certificate identifiers and profiles and then on the left under identifiers, click App ID's, and then let's click plus, that's to register a new App ID. Now this isn't going to be what actually shows up on the app store. This is just for your reference. I try to keep the names the same. Ideally if the name that you want hasn't been taken, you will be able to do that. That's just something to keep in mind. I'm going to give it a name same as I've used for everything else, Mr.Gum Drop. Now for the Bundle ID, we can go back to Xcode click on this folder, and then click on the Mr. Gum Drop Project and right here we have this bundle identifier from the name we gave it originally. I'm going to copy that and paste that in. Then under App Services, since this is going to be a sticker pack, we really don't need any of these other things. These are going to be for regular apps and other things that you would do. We're going to skip all of that just to continue. By default, it's going to be enabled for the Game Center and the in-app purchase, we're not going to use that, so don't worry about that. Go ahead and click Register and then hit Done. From here with developer.apple.com, we're done. We need to hop back over to itunesconnect.apple.com. Under my apps, we want to click the plus sign. We want to click new app. We want it to choose iOS? This is where we're going to find out if we can actually use the name that we want or not. Primary language, I'm going to choose English US. Now for the Bundle ID, if I go ahead and click down here, you're going to notice it doesn't show the one that we just created on developer.apple.com. That's because it takes a couple minutes. If you don't see it, just cancel out and go grab a drink. It'll be a couple of minutes. It's usually not too bad. It's been a minute. Let's try this again. Now it's got it. Choose iOS again, Mr. Gum Drop. Primary language for me, English UK. Now the SKU, this just needs to be something unique to help identify your application within the system. It's not going to show up in the App Store. I've actually never had to use this for anything. What I usually do is I copy the same thing from the Bundle ID, the reverse domain, the com dot, whatever you want your thing to be. I'm going to click Create. Boom. That part is done for now. Now, since it let me write in here, this means that the name I wanted Mr. Gum Drop was available. If it had given you some sort of an error, then it wouldn't be available. I'm going to add a period there though. No subtitle. The privacy policy URL for a sticker pack, you don't have to worry about. For the category I go with Stickers for the primary. Then I have the subcategory. For this one, I'm going to do emoji and expressions. There's all kinds of different things, as you can see here that you could base your thing on. I've done one that was all sushi, just different types of sushi. For that one, I chose eating and drinking. Here you just want to pick something close to whatever your art is. You do have the option for a second one, or I'm going to choose comics and cartoons for a secondary category. For sticker packs, the secondary category to me doesn't really make sense because it's not a normal app. I mean, you can pick one if you want, but I'm not going to. We've got all of there and go ahead and save that. Now over here on the left, we're going to click on pricing and availability, here you're going to choose, do I want to give this away for free? Do I want to charge $0.99? I always go with $0.99 under the volume purchase, I always go with available with no discount. If you're happy with your pricing, go ahead and hit save on that. Now let's go to prepare for submission. Here you're going to really add a lot more stuff. Before we fill in all of these other details, I actually want to jump back to Xcode. We're going to product. We're going to go to archive. The archive process, what it's going to do is it's going to take the App that you've built, get all those certificates, everything all bundled up together so that it's ready to submit to the App Store. Build succeeded. I've actually run this twice. That's why you see two of them here. We're going to choose, validate. This is just going to go through and make sure that it thinks it's got everything it needs. I just go with automatically managed sign-in, button hit "Next". That's all there. Let's go ahead and hit "Validate". This time the validation was successful, had done. Since the validation is complete, we're ready to upload to the App Store. We'll click that. Basically just click next on everything and Upload. Upload was successful. We'll go ahead and hit "Done". For this portion, we're done with archives screens. Let's go ahead and close out of there. Once you've got your build uploaded, it needs to be inserted into your App within iTunes Connect. It's not going to show up right away though. So I've given it a few minutes to come back to the Prepare for Submission part. If you scroll down to the build section, you'll notice it says select the build before you submit your app. Previously it did not say that. It just said submit your builds using Xcode six or later or application loader 3 or later. If you see only that, then you're not going to be able to submit it just yet. Give it ten minutes or so, refresh the page and if you have this, select the build. It now has it in there, it's ready using that Bundle ID, it's been able to connect the two. Go ahead and click on select to build. We're going to choose 1.0, the one that we just did. It's been able to pull in a couple of items. I'm going to go ahead and hit "Save". That's done. Now there's going to be a few other things we have to put in here. For the copyright, I'm using my company name. You can just put in your own name, especially if you don't have an LLC or something setup, we need to select our App Store icon. I believe the 1024 is what it wants, let's find out in a second. Seems happy with that. 1.0 we are fine there. For the rating, this is pretty G rated, so we're going to choose none on everything. I'm not going to select the made for kids because I think you do have to have a privacy policy in place. If you're going to select that button click "Done", make sure your contact information over here is fine. If you remember, when we looked at this on developer.apple.com, It did say it was games center enabled. Here we have that unchecked because we don't need it for a sticker pack. Under app review information. This is needed for a sticker pack. This would be more especially the sign-in thing. That would be like if you had some Amazon in their app, you have to be able to sign in so that you can buy from the store. You're signing into something that is separate from your device. We don't need that here because we're just sending messages. Just uncheck sign-in required when you get down to version release, this is an important thing, generally for me, I just go with automatically released because as soon as they approve it, I want it out there so people can see it and people can buy it. But you do have some options. If there was some reason you wanted to hold off, like let's say it was something for an upcoming holiday, maybe the 4rth of July and you say you submitted this in the middle of June. Ideally, that's going to be enough time. Maybe you don't want it to release prior to the 4rth of July. So you can choose to either just manually released the version, in which case you're going to get a notification regardless when it's submitted, that'll show up in iTunes Connect. But you can also just specify a time and date and say I don't want it to release prior to such and such time, I'm going to leave it with automatic. If we scroll back up the Apple watch stuff, we can skip. But the iMessage app, we're going to need screenshots there and here as well. Some of them, these can basically be the same images. For description, I'm going to say I've got 25 hand-drawn Gum Drop emojis. The description is what's going to show up in the App Store. You do want to give some information about your sticker pack. You can go into the process of how it was created. If you want, some people are ended that I think it's helpful to say how many stickers are there so the person knows what to expect. I'm just going to go with this 25 fun hand-drawn Gum Drop emojis for your sweet tooth messaging. For the keywords, let's say emoji, sticker, Gum Drop, candy, sugar, okay, your support URL and your marketing URL. This is the part I was talking about, where you have to have some sort of a website. I haven't actually created this page yet on my website, but I will do that right away. I always do the same URL for the support and the marketing when it comes to a sticker pack. On my website it'll just be something showing a screenshot of the App and just a quick description of here's what it is. The promotional text, I'm going to leave that blank on this one. But you could, if you click that question bubble, it gives you some of the information about what that is for. I'm not going to use it, I think we have everything we need except for our screenshot.
16. Capturing App Screenshots: We're going to go back to X code. I'm going to choose the iPhone 8 plus, and we'll go ahead and run that. When you go to create the screenshots, you want to run your app again, just use iPhone 8 plus. Through the simulator, we'll be able to create the screenshots that Apple wants. There are a couple things you need to watch out for. Depending on your monitor and and a few other things, the resolution that you see may not be the resolution that you need. What you want to do first is come up and click "Debug", and make sure that Optimized Rendering for Windows Size is unchecked. If that's checked, chances are your screenshot isn't going to be accepted because it'll be the wrong dimensions. As long as that's unchecked within the simulator, send one as part of your little test. Make sure you bring the iMessage window backup. Click "File", "New Screenshot", and then, grab the little handle here, click that, so that you get the whole screen. File, New Screenshot, and then drag up, and do that one more time. We should now have three screenshots that we can use for the 5.5-inch device. Go ahead and grab all three of those. There we go, we've got those. 5.8-inch is optional, that's for the iPhone X. I'm not going to bother with that, but we do need for the iPad. Go back to the simulator, go to Hardware Device, iOS 11. What we need is to select the iPad Pro 12.9-inch. Wait for that to boot up. For iPad Pro, the same as before. Go ahead and grab all three of those. If you want to change the order, just drag them into the order that you want and save. We've got our screenshots for iPad. Then, just double check, make sure you haven't missed anything. I believe we're ready.
17. Submitting Your App: I believe we're ready. Let's go ahead and hit submit for review. Good. We've passed the first check if you're seeing this screen. Just go through these is your app design to use cryptography, no, it's just a sticker pack, content rights. Does your app contained display or access third party content? No. Does this app use and advertising identifier? This would be given in a regular app if you were serving up ads for AdMob or something like that, we're not doing any of that, so just go ahead and say no to that. Hit "Submit."If you notice here, now it says waiting for review. That means we're done with this part. It is now in Apple's hands for them to say yes or no. If you've gotten this far in your own congratulations, sit back and wait. You're about ready to have your first sticker pack ready to go. Now the next question is probably okay, well, how long do I have to wait for Apple to review it and either approve or deny? Honestly, it depends. It depends on how many either currently processing. I've had them approved, sometimes taking as long as a week, two weeks even, and I've had him is short, it's like four hours, just kind of depending on the number of apps that they're having to review. So have some patience that won't take too long though.
18. Class Project & Conclusion: For the class project, what I want you to do is try to make your own sticker pack. Do your doodling. Doodle all the time. Draw as much as you can until you come up with something that you like, that you feel like you can expand on, and that you can get several different versions of it; smiley, sad, crying, whatever, you want to get all of the different emotions that you can. Sketch them out, scan them, or take a picture with your phone, doesn't matter. Once you have those images, pull them into your image editing software: Photoshop, Corel Draw, whatever you happen to have. Clean those up, get the colors that you want, dry it out, get it how you want it. Save copies of each of those in the specified sizes: 618 by 618 for the large, 408 by 408 for the medium, and 300 by 300 for the small, keeping in mind that you will have to do a 1024 by 1024 and a 1024 by 768 for the App Store. Put some pictures in the class when you've got those ready, get it submitted, and when you've got it approved once it's in the App Store, drop a link so other people can see it. That could be a way to get a little business traffic your way, maybe get some purchases on that. Sticker packs to me it's a lot of fun. It's an easy way to potentially monetize some of your artwork. Really, your imagination is the limit because basically any image can be put into a sticker pack. It doesn't have to be hand-drawn. You could take pictures, scale them down so that they fit, and you can use those in the App Store. It can be a lot of fun and it can be potentially profitable. I think for me one of the biggest drivers with it is it's just cool to get feedback from people out in the world on my artwork and it's cool to see people use it and enjoy it. Grab your pen, grab your pencil, grab your paper pad, start sketching and show us what you can come up with. I'll offer any feedback that I can along the way, and hopefully you'll come up with something that represents your artistic personality, something you can get submitted, and then we can start to see out there on iPhones and iPads. Thanks for following along in my class. I hope you've enjoyed this and I wish you success with your sticker packs. Thanks. I believe we're done son.
Jeremiah Rodriguez, I make things and draw stuff.
