Photoshop and Illustrator: Creating Retina Graphics

Learn to create beautiful, HiDPI (aka retina) graphics for a variety of screen sizes, using the tools in Photoshop and Illustrator.

Introduction

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

1. Core Concepts

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

2. 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

3. 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

4. Automating Your Workflow

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

5. Conclusion

• Where to go from here