Designing a Splash Page for Your Mobile App

Your splash page's design has a profound effect on your app's users. In this course, you will learn how to design artwork for your app in multiple formats with many helpful tools. Software required: Illustrator CC 2015, Photoshop CC 2015.
Course info
Level
Intermediate
Updated
Mar 29, 2016
Duration
1h 50m
Table of contents
Course Overview
Introduction and Planning
Arranging the Provided Alien Art
Coloring the Provided Alien Art
Creating the Background from Public Domain NASA Photos and Photoshop
Creating the App's Logo Type
Placing the Logos on the Artwork
Adding a Subhead Tag to the Artwork and Conclusion
Description
Course info
Level
Intermediate
Updated
Mar 29, 2016
Duration
1h 50m
Description

The design and execution of your splash page can make or break a user's confidence in your app as it loads. In Designing a Splash Page for Your Mobile App, you will learn how to create and set up great splash-page artwork in raster or vector formats, which you can either combine with coding or in Adobe Photoshop. First, you will learn about drawing elements, both electronically with a tablet and conventionally with pencil on paper, as well as vectoring your art work and arranging elements. Next, you'll see how to use the powerful tools in Adobe Animate CC, Illustrator, and Photoshop; then, you'll explore the basics of color theory, typography, and much more. Finally, you'll create an app logo, finishing up with a mock-up and combining all the elements together. At the end of this course, you will have created a great splash page, improved your design skills, and learned how to use some powerful design tools for your future projects. Software required: Illustrator CC 2015, Photoshop CC 2015.

About the author
About the author

Mario Macari is an award winning illustrator, animator and graphic designer that fell in love with writing code. He develops and codes for major corporations and teaches coding classes at a couple of colleges in Southeastern Wisconsin. Mario Macari holds a BFA in Illustration and certificates galore from software companies.

More from the author
Creating a Site with CSS Grid and Bootstrap 4
Intermediate
2h 14m
Feb 19, 2019
Bootstrap 4 for the Developer
Intermediate
4h 5m
Jun 20, 2018
Making Games in Scratch 2.0
Beginner
3h 14m
Dec 11, 2017
More courses by Mario Duilio Macari
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi everyone. My name is Mario Macari, and welcome to my course, Designing a Splash Page for Your Mobile App. I'm a graphic designer, illustrator, cartoonist, front-end developer, freelancer, and college adjunct professor. I have been working with computers and graphic design a long, long time, and have been creating art for my entire career. In this course, we are going to create a splash screen for a mobile app. Some of the major topics that we will cover include using both vector and raster images to your advantage for scalable splash screens, drawing characters and arranging them, picking colors that work together, finding and stylizing public domain photos, choosing fonts and creating an app logo. By the end of this course you'll understand how to create, adapt, and composite images. Before beginning the course you should be familiar with Adobe Illustrator and Adobe Photoshop. From here you should feel comfortable diving into Pluralsight's library with courses on graphic design, typography, Adobe Photoshop, Adobe Animate CC, and Adobe Illustrator. I hope you'll join me on this journey to learn typography, drawing, and compositing techniques with Designing a Splash Page for Your Mobile App course at Pluralsight.

Introduction and Planning
Hi everyone. My name is Mario Macari, and welcome to my course, Designing a Splash Page for Your Mobile App. I'm a graphic designer, illustrator, cartoonist, front-end developer, freelancer, and college adjunct professor. I have been working with computers and graphic design a long, long time, and have been working with art and computers for my entire career. In this course, we are going to execute a splash screen designed for a mobile coloring app. A splash screen is the first thing a user will see when your app loads. While they're waiting, they'll be judging your app as to whether or not they want to use it. We'll use Adobe Illustrator, Adobe Animate CC, and Adobe Photoshop to alter the public domain NASA photos, create aliens and color them, and finally create an app logo. Here's a copy of the pencil drawing the client gave us as a guide. We're going to take the client's vision and execute it. The client wants us to create a splash screen based on the cartoons that were drawn for the interior of the app. The project is for a fictitious coloring app since coloring is all the rage right now, and our client wishes to capitalize on this trend. The app will sell in the usual apps stores for multiple devices. You'll be able to use these techniques on any similar splash screen project you have in mind. Here's an image of the aliens the client gave us to work with. We'll choose the aliens, color them, and group them, then we'll design the logo and set the splash screen up. I'm excited to share these tips and techniques with you, so let's get started with the first lesson.

Arranging the Provided Alien Art
Hi, this is Mario with Pluralsight, and in this module we'll arrange the provided alien art for our coloring app's splash page. We'll discover the differences between vector and raster graphics, the ever-complex and changing sizes of mobile device screen resolutions, problems these screen sizes cause. We'll take a look at how to draw an alien with pencil on bond paper, then we'll ink the pencil character with marker on paper. We'll draw a sample alien using Adobe apps and an iPad Pro with an Apple Pencil to show how this can all be done electronically. We'll vectorize the artwork in Illustrator, and then to show you one more way we'll do it again in Adobe Animate CC. We'll cover the hazards of scaling the alien art once it's been scanned. We'll select the aliens for the splash page and arrange them. Then we'll prepare the art for coloring by putting each alien on its own layer in Adobe Illustrator, so let's get started.

Coloring the Provided Alien Art
Hello, this is Mario with Pluralsight, and in this module we'll color the client-provided alien art. We'll take a brief look at color theory, we'll take a look at the color wheel and what groups of colors are called. We'll take a look at color palettes and popular colors. We'll look at the difference between warm and cool colors. We'll learn how to paint in Adobe Animate CC. We'll choose flat colors for our alien characters. Then we'll add color detail. We'll learn about tints and shades and add them to our characters. Then we'll save our alien grouping as an SVG file. So let's get started.

Creating the Background from Public Domain NASA Photos and Photoshop
Hello, this is Mario with Pluralsight, and in this module we'll create the background from public domain NASA photos and use Photoshop to make the photos work. We'll learn how to crop and resize raster images. We'll use the highest common denominator of the screen size for apps. We'll crop our photos and use Photoshop's adjustment tools to alter hues. We'll learn about resolution and interpolation. We'll try out Photoshop filters and how the resolution of the photo determines how the filter reacts. We'll learn how to adjust the planet's horizon line with the Clone Tool. We'll learn how to transfer one image to another. We'll learn how to add a color outline around our cartoon characters to make them pop more. So let's get started.

Creating the App's Logo Type
Hello, this is Mario with Pluralsight, and in this module we'll be creating the app's logo type. We'll learn the differences between font categories. We'll find out where typefaces come from. We'll learn what to do when two typefaces are needed in the same project. We'll learn that we should think about our target audience. We'll resize and reposition our letters to form a pleasing layout. We'll add strokes around our letters to combine them as a whole. We'll dot the i and add antennae to the dot. We'll choose colors that work well with our background picture and save in SVG. So let's get started.

Placing the Logos on the Artwork
Hello, this is Mario with Pluralsight, and in this module we'll place the logos on the artwork. We'll take a look at the four basic principles of graphic design: contrast, alignment, repetition, and proximity. We'll work on a low-resolution version of our file to show our client a mock up. We'll learn how to drag Adobe Illustrator files into Photoshop from the desktop. We'll discover what smart object layers are and what. psb files are. We'll learn that a. psb file format keeps its own nondestructive hierarchy. We'll resize the logos in Photoshop and perform nondestructive editing to their layers. We'll learn that placed Adobe Illustrator files can sometimes be reopened in Illustrator from within Photoshop if the link between the two software packages isn't broken. So let's get started.

Adding a Subhead Tag to the Artwork and Conclusion
Hello, this is Mario with Pluralsight, and in this module we'll add a subhead tag to the artwork. We'll take a look at the graphic design principle of balance. We'll then choose a plain font that wouldn't clash with our other elements. We'll set the subhead in our chosen type style and resize the art board. We'll kern the letters and learn the differences between tracking and kerning. We'll turn the editable text into Bezier lines and curves. We'll learn to create a shape around the text and colorize it. We'll save an SVG for coding and place the completed subhead in our mock up. So let's get started.