Photoshop and Illustrator: Creating Retina Graphics

Photoshop and Illustrator: Creating Retina Graphics

1h 11mIntermediate2015-03-19

Authors

Justin Seeley

Justin Seeley

Graphic Designer, Software Trainer

Course details

Monitors and mobile device screens seem to get better everyday. But that means designers need to respond with better, higher-resolution graphics. This course will take you through creating beautiful, HiDPI (aka retina) graphics for a variety of screen sizes, using the tools in Photoshop and Illustrator. Staff author Justin Seeley covers the core concepts (including platform support for HiDPI), file setup, and his "rules for retina," which ensure you'll use elements and materials that scale and export your graphics in formats that will display beautifully on the web. Start watching to learn how to create your own graphics optimized for today's most advanced screens.

Skills covered

IllustrationIllustratorPhotoshopAdobeAnimation and IllustrationDeep Dive (X:Y)

Concepts

Introduction

  • Welcome
  • How to use exercise files
  • Understanding challenges
  • How to send feedback

Core Concepts

  • Understanding the need for HiDPI graphics
  • Understanding platform guidelines for HiDPI graphics
  • Examining Justin's rules for retina

Designing for High-Resolution Screens

  • Scaling artwork in Illustrator
  • Scaling artwork in Photoshop
  • Challenge - Creating your own retina images
  • Solution - Creating your own retina images

Saving Your Graphics

  • Understanding retina naming conventions
  • Saving retina graphics in Illustrator
  • Saving retina graphics in Photoshop
  • Challenge - Saving your retina graphics
  • Solution - Saving your retina graphics

Automating Your Workflow

  • Generating @2x assets in Photoshop
  • Extracting @2x assets in Photoshop
  • Using Smart Layer Export in Illustrator

Conclusion

  • Where to go from here
40,000 Toman