I was working on a client request for a realistic screen preview in a device for marketing purpose, and I realized while there are so much love for the iPhone/iPad mock up, there are rarely such mock up preview kit for Nexus devices for free. So while I am working on that request, I also made the Android Design Mock Up Preview Kit (Nexus 5) freely available for any use.
What to expect
- 1 x Adobe Photoshop file (.PSD)
- 1 x Microsoft Powerpoint file (.PPTX)
- My left hand (in the image, not the physical one)
- Nexus 5 device with replaceable smart object for the screen
How to use
It’s rather straight forward to use them. You should have the screenshot/mock up image (ideally in PNG format) ready with the resolution of 1080×1920. Android UI Design Kit for Photoshop 4.4 can output at this resolution.
- Adobe Photoshop version: Open it up, double click on the smart object with the label ‘REPLACE SCREENSHOT HERE’, paste the screenshots or mock up in it, and save. The screenshot should be reflected in the preview kit. Drop a background image, apply some light Gaussian Blur on it, and you are good to go! If it’s necessary due to brightness difference, adjust the color overlay effect for the hand layer.
- Microsoft Powerpoint version: Open it up in Microsoft Powerpoint 2013, right click on the hand layer, send to back. Then right click on the screen layer > change object > select the screenshot/mock up. The screen should be changed to your selected. Send the hand layer to the front. Drop a background image, send backward, apply blur, and you are done! You can turn on the Selection Pane to make the layer management easier.
If you are wondering how this preview kit can be used, below are some examples (click on them to view full size):
As usual, it is ready to download via my Mediafire storage space – Android Design Mock Up Preview Kit.
Hope this helps in creating some awesome marketing material! I will try (no promise) to release a few more variants of such preview kit if I am able to do so.