Working with images

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.

One of the biggest differences between Sweeter Home and other home replacements is the ability to use images in your layouts. The images sit above the wallpaper with the rest of your content and swipe above the wallpaper as you move between left, right and middle screens. Rather than just dropping square images into your layouts (like a picture of your mum… not that there’s anything wrong with that…) using transparent PNG images can make for some rich looking environments in your home screen.

The video that showed people the potential of Sweeter Home when it comes to images was my Matricks demo. That was a pretty corny look at images – and they were pretty big too, not ideal for keeping your theme light weight and snappy – but it was a good indicator of what you can get up to with some imagination and Photoshop (or The GIMP). You can search the almighty Google if you need help creating images with transparent backgrounds in Photoshop and The GIMP. Below I’ll show you how to insert and use images in your layouts.

If you’re creating an image from scratch to use in your layout I recommend using my image templates. They’ll help you save your image to the actual grid sizes used in Sweeter Home. I always use TILE as my image setting to stop any scaling and display the image just as I saved it, so the templates help to position the image exactly.

In this example I’ll step through inserting my Thrillho menu into an empty screen. You can grab the image here, drop it onto your SD card and play along.

Enter Edit Layout mode, hit the menu button again and select new, then Image. The default image is now a small version of your wallpaper, so let’s hit menu and edit. In the first edit screen we’re going to change the imode to ‘TILE’ and let’s drop the layer back to 1 since later we’ll want to drop invisible icons above it.

Now we need to select the actual image from your SD card. Hit the button that reads ‘configure’. Here’s where we select the image you want to use. Change the imageType to ‘DEVICE’. Then hit the ‘Choose Image’ button. From the image list select the Thrillho menu.

Close and then close again. Now we’re back on your home screen with the Menu partially showing. Simply drag it to size and exit the layout mode.

As above, using the TILE setting keeps your images as you saved them, without scaling, but there are several options where you can fill or centre an image too, which may be useful for photo style graphics but probably not text. It also means you can’t position your graphic exactly but if you’re not using the graphic to launch apps or trays that’s probably not a big deal.

Lastly, in the current version of Sweeter Home (Preview 1) images do not save as part of your .sly file, so if you want to share your theme and have the image included you’ll need to have the image online somewhere (and hotlinkable I believe). Photobucket is a good sharing site that allows hotlinking but if you have your own filespace that will work fine too. To load an image from the net edit the image, ‘configure’, set the imageType to ‘INTERNET’, then click ‘Configure’ on the internetImage setting (the placing of this is a little corky so check the screen shots below). Type the URL location to your image and then close out to your homescreen. It’s important you get the URL exactly right so be sure to type it carefully.

So there you have the basics of using images in Sweeter Home. It seems a little complicated but once you’ve done it once or twice it’ll open a world of design possibilities to you. Remember that the processor in your phone is not as grunty as your home computer. Be aware of memory issues – crop your images accurately and try and keep the file size down. Most importantly, be creative and have fun!