Beginning App Asset Design
Introduction to designing and using visual assets for your apps. Learn about vector and raster graphics tools, design principles, digital color, and more! By Catie Catterwaul & Jessy Catterwaul.
Part 1: Vector Assets
What is design and what are assets? Find out about the two basic types of image assets: Vector and Raster.
Learn some basic tools you should expect to find in any vector design app, and build a grayscale wireframe.
Use your new knowledge of vector tools to create a wireframe for one more screen.
Use simple shapes and boolean operations to design a tab bar icon. Build up your own symbol library.
Create more complex icons with the help of boolean operations. Learn about gestalt principles!
Find out what bezier curves are, and how to manipulate them. Use the "pen tool" to create an app icon featuring the RW logo.
Practice using the pen tool by tracing a complex curved object: the Swift logo!
Fonts are the most common resolution-independent assets! Pick up a few tips for using them in your apps.
Review what you learned about vector design, and get ready to learn about resolution dependence!
Part 2: Raster Assets
Get a preview of what we'll cover in the second part of the course focusing on raster assets.
We'll answer questions like: What's a "raster"? What's the difference between points and pixels? What is resolution and how much do I need?
Experiment with upsampling, downsampling, and analyzing the resolution of raster assets for use in your apps.
Will these raster images look great in your app? In this challenge it's on you to figure it out!
What happens when you layer images? What are blend modes? What about Opacity? Find out in this video!
In this challenge, try using vector shapes to mask raster images in a thrilling mash-up of asset types!
Review what you've learned about raster images, and prepare to learn about color.
Part 3: Color and File Formats
Find out what we'll be covering in the final part of the course, focusing on color and image file formats.
Grab a helmet for this crash course in color theory, and gain some perspective on how to think about color in your app.
Practice analyzing contrast between text and its background with the help of a web contrast checker.
Discover the challenges of maintaining color fidelity across multiple digital color spaces, and why you can't just divide everything by 255.
Explore your options for image asset file types. Learn when to use which type, and how to export to them.
Decide which design elements are assets to export, then export them using the best file type for each.
Review everything you've learned about app assets, and find out where to go next on your design journey.