A face for your field guide

11 July, 2011 10:10 by Simon O

Part One: Optimising Your Images

In this series of blogs were going to discuss the visual aspects of your app and how we approached the design of Museum Victorias Field Guide app. In later posts, I'll cover the design and branding of your app which is seen most prominently on the splash screen and home screen, I'll run you through how to make interface elements such as icons and how to create layouts to display your data, using HTML and CSS.

In this post we're going to focus on the main images of the Field Guide app in this case the photos of the animals. Before we jump straight in, you'll notice that when you select any animal in the Field Guide app that there is at least one hero image for each animal and sometimes multiple images as you can see indicated by the gallery module. There is also a square thumbnail image for each animal. These appear next to each individual animal within the Animal Groups and are usually the same as the first hero image.

So let's take the European Honey Bee or Apis mellifera as an example. If you search for it in the app, it appears like so (Figure 1). It has a thumbnail in the Insects listing as well as three images in the gallery of the main panel.

 

European Honey Bee (Apis mellifera) on the iPad app. Required image assets highlighted in colour.European Honey Bee (Apis mellifera) on the iPad app. Required image assets highlighted in colour.
Image: Simon O. Photo Credit: Flagstaff Studios
Source: Museum Victoria

The thumbnails should be a square crop of the original image. We found that saving them at dimensions of 150 x 150px was optimal for both the regular iPad and iPhone Retina displays.

Full-size images in the app should not be larger than 1024 pixels in both width and height. So, for example, you could have a landscape image at 1024 x 680px and it would work just fine. The reason you need to keep it within these dimensions is so that you can keep the memory down on the users iPad or iPhone and therefore the images will scroll, pan and zoom without any lag.

 

Original images (left) and exported images and their dimensions (right).Original images (left) and exported images and their dimensions (right).
Image: Simon O. Photo Credit: Flagstaff Studios
Source: Museum Victoria

Once you've set the right dimensions on your image, you need to export them at a suitable quality. Obviously, you want your images to look nice and sharp and free from artefacts, but if you've got a lot of images, you'll need to find a compression rate that will also keep the file size reasonably small. In this case, photos are best exported as JPEG files. You may also save your files in 24 or 32-bit PNG format, however this will produce larger file sizes.

To apply these settings, use an application such as Adobe Photoshop, or a free alternative like GIMP or Paint.net. For large groups of photos, you can save time by setting a batch process using actions in Photoshop, Lightroom or Aperture.

Be sure not to overwrite your original photos as you may need to export at larger dimensions for future versions of the iPad (or other tablets), which will likely have a higher pixel density.

Good luck and feel free to ask questions or make suggestions by posting a comment below.

Exporting an image of the European Honey Bee (Apis mellifera) with Photoshop’s Save for Web dialog. On the left is the original image and on the right is a 50% JPEG. Notice the slight artefacts around the bee’s antennae.  This will barely be noticeable once on the mobile device.Exporting an image of the European Honey Bee (Apis mellifera) with Photoshop’s Save for Web dialog. On the left is the original image and on the right is a 50% JPEG. Notice the slight artefacts around the bee’s antennae. This will barely be noticeable once on the mobile device.
Image: Simon O. Photo Credit: Flagstaff Studios
Source: Museum Victoria

 

<< July Already?  |  Developers, Developers, Developers >>

Comments (2)

sort by
newest
oldest
Jane 14 April, 2013 15:40
Lovely looking app on my new ipad but no sound files can be heard-any thougts?
Discovery Centre 16 April, 2013 13:33

Hello Jane

Thank you for your enquiry regarding your issue with the audio files not playing from within our MV Field Guide app. Our app developer has asked that you run the following test:

o   Plug in a set of headphones

o   Navigate to Frogs = > Giant Burrowing Frog

o   Tap the audio icon (top right), and then tap the "Credit: Murray Littlejohn" line. The play icon should change to a speaker icon.

o   Is there sound coming through the headphones?

§  If yes, then the iPad is most likely on mute. (Not all apps respect the mute switch, so you may still have heard sounds from other apps even if the mute button was on).

§  If no, and the headphones work for listening to music or another app, let us know and we will pass your feedback back to our app development staff. You can get in touch via the "Contact Us" link at the bottom of this page.

close this reply
Write your reply to Jane's comment All fields are required

We love receiving comments, but can’t always respond.

About this blog

We've released the source code for MV's Field Guide Project under a MIT style license. This blog will help you identify all the material you need to collect so that you can publish a field guide of your own.

MV's Open Sourced Code on Github

View all Museum Victoria's apps

Blog authors

Simon S is the programmer behind the field guide app.

Simon O is the designer behind the field guide app.