This course will be retired on February 24, 2020.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Start a free Basic trial
to watch this video
A start screen creates the first impression for a user and should be eye catching. Sketch out your start screen inside of Adobe Photoshop and reuse some elements from the scene background to create the high fidelity assets for the start screen in Illustrator. Learn some tricks to create the title text in Adobe Illustrator.
-
0:00
[SOUND] Now that we have our gameplay sprites and animations as well as
-
0:05
our sounds all done, we only have a couple more things to design.
-
0:11
A polished eye-catching app icon is important when trying to stand
-
0:15
out amongst the thousands of apps out there on the App Store.
-
0:18
A well-designed start screen is also important because it helps
-
0:21
engage the user right away, before they've even started the game.
-
0:26
Here's what the start screen might look like after we've
-
0:28
gone through the sketching process and created the high-fidelity assets.
-
0:32
As you can see, we've reused some elements of our gameplay scene.
-
0:35
Like the background, stars and planets.
-
0:38
In a more complicated game, you might also have
-
0:41
some other menus, that can be accessed from this screen.
-
0:44
You should think of your start screen as the user's first experience with your app.
-
0:48
You want them to be engaged and
-
0:49
excited before they've even started playing the game.
-
0:52
An eye-catching title text and simple instructions on how to
-
0:55
start the game should be included on your start screen.
-
0:58
You can create the title text by first making an eclipse that
-
1:01
lines up with one of the guides which I drew in my sketch.
-
1:04
[BLANK_AUDIO]
-
1:11
[SOUND] Then use the type on a path tool
-
1:14
to type the title along the top of the ellipse.
-
1:19
Get to the type on a path tool in the tool bar and then click on your path.
-
1:23
[BLANK_AUDIO].
-
1:30
Let's make sure we choose Futura, so it matches the rest of the app's text.
-
1:34
[BLANK_AUDIO].
-
1:43
Choose a font size that feels balanced with
-
1:44
the character in the lower part of the screen.
-
1:47
And make sure it's centered to the seam.
-
1:50
You might have to rotate it after you centered it.
-
1:52
[BLANK_AUDIO].
-
2:04
Then go up to Type > Create Outlines.
-
2:08
This will change your text into shape.
-
2:10
We'll have more control over the text this way.
-
2:13
You can also make your text a little more
-
2:15
interesting by rotating it with the 3D Extrude effect.
-
2:18
Go up to Effect >3D >Extrude & Bevel.
-
2:22
Let's change the position to front, adjust the angle
-
2:32
[BLANK_AUDIO].
-
2:35
Make sure you have your preview turn on so you can see what you're doing.
-
2:39
Let's turn the extrude down to zero
-
2:42
with no shading and then adjust the perspective.
-
2:46
[BLANK_AUDIO].
-
2:54
Then just hit OK.
-
2:57
To make the effect permanent, let's go up to Object >Flatten Transparency.
-
3:03
And then just hit OK.
-
3:06
You can then change the color of your letters, and add strokes.
-
3:09
We made our text the yellowish color.
-
3:11
Because it's attention-grabbing and matches with our character's eyes.
-
3:14
You might also want to turn all your layers back on.
-
3:17
So you can choose your colors.
-
3:19
Then just add highlights and reflections with your imaginary light source in mind.
-
3:22
[MUSIC].
-
5:56
When you're all finished you might have something that resembles this.
-
6:00
You can see by using attention-grabbing colors, gradients, and
-
6:03
highlights, you can really make your design stand out.
You need to sign up for Treehouse in order to download course files.
Sign up