Nexus 5 Vector Mockup
tl;dr Below, you can grab a vectorized SVG stencil of the Nexus 5 smartphone (in black) to create your own shiny app mockup.
I love Inkscape. I really do. It’s one of those programs with which you develop a love-hate relationship while trying to master it. Once you have mastered it, it’s incredibly useful. It’s not that I don’t like commercial tools such as Illustrator or Photoshop. But having a free, open-source program with this level of maturity just feels way better. Frankly, by now I try to use it for creating/editing graphic assets whenever I can.
A while ago, I needed a nice and shiny Android phone mockup to show off an app on a website. I found myself looking in vain for high quality SVG mockups of the Google Nexus 5 (which, at the time, was the Android flagship). So I created my own. Here are some impressions:
You can find the download link at the bottom. The file is released under a Creative Commons share-alike license, so feel free to use and modify it in any way, as long as you share any modifications. If you want, you can attribute this post, but I really don’t care if you don’t.
To insert your own screen art, install Inkscape, open the SVG and make sure you have a 1080x1920 screenshot at the ready. In the SVG, you will see three layers - Gloss, Phone and Screenshot. If the Layers tab is not visible, press Ctrl + Shift + L.
Here’s how you create a nice rendering with your own screenshot:
- Pick the default screenshot image and delete it (press Delete).
- Make sure the Screenshot layer is selected and import your own screenshot (File > Import or Ctrl + I).
- Double-check that your screenshot is 1080x1920 and set its position to X: 0, Y: 0 (you can can do this in the object properties bar up top).
- If you don’t want gloss, toggle the visibility of the Gloss layer (click on the Eye icon).
- To export a PNG, press Ctrl + Shift + E (or select File > Export PNG Image). The Export dialog will appear on the right. Make sure Drawing is selected, choose a resolution and a file name. Click on Export.
Voila. Enjoy your mockups! Did I mention that I love Inkscape?