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

3 days - $1,895.00

This course is taught by an expert Adobe Certified Instructor.

Prerequisites:

Basic understanding of a personal Computer required.

Course Outline

Creating New Files & Designing on a Grid 

Creating a new file
Setting up artboards
Importing text
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 assett
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