New Course: 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.

Leave a rating/review
Save for later
Share

Image assets are everywhere! And to be successful at making apps, you’ll want to have a solid understanding of them. The best way to get a handle on how modern image assets work is to have a go at creating them yourself, using the latest tools. That’s what this course is all about!

In this 23-video course, we’ll help you gain a deep understanding of exactly what image assets are, how they’re made, and how to integrate them into your apps for optimal results.

Are you a developer who’s interested in being able to better speak the language of designers? Or maybe you know how to code basic apps, and are interested in learning to design them too? In either case, this is a good place to start.

Let’s have a look at what’s inside.

Part 1: Vector Assets

In this first part, you’ll discover what vector assets are, and get experience creating them in Sketch.

Part 1 - Vector Assets

This part contains 9 videos:

  1. Introduction: What is design and what are assets? Find out about the two basic types of image assets: Vector and Raster.
  2. Vector Basics with Sketch: Learn some basic tools you should expect to find in any vector design app, and build a grayscale wireframe.
  3. Challenge: Create a Wireframe: Use your new knowledge of vector tools to create a wireframe for one more screen.
  4. Composing Shapes: Use simple shapes and boolean operations to design a tab bar icon. Build up your own symbol library.
  5. Challenge: Boolean Operations: Create more complex icons with the help of boolean operations. Learn about gestalt principles!
  6. Bezier Curves: Find out what bezier curves are, and how to manipulate them. Use the “pen tool” to create an app icon featuring the RW logo.
  7. Challenge: Tracing Complex Shapes: Practice using the pen tool by tracing a complex curved object: the Swift logo!
  8. Text and Typography: Fonts are the most common resolution-independent assets! Pick up a few tips for using them in your apps.
  9. Conclusion: Review what you learned about vector design, and get ready to learn about resolution dependence!

Part 2: Raster Assets

In part 2, you’ll dive into raster graphics, and learn how to utilize them in harmony with vectors.

This part contains 7 videos:

  1. Introduction:  Let’s review what you’ll be learning in this section, and why it’s important.
  2. Raster Basics:  Answer questions like: What’s a “raster”? What’s the difference between points and pixels? What is resolution and how much do I need?
  3. Resolution Dependence:  Experiment with upsampling, downsampling, and analyzing raster assets for use in your apps.
  4. Challenge: Resolution:  Will these raster images look great in your app?
  5. Masks and Compositing:  What happens when you layer images? What are blend modes? Opacity? Find out in this video!
  6. Challenge: Vector Masks:  Try using vector shapes to mask raster images in a thrilling mash-up of asset types!
  7. Conclusion:  Review what you’ve learned about raster images, and prepare to learn about color.

Part 3: Color and File Format

In the final part of this course, you’ll gain an understanding of how graphics of any type finally make their way to the screen, using color!

This part contains 7 videos:

  1. Introduction:  You’ve got a bunch of potential assets! Now what do you do?
  2. Working with Color:  Grab a helmet for this crash course in color theory as expressed through digital color.
  3. Challenge: Contrast and Accessibility:  Practice analyzing contrast with the help of some handy Sketch plugins.
  4. Color Spaces:  Discover the challenges of maintaining color fidelity across multiple digital color spaces, and why you can’t just divide everything by 255.
  5. Image Asset Formats:  Explore your options for image asset file types. Learn when to use which type, and how to export to them.
  6. Challenge: Exporting Image Assets:  Export all of your vector and raster assets, using the best file type for each.
  7. Conclusion:  Review everything you’ve learned in this course, and find out where to go next.

Where To Go From Here?

Want to check out the course? You can watch the introduction video for free! Bezier Curves will also be free when it is released.

The rest of the course is for raywenderlich.com subscribers only. Here’s how you can get access:

  • If you are a raywenderlich.com subscriber: The first two videos are ready for you today! The rest of the course will be released over the next few weeks. You can check out the course here.
  • If you are not a subscriber yet: What are you waiting for? Subscribe now to get access to our new Beginning App Asset Design course and our entire catalog of over 500 videos.

Stay tuned for more new and updated courses to come. I hope you enjoy the course! :]

Catie Catterwaul

Contributors

Catie Catterwaul

Author

Over 300 content creators. Join our team.