Design & Add a mobile Help Screen

Tools

• Tip #1: Use Microsoft PowerPoint to design the screen

• Tip #2: Use Metro Studio for Icons

• Tip #3: Download Caveat from Google Fonts

Howto

• Copy a image of your mobile UI to Powerpoint

• Add a black Rectangle to your slide from the "Drawing" group in the Home tab of your PowerPoint ribbon

• Select the shape & go to Shape Fill same "Drawing" group

• Click "More Fill Colors.." from the Shape Fill dropdown and set the Transparency to 15% in the resulting dialog

• Metro Studio has few quirks. But you can use PowerPoint to make the image background transparent. (Picture Tools --> Format --> Color --> Set Transparent Color)

• You may also want to crop the picture to make sure it's the right size

• Add icons to the slide and drag it over to the right place. You may need to use "Bring to Front" by right clicking if the icon chooses to hide behind your black panel

• For arrows use the "Curve" tool from the "Drawing" group in the Home tab

• Right click on the resulting curve line should give you an option to change the line ending to an arrow head.

• Group everything together, Right click & "Save as Picture..."