Static Wireframes are often shared with team members and other stakeholders. In this video, learn how Photoshop allows you to export Artboards into a variety of formats, with optional labeling and annotation.
- [Instructor] Another option that you have…for sharing your work are the Export options…built into Photoshop.…In the File menu, under Export…are two options that mention Artboards explicitly,…Export Artboards to Files, and Export Artboards to PDF.…Let's take a look at Export Artboards to Files first.…Here, we're presented with a number of options…for the files that we want to create,…a Destination, a File Name Prefix,…which will be added to the beginning of all of our files,…and I'm going to add a space dash space there,…and then we have some options.…
This first set of radio buttons is an either/or choice.…You can either Include Overlapping Areas…or you can export only the Artboard Content.…If you choose to include Overlapping Areas,…that's going to capture content that falls…outside of the Artboard,…in our case, that's the bright red annotations that we have.…I'm going to leave Artboard Content Only enabled.…Next is the option to Export Selected Artboards.…When I went to the Export option,…I didn't have any of our Artboards over here on the right…
- Creating a document with artboards
- Using grids, guides, and guide layouts
- Adding placeholders and text
- Using ligature fonts for icons
- Using layer comps to display states
- Using Adobe Preview CC
- Exporting artboards for review
- Exporting assets for use in InVision
- Working with user interface kits
- Extracting CSS values from a design
Skill Level Intermediate
Q: This course was updated on 11/14/2017. What changed?
A: New videos were added that cover how to use user interface kits to create pixel-perfect designs.
Q: This course was updated on 07/10/2018. What changed?
A: We added one video, "Mobile preview on Adobe XD."