Photoshop and Illustrator: Creating Retina Graphics
1h 11mIntermediate2015-03-19
Authors
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
0. Introduction
- 01 - Welcome
- 02 - How to use exercise files
- 03 - Understanding challenges
- 04 - How to send feedback
1. Core Concepts
- 05 - Understanding the need for HiDPI graphics
- 06 - Understanding platform guidelines for HiDPI graphics
- 07 - Examining Justin's rules for retina
2. Designing for High-Resolution Screens
- 08 - Scaling artwork in Illustrator
- 09 - Scaling artwork in Photoshop
- 10 - Challenge - Creating your own retina images
- 11 - Solution - Creating your own retina images
3. Saving Your Graphics
- 12 - Understanding retina naming conventions
- 13 - Saving retina graphics in Illustrator
- 14 - Saving retina graphics in Photoshop
- 15 - Challenge - Saving your retina graphics
- 16 - Solution - Saving your retina graphics
4. Automating Your Workflow
- 17 - Generating @2x assets in Photoshop
- 18 - Extracting @2x assets in Photoshop
- 19 - Using Smart Layer Export in Illustrator
5. Conclusion
- 20 - Where to go from here