Android tablet backdrop


#1

I would like to design for a Samsung Galaxy Tab S2 9.7.

There is an Android KitKat mockup on Mockups to Go which I downloaded and am about to import into my project as Symbols (using the tutorial) so I can use one of the screens as a backdrop to my designs.

However if I wanted to use a more accurate backdrop can I just use a JPEG image of the specific tablet downloaded from the web as a symbol? (can post the image if necessary but suspect it’s not)

I can guess but would like to hear from an expert!

Thanks.


#2

Sure thing, @Jim_S!

In this case, I would recommend saving the needed image on your local machine first, and then importing it in your project/mockup. Once that is done, you can make a symbol out of it by following these steps.

Hope this helps! :slight_smile:


#3

Thank you @Virgin. To help me understand further then, what would I be losing by doing this rather than using a backdrop from a BMML file such as the Android KitKat mockup? (disregarding the accuracy of the backdrop for my design) Have the device backdrops in that BMML file just been made from bitmap images?

Thanks again.


#4

The main difference is that those Mockups To Go elements are made from the default controls in the UI library. This means that entering the symbol by either overriding the symbol properties or editing the symbol source will allow you to modify each control individually if needed.

That being said, if there is no element that you need to remove from an imported image, this could be a great solution for you too.

Let us know if you need any further information, my friend!


#5

I see - thanks for the clear explanation @Virgin


#6

I created a symbol from the publicity image of the tablet and a blank rectangle canvas I put on top of the display of the tablet. If create a mockup using that symbol alone (just to start) everything looks fine in the mockup edit screen and side panel. However when I close the mockup it appears differently in the project view and single mockup view. There’s what looks like an image icon (square with cross inside) top left of mockup instead of the image and I see the blank rectangle canvas. Get same when try to export image. When I go back to edit the real image appears fine again. Please explain what’s going on.

Thanks!


#7

I’m really not sure what’s going on but I tried to create another new symbol a slightly different way. When I saved the mockup I was using to create the new symbol the other mockups (using the first symbol I created) suddenly changed so they now look right in the project view & when exported as png!


#8

Sorry about that, Jim. Not sure what happened, but I’m glad it’s working correctly now. Might have been a hiccup in our Mockup —> Image converter. If you’d like, I’d be more than happy to take a look. :slight_smile:


#9

OK, thanks Brendan. Maybe it would be useful for you to have a look and give me any tips. Please let me know what I need to do to give you access.


#10

If you can shoot an email to support@balsamiq.com from the email you used to register your account, I can get started. The only thing I need is your permission. :slight_smile:


#11

Got it Jim! I’ll be in touch soon. :slight_smile: