I create things. I blog about it. Sometimes.

24 May 2015

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:

  1. Pick the default screenshot image and delete it (press Delete).
  2. Make sure the Screenshot layer is selected and import your own screenshot (File > Import or Ctrl + I).
  3. 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).
  4. If you don’t want gloss, toggle the visibility of the Gloss layer (click on the Eye icon).
  5. 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?

Download the Nexus 5 SVG Mockup