Overview

This “Pano2VR” tutorial shows you how to use a custom preview image layout that has been designed specifically for the multiple grid sizes available within the Garden Gnomes Package Viewer app.

The tutorial also shows how to add a custom preview image to the Garden Gnome Package (GGPKG) file.

Note: this tutorial is designed for Macintosh computers a Windows 10 version will be released shortly

The Package Viewer App

On the 13th of April 2021, Garden Gnome Software announced the availability of their new Package Viewer App on the App Store and Google Play Store (figure #1)

It’s a great addition to the Garden Gnome Software lineup, a fantastic way to show our work, and incredibly easy to use.

After an initial play-around with the app, I started to wonder how I could add a custom preview image to the app screen.

In my first attempt, it became obvious that the placement of elements such as type, on the preview image was critical as the option, within the app, to change the Grid size meant that there is a limited area of visible space available after the resizing because the title bar height remains constant while the preview area gets smaller.

The other question raised by wanting to add a custom preview image is how can I add it into the .ggpkg package before uploading the package to the app?

Tutorial

In this tutorial, we will look at the two issues mentioned above.

Design a graphic image within the “Title Safe” area and,
Add the new preview image to the GGPKG file.

Tutorial Files

In the tutorial folder, Custom_Preview, there is a 360_Bali_Cairns output folder, with a pre-prepared GGPKG Package, and a Preview_Images folder containing a Photoshop Folder with a .psd file and a preview.jpg and a Title_Safe folder with a preview .jpg, (figure #2)

Note: You will need to download the WinZip application if it isn’t already installed on your system. WinZip allows us to open the .ggpkg package, view the contents, and replace the existing preview.jpg with our own custom version without extracting the files.

Getting Started

Note: before you start you will need to install the Packages App on your devices and have your devices accessible via AirDrop. For information visit Using AirDrop on your Mac

1. Download the zipped tutorial folder here
2. Download WinZip and install it if you haven’t already
3. Download GGPKG Viewer and install it if you haven’t already

The Garden Gnome Package

Note: we will start by reviewing the 360 Bal to Cairns package

1. In the Tutorial folder go to the 360_Bali_Cairns folder and right-click on the package file ‘360 Bali to Cairns.ggpkg’ and selecting ‘Open With’ and then ‘GGPKG Viewer app’ (figure #3)

Note: alternatively you can open the GGPKG Viewer and drag and drop the 360 Bali to Cairns.ggpkg onto it.
Note: test that the tour is working as expected (see sample output below for reference) and the view in the actual GGPKG Viewer (figure #4)

Figure #4: Package open in the GGPKG Viewer

AirDrop to the Packages App

Note: now that we have a working version of the GGPKG package we can load it onto the mobile device. There are a number of different ways we can do this but the fastest is via AirDrop.

1. Open AirDrop by selecting Finder > Go > AirDrop (figure #5)

2. Your device/s should be displayed within the AirDrop window. In this example, my iPhone is displayed. (figure #6)

3. Drag and drop the 360 Bali to Cairns.ggpkg package onto the device icon and the transfer will commence (figure #7)

Note: When the file has finished transferring, it will be extracted within the app if the app is open, If the app is closed it will extract it in the background, and open and display the package automatically once the project has been extracted. (figure #8)

Note: you can now test the package in the app by clicking on it.

The Title Safe Layout

Note: Clicking on the settings icon in the Package App provides access to different options including ‘Grid Size’. This slider changes the relative size of the package preview window in the app (figure #9)

The package preview window consists of an image area (red) and a title bar (green). The title bar is a constant height regardless of the grid size while the image area scales up and down anchored from the top. (figure #10)

The series of images below show the grid sizes for the iPad Pro and iPhone 11 Pro using the Title Safe preview image.

iPad Pro - Landscape (figure #11)
iPad Pro - Portrait (figure #12)
iPhone 11 Pro - Landscape (figure #13)
iPhone 11 Pro - Portrait (figure #14)
Note: click any image to view a larger version

Note the large landscape grid size on the iPhone 11 Pro has a smaller Title Safe than any of the other grid sizes.

When designing custom preview images it’s important to take this image area scaling into account especially if you are adding a title and elements to your preview image.
To this end I’ve reviewed all of the possible sizes on an iPad and iPhone and created a ‘Title Safe’ layout as shown below (figure #15)

#1 - Title Safe: within this area text and graphics will be visible across all Grid sizes with the exception of the iPhone landscape large. Critical text or graphics should remain inside this black-dotted region.

#2 - iPhone landscape large: when the iPhone is in landscape orientation and the Grid size is at its largest setting the lower section of the #1 Title Safe is hidden. It may be prudent to ensure any text should be within the reduced region.

#3 - iPhone small: when the iPhone is in portrait orientation and the Grid size is at its smallest this blue region is hidden completely. Refer to the images showing the grid sizes to determine whether or not this is a critical area for your artwork.

#4 - iPad large: when the iPad or iPhone is in portrait orientation and the Grid size is at its largest then everything with the exception of the brown area (represents the title bar) is shown.

Adding the Title Safe preview image

Note: When you create a GGPKG file Pano2VR automatically creates a preview.jpg from the first node in the tour. In this step we will replace the preview.jpg with the Title Safe preview.jpg.

The GGPKG package is essenitally a zip file so we will use WinZip to reveal the contents of the package. I use WinZip because it reveals the contents but doesn’t unzip them to the desktop.

1. Open the 360 Bali to Cairns.ggpkg into the WinZip by right-clicking on the file and selecting Open With and then WinZip.app (figure #16)

Note: Win.zip will open a window that reveals the contents of the ggpkg file (figure #17)

Figure #17: Contents of the 360 Bali to Cairns.ggpkg file

2. If you wish you can view the current preview.jpg file by right-clicking it and selecting ‘Quick Look “preview.jpg”’ (figure #18)

Note: Win.zip will open a window that displays the preview.jpg image (figure #19)

3. Replace the existing preview.jpg by dragging the preview.jpg file found in the tutorial folder Custom_Preview > Preview_images > Title_Safe > preview.jpg onto the open WinZip window (figure #20) shot of drag action

Figure #20: Drag and drop Title_Safe preview.jpg onto WinZip window

4. When you see the warning Duplicate item found click on ‘Replace’ (figure #21)

5. Close the WinZip window

6. Repeat the steps to AirDrop the Bali to Cairns.ggpkg to the Packages App and you will have a new package displaying the Title Safe preview image (figure #22)

Custom Preview

Note: in the tutorial folder Custom_Preview > Preview_images > Photoshop you will find a custom preview image. The image contains graphics designed to fit within the Title Safe area with text that fits within the iPhone landscape large safe area (figure #23)

In the same folder is a Photoshop file bali_cairns.psd you can use as a template to create your own custom preview images (figure #24)

1. Follow the previous steps to replace the preview.jpg via WinZip and then upload the Bali to Cairns.ggpkg to the device using AirDrop. You will now have a custom preview image that fits the Grid sizes (figure #25

Summary

I hope you have enjoyed the tutorial and it has helped you to achieve the best possible project outcome. If it has please take a second to consider a donation so that I can continue to add more tutorials.

I'd like to Donate

Back to 'Pano2VR Homepage

Package Viewer - Custom Preview (Mac)