Learn how to use Adobe XD to create and optimize graphics for web and UI design. You’ll create wireframes and turn them into finished designs that are optimized for mobile, tablet, and desktop screens. You’ll also learn how to design on grids, export image assets, create hi‐res 2x graphics, and so much more. 

2 days - $1,295.00

This course is taught by an expert Adobe Certified Instructor.

Prerequisites:

Basic understanding of computer graphics is required.

Course Outline

Creating New Files & Designing on a Grid
Creating a new file

Setting up artboards
Creating colored backgrounds for text

Adjusting the Layout for Tablets & Mobile Phones
Designing with Bootstrap’s grid
Adapting the design for tablets
Adapting the design for mobile phones 

Importing & Cropping Photos
Importing photos & default scaling
Importing a photo as an image fill (crop a photo)
Rounding corners 

Importing Vector Graphics, Color Swatches, Shadows, & More
Importing & modifying vector graphics Aligning & distributing layers
Layer opacity vs. fill opacity
Reusing colors (color swatches)
Adding a drop shadow 

Character Styles 
Creating & Editing Character Styles 

Repeat Grids 
Creating a Repeat Grid
Customizing the content
Adjusting the design 

Symbols (Reusable Elements)
Creating & editing symbols
Overriding content in a symbol vs. globally updating all symbols
Detaching from a symbol
Symbols versus Repeat Grids 

Turning a Design into a Clickable Prototype
Linking between artboards
Creating an overlay
Previewing the prototype
Making a recording of a prototype (Mac only)
Background blur 

Exporting Assets for Web: SVG, JPEG, & PNG 
Exporting individual assets 
Exporting artboards 

Sharing XD Files (For Review, Developers, etc.) 
Sharing an XD file
Commenting on shared files
Pinning a comment
Updating an existing shared file
Sharing for Development