UPDATE: This post contains information about Sweeter Home Preview 1 which has now been superseded by Sweeter Home 2. Some information in this post may be outdated or inaccurate for use with Sweeter Home 2.
Updated PSD grid guides can be downloaded here.
If you’ve been playing with the tray functions and layout in Sweeter Home you may be ready to start designing images to use as parts of your themes. Images sit on layers above the wallpaper and move across the wallpaper as you scroll between screens, like other content in Sweeter Home. Using images with invisible icons (which I’ll show you how to do later this week) means your layouts are limited only by your imagination… and possibly access to a program like Photoshop.
To help you out as you play with images I’ve uploaded two files for you below – the exact visible screen size (not including the notification bar) overlaid with the Sweeter Home grid sizes which layout trays snap to. It’s important to note that home screens are broken into a 16×16 grid for both portrait and landscape views. Due to the notification bar the usable screen sizes are slightly different in each view, meaning the grid sizes are different too.
If you use these templates to create full size images for your theme, remember to set your image in Sweeter Home to the following: iMode: TILE; imageType: DEVICE (or internet as applicable).
Click the images for full size.
PORTRAIT
SCREEN: 320px(w) x 455px(h)
GRID: 20px(w) x 28.4375px(h)
LANDSCAPE
SCREEN: 480px(w) x 295px(h)
GRID: 30px(w) x 18.4375px(h)
Here’s an example of my Thrillho menu sitting on top of the grid template to show you how it works:
