Live Design

We know and love code. But even code requires a bit of help from other disciplines to grab attention in the app store. In this talk, Maxim gives a live demonstration in Sketch of making app icons and screenshot collateral for your app’s submission to the store. Learn how to own your app, from code to submission.

---

Live Design (0:00)

I’m an iOS developer at Artsy, but today, I’m actually showing you some design. I have always been interested in design, and I like to do this in my spare time, and I have seen quite a few live coding talks. This inspired me to give a live design talk.

We all need to, from time to time, make assets and so forth. Today, what I’ll be showing you is how to make an app icon and some screenshots that you can then use to submit to the App Store if you have any projects that you would like to submit.

What I’ll be using today is a tool called Sketch. You may have heard about it before. It’s become quite popular in the developer community. It’s quite affordable, compared to Adobe licenses. So, if you do not do design day-to-day, it might be a nice option.

Sketch is a vector-based tool, which makes it slightly different than Photoshop and a bit more similar to Illustrator, but it’s very geared towards app and web design and it has great expert options, as I will show you later.

What we’ll be doing first is making an app icon. As you can see floating here, this is the Apple iOS 9 News icon, and I thought it would be a good example because it’s very easy to make an icon comprised of very basic shapes. It may look like a complicated skyline, but really, it’s just a bunch of circles and a bunch of squares. We’ll be making it from scratch step by step.

After that, I will show you how to take some screenshots from your simulator and embed them into a phone with some text on top that explain the features of your app. Often, you see things like that in the App Store and you can make something like that very easily yourself as well. Let’s get started.

Recreating the Apple News Icon (2:31)

Right now I have a new blank file in Sketch. There is an option to have a template for app icons, but I often only use that for exporting, and I will show you that later. I tend to start in the big white canvas to think about things and make something. So, we’re going to start with the background, which will be a large square. So, I’m pressing R for rectangle, and as you can see, you’re getting a crosshair with the little squares. So, you’ve changed what kind of tool you’re using.

If you wanted to look at that manually, you can go Insert, Shape, Rectangle, and it shows you the shortcut next to it. Now you can make a rectangle of any shape, but if you press Shift, it’ll always be a square, which is quite useful. Now over here, as the biggest size that you will normally need to make is 1024 by 1024 for the iOS App store. That’s the size I’ll be working with today.

Now at the right here, you can see various properties about the shape that you’ve created. Not only the width and height, but also the fill and other colors and so forth. We don’t need a border. We’re going to change the main colors to be this kind of bright coral color that you see here. If you want, you can also use the Dropper tool to select it if you have a color in mind.

Next up, we’ll be making the front flap of the newspaper. So, pressing R again to get a rectangle. I’ll draw one out like there, and again, we don’t need a border, but the background of the newspaper is white. Now, I’m going to work bottom to top, starting with the lines here that simulate an article in the newspaper, then the image, and then the headline with the globe icon there as well.

So, we’ve created some rectangles, but you can also create lines. For that, you can press L and get just a crosshair, no square next to it. You can draw a line at any kind of angle, but you can press Shift to make sure that you have a straight horizontal line. We’re going to draw one out there, but it’s quite a thin line.

Here you can change the thickness, and then there’s some other settings as well, and you can make the ends rounded and have a line that looks very similar to the original icon.

I’m going to make the color a lighter gray, and now I’m going to draw the second line, but instead of making it from scratch, I’m pressing Alt to drag it down. That way you can easily copy things you’ve already created in your project to make multiples.

Next up is the cover image. We’re going to draw a new rectangle, take off the border, and change the background color. This time, instead of having the fill color, we’re going to have a slight gradient for the sky. You can see the gradient starts with the top color and then goes down with the second color, and you can change those individually as you wish. So, the top one is going to be quite a bright blue, a bit lighter, and the bottom one is going to be a slightly darker blue like that.

Next, we’re making the skyline of the buildings that you can see over here. So, I’m going to press R again to create a bunch of rectangles, and this time, I’m not going to worry about the borders or the colors just yet. I’m just going to draw them out. So, I keep pressing R and keep dragging out various rectangles.

On the left here, you can see all the layers that we’ve made and the fact that we’ve got a whole bunch of them. Now you can group these, which I like to do as I design things because otherwise, it gets very messy. So, I’m going to hit Command+G and group them into something we call “skyline,” and selecting them all at once means we can change the properties of all of these rectangles at the same time.

I’m going to take out the border again, and I’m going to give them a dark gray background.

Next up are clouds. These are actually just a bunch of ovals together or ellipses. I’ve pressed O to create circle objects, which again you can also get from the Insert menu, and I’m going to draw out some circles. If you press Shift, you’ll get a perfect circle, and if you don’t do that, you can make several ovals. I’m going to draw a bunch of these to create some clouds. Just keep dragging them out. I’m going to create three big clouds.

Now because vectors are basically just a mathematical function of a bunch of points together, what you can do is apply some boolean operators. So you can choose to join certain shapes together in a “union,” or subtract them from each other to create a more complex shape.

So, I’ll be selecting these three circles by pressing Shift as I click them, and then Union to make them into one cloud shape. So, I do that for each cloud, and you see, we’ve got some funky looking clouds. Now, I select those three, take off the border again, and change the fill color to a slight gradient too.

The top one’s going to be white, and the bottom one is going to be just off white, but they’re quite bright and we would like to see the sky through the clouds. So I’m going to turn the opacity down a bit, and I’m going to move the skyline in front of the clouds. Then pressing Alt again, I’m going to create a few more clouds because in the News icon, you can see there’s a bit of a cloud back behind the skyline. We’ve created a simulation of a skyline.

Last up is the title. We’re going to draw a line here, roughly like that. Again, change the thickness. Make sure that the end is rounded and then Alt drag to create a second. Now, make sure that the color is quite dark. The top one is even darker than the skyline. Something like that, then group them together, and then you can Alt drag the entire group out, and what that leaves us is a bit of space in the middle to make our globe.

I’m going to press O again to create a circle. This time, instead of taking out the border, we’re actually going to take out the fill color and use the border, and we’ll make it a thickness of six.

Now, the last tool I want to show you today is the Pen tool, which you can hit by pressing V for vector or you can click there. This tool is often used to create bendy, curvy shapes, and you can close them and do various other things, but today, I’ll show you just a very simple way of using it.

What we’re going to do first is create a line. We’ll give that line the same thickness as the globe, so a thickness of six, and move it slightly more towards the middle, and then, this time, I’m going to copy it and rotate it. That way, you get the horizontal line in the globe.

Then, I’m going to make a line over here, and in the middle, I’m going to put a control handle to which the line will curve, to create the curved line of the globe. I’ll press Escape to get out of that.

Make sure it’s the same thickness, and now instead of worrying to be able to copy this exactly on the other side, you can Copy, then Paste it, and then flip it, which essentially mirrors anything you’ve created. So, with that we now have the other side, and again for the top and bottom.

I know it’s straight here, but sometimes you want it curvy. So, I’m going to paste it again and show you. You can rotate it that way, put it up there, and then you can Copy and Paste it, flip it again, but this time over the horizontal axis and put it over there. Then Select Everything and change the color to be the same dark color as the line.

Then you’ve got a globe icon. So, that completes the front flap of the newspaper, which I’m just going to take everything and group it together.

Now, what’s left is the shadow or back flap of the newspaper. I’m going to create a new rectangle over here and draw it out to be that size, and you can see, it’s slightly rounded. Now, with rectangles, you can create them and make them into rounded rectangles by moving this, but what you can also do is double click it to get the individual points, and you can choose to round those points separately from everything else. I’ll click on the bottom one, and round that to 56, and that way, we keep the straight edges at the top, and round at the corners.

We’ll change the fill color to be white, but we now realize actually we want some shadow from the front flap of the newspaper. So, instead, what we can do is we can create a gradient again. Now, instead of it going top to bottom, we want it to go left to right, but from white into a dark color. So, we’re going to change that to a gray, and then change that to white. What you see now is it’s spreading the color evenly from left to right completely.

What we actually want is a very short, small shadow just for the newspaper. So you can drag out a new color and push it there and choose it to be even lighter. Push back the transition from that light white into the darker gray to be only about a sixth of the entire path. So now when you zoom out, you can see that we’ve created an effective shadow for our newspaper. Group that, center it, and that completes the icon.

Exporting Your Icon (15:51)

Now, in order to export this image into the many sizes that are often required by Xcode, we’ll use Sketch’s tool to export app icons. So, let me just rename that to “Icon,” and then we can get started.

We go to New from Template -> iOS app icon. You see that they’ve already put out a bunch of different sizes for you, from Spotlight to Settings to the main asset for the App Store. So, you can copy over this entire icon, and paste it over here.

As you see, this is a bit too big because this entire system works on an @1 ratio, and the 1024 is @2. Don’t drag it by the handles to make it smaller; that will cause problems because the borders will get out of sync. Essentially what happens is the borders and all the properties you’ve assigned to everything keep the same size and width. So you make the icon smaller but the borders will still stay 6-wide or 16-wide. Instead, you want everything to shrink down proportionately.

In order to do that, there’s a tool called Scale, and you can say, I want it 512 by 512. So, you enter that and it will scale it perfectly and fit into there. You can then continue on pasting and looking here at this artboard, which has a background that says, okay, it’s 180 in size. So, you take the icon, Scale again, and it fits.

In order to export them, personally, what I do is remove the mask off. What this file has done for you is it’s already applied the rounded corners. Sometimes it doesn’t match exactly what the App Store will do for you, and if you submit a square asset, the App Store actually masks it for you into those rounded ellipses.

As a result, you don’t need to do this ahead of time. It’s just useful for you to see what fits into the boundaries and what doesn’t. Over here, there’s a layer called Mask, and I would recommend you take that off and export it as squares and leave it up to Apple because when they transitioned to iOS 7 and even after that, they changed the way they did those curves and then sometimes you see little black edges around the app icons, and you’d really rather not have that. Submit it as squares and everyone’s happy.

Now, here you can see various artboards. You can select them all by pressing Shift or go further up and then press Export here. You can add different sizes. You can see they’ve already added the @2x version for you as well. So, when you press Export, you can choose to export it wherever you wish, and it will create a folder called Assets, and in there the app icon. You can see we have all the icons now in one go, and we only had to make the image once.

Jazzed App Store Screenshots (19:52)

Now lastly, what I wanted to show you very quickly is how to make nice “jazzed” screenshots rather than just taking them from your simulator.

Over here, I’ve got Xcode, and I’m going to run a project. This is the main Artsy app. You can see we’ve got the simulator here. Now, this could be any app that you’re working on, and when you press Command+S, it will create the screenshots for you. And you start getting them over here on your desktop.

Now, there are various tools you can use once you have your screenshots, there are various ways to get them into Sketch that look nicer. There are a lot of app resources here, and if you look around, you can find Sketch files that have devices. Now, Robbie Pearce has been making these for a very, very long time, I think since before the iPhone 4 came out, and you can actually just get a template of his designs of all the devices straight away. So, we can download that.

Go into Sketch, and you see it’s got all the devices over here. So, we’re going to pick an iPhone 6, open it up, and you see you have vector assets of every single phone here. So, you can copy that, create a new file, and then create an artboard.

An artboard is a designated area for you to export things. So you can paste the phone image here. We want it about that size. Change it to be clipped like that, and you can grow it a bit taller so you can fit your text. Ideally, you want this to be the size of whatever you’re exporting to, but this is for demonstration purposes. I’ll change the background color because we want it a bit darker in this case, and then add your screenshot here.

Then by pressing T, your can add some text: “The Art World in Your Pocket.” Now, this is very small. So again, just like we changed the properties of the squares and circles, you can change the color and you can change the size to something like this, and then you’ve got your screenshots there. Actually, I’ll make it a bit smaller. Here you see I’ve done a few others already as well.

That way, you can line up all the screenshots and explain each feature in your application and export them in one go. So, if you select all the artboards, again, you’ve got Export here. You can choose Desktop or wherever you want to export them to, and they will all be generated for you, and you can submit them here.

That was a quick look into using Sketch to create some app icons and screenshots. Thank you so much.

Q&A (24:57)

Q: What’s your process for creating icons from scratch? Do you sketch them by hand and then import to the computer?

Maxim: It depends on what the project requires. Usually, I draw and I sketch by hand to get the idea, but I often make it from scratch on the computer because I want them to be quite simple. If you find it difficult to create something, you can find an image of something that you tried to make, and you can use the Pen tool which I showed earlier, V, and you can trace along a shape to make it a bit easier to create things. You can use that to trace over drawings if you ever want to do something like that.

Q: iOS runs on many different devices of different sizes. Is Sketch a good tool for handling those different screen sizes?

Maxim: That’s actually the reason I like Sketch so much. Like I said earlier, if you press A, you can create artboards. These are predefined sizes for a whole host of devices, and you can add your own. It already takes into account all the different devices that you now find on iOS, and also because you’re creating it in vectors, which, like I said, provide a mathematical formula for all your points in your design, so you can export them at any size using the Export menu and its options.