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..."
Comments