REMIX!

Download this PSD to make any changes; roll your own graphics and make your own version of Groupie.

Please post in the comments or hit me up on Twitter so I can check out your new versions.

REMIX!

Download this PSD to make any changes; roll your own graphics and make your own version of ThrillhoHD.

Please post in the comments or hit me up on Twitter so I can check out your new versions.

I’d like to do the same thing here. If you have a theme and you’d like some direction and advice on how you can better use Sweeter Home’s editing tools to enhance your theme, leave me a comment on this post with your Theme name and Sweeter Home user name.

I’ll take your theme for a work out and then break down areas where you can improve, as well as giving advice on best practise for building your themes. You’ll be able to make your theme more solid and fun to use, and we can all learn from each other.

Let’s go!

Sweeter Home’s deep toolset means that you can build almost anything you can imagine as your home launcher. With that in mind, sometimes the hardest part of getting started with a theme is coming up with a good design concept.

Here’s how I generally go from beginning to end with a Sweeter Home theme:

Inspiration

I look EVERYWHERE for design inspiration. I subscribe to a ton of art and design blogs in Google Reader, including Photoshop tutorial sites and photography blogs. I also read this homescreen topic at XDA fairly religiously. I also throw useful links, tutorials and assets here on this site. Lastly, I keep a Google Bookmarks list of Sweeter Home Reference, which is where I dump anything I find on the net that might influence me later when it comes to building a theme. Look for anything that you can translate to a phone UI. Anything at all, no matter how abstract or “out there”.

Build, Iterate

Get building. For design I use Photoshop. If you can get it, use it; there’s a reason it’s the industry standard in image manipulation. If you’re new to PS then find some tutorials on using Layer Styles. You’ll soon be doing EVERYTHING with Layer Styles, trust me. Be sure to read my tutorial on using Dropbox to quickly refine your images. Take the time to get things right.

Of course you’ll need to get good at building in Sweeter Home too. That can take some time, but once you climb that steep learning curve you’ll reach a place where you can move what’s in you’re head to the phone quickly and effectively. Sweeter Home has a ton of little tricks you can use to make building easier, and make UI behave in ways most people don’t think of. The more time you spend with Sweeter Home the easier this will get.

Think: Usability

When designing and building your theme remember that it has to be usable. If you’re designing for a wider audience then keep that audience in mind at all times. Every button you include has to work, and work as expected. Not everyone has the same widgets that you have installed: should you include them? Are the quirks of your specific theme easy for a new user to understand?

For the most part I always run a theme in a close-to-finished state for at least 2-3 days if not longer. I need to know that all the features work as I intend them to, and I haven’t misplaced a block which messes something up in a situation I wasn’t expecting. Test your own themes and make them perfect before you upload them for the whole to see.

It’s my hope that one of the reasons my themes get downloaded so much is that they just work right out of the box.

What about you?

How do you go about building your Sweeter Home themes? What do you wish you could do better? Who do you build for? What do you love about some other people’s themes?

Let me know in the comments! Let’s all learn from one another.

Required:

• Graphics program (I use Photoshop; try The GIMP for a free alternative, or the excellent Pixelmator for cheap on Mac)
• A Dropbox account (free) and Dropbox installed on your Mac or Windows machine
• The Dropbox Android app
• ASTRO (or any other file manager; I prefer ASTRO because it remembers which directory you’re in)

On your computer

Dropbox lets you set a directory to sync to the cloud automatically. Inside the Dropbox directory create a folder called “Sweeter Home”. Within this folder create another folder with your new theme name; we’ll call ours “Dropbox Dock”.

Using the grid templates I’ve provided here we’ll knock up a quick dock in Photoshop. This is just a dock image with buttons to represent common image use in Sweeter Home. Download the PSD file here if you want to make edits or just have a closer look.

Before we export the image to PNG, we want to crop the image down to the grid size as shown below. This makes the image easier to manage in Sweeter Home; we don’t need a full screen’s worth of blank space.

Export the dock image: in Photoshop File > Save for Web & Devices and set to PNG-24. Save the output to /Dropbox/Sweeter Home/Dropbox Dock. Name it dock1.png. Your sync icon will show that dropbox is syncing and will show a green tick when done.

On your phone

On your phone open Dropbox and login. Navigate to Sweeter Home > Dropbox Dock and you should now see your dock graphic listed there. Long-press it and choose “download”. (Tip: in Dropbox hit the menu button > Settings, then scroll down and check “Show file-status icon”. This gives you a visual indicator of each file in the directory that are now copied to your local storage).

Hit the home button to return to Sweeter Home (don’t back out with the back button; hitting home leaves Dropbox in the same directory for us to return to later).

Edit your theme

Now let’s edit our theme and add the dock image. Hit the menu button then Edit Theme. Hit the menu button again then More then New Theme. Click Yes to confirm. Now long-press your screen and choose New (or menu button then New). Choose Picture from the list.

Drag your Image block to the bottom of the screen and size it as below (note that the image defaults to your current background).

Now long press the block and choose Edit.

Note: any time you edit a block it’s always good practice to rename the block immediately. As you build more complex themes it pays to have everything named clearly while editing.

Click the Title field and name it “Dock”. Change the Positioning field to Distort to fit block (this helps the image scale better if people use your theme on lower screen resolutions). Change the Layer level to 2.

Now let’s choose the image for this block. Press Choose Image. Now press Image Source and change this to Internal Device Picture. Next, press Local Picture then press the Choose Image button.

Android  will present a list of apps you can choose to complete this action; we’re going to use ASTRO. In the ASTRO popup, navigate to /sdcard/Dropbox/Sweeter Home/Dropbox Dock. There’s our dock image. Press it.

Now back out to the homescreen.

Boom. There’s our dock!

Quick iteration

Now, I’ve changed my mind and I think I’d prefer to have the phone button on the left, and the email button on the right. I’ll make that change in Photoshop and export the PNG again. IMPORTANT: you must iterate the name of the image file, so here I’m going to call it dock2.png.

Open Dropbox on your phone. It should still be in the Dropbox Dock directory. Hit the menu button and then Refresh and you’ll see dock2.png. Long-press dock2.png and download it.

Press the home button and let’s edit our image block again. Press Choose Image, then press the field showing the URI to the current local image (something like file:///sdcard/dropbox…), then press the Choose Image button. Choose ASTRO to complete the action and you should be back in the Dropbox Dock directory on your SD Card, only this time dock2.png is there. Press that sucker! Now back out to your homescreen. Taa-daa! Your dock image is updated with phone on the left and email on the right!

You can repeat these steps over and over to quickly iterate images as you build your theme. It’s often important to me to get things pixel perfect, and if a shadow is too dark, or a line is 1 pixel out, I like to spend the time to make those things right. It’s not uncommon for me to have multiple instances of a graphic as I get things just right. Using Dropbox and ASTRO on a WiFi connection I can quickly move images to my SD card without ever having to use a USB cable or go through the painful mount/unmount process.

Coming soon

In Part 2 of this tutorial we’ll make the buttons active using Custom Trays and a Springboard.

To help those of you who like to create custom images for their themes, and want to get your image alignment perfect, attached are PSD (Photoshop) files with a graphical (pixel) grid on a layer as well as actual Photoshop guides already laid out for you. At the moment I’m supplying portrait only.

Note: I’m fairly sure these will open with grids included in The GIMP, which is free.

An important note: these PSD files are NOT the same size as the screen resolution of your device. But this is correct because they exclude the pixels used by the notification bar in Android.

WVGA (for 480×800)
Nexus One, Galaxy S, Desire, Desire HD, EVO etc
HVGA (for 320×480)
G1, Magic, Legend, Backflip etc
FWVGA (for 480×854)
Droid, Defy, X10 etc
QVGA (for 240×320)
X10 mini, X10 mini pro, IDEOS etc

Try scanning this:

If you want to create your own codes to share, just change USERNAME and THEMENAME in the below URL and paste it into your browser address bar (the link will be case sensitive).

http://chart.apis.google.com/chart?cht=qr&chs=230x230&chl=sweeterhome://ws.sweeterhome.com/themes/content/USERNAME/THEMENAME

sweeterskins.net/links

I’ll be adding to this list almost daily. I’ll include anything useful regarding creating custom elements you can use in your Sweeter Home themes including UI design, icons, templates and more. Most of these will be Photoshop tutorials, but you can use the same principals with free software like The GIMP, Paint.NET or Inkscape; or more affordable graphics programs like the excellent Pixelmator for OS X.

As well as me adding to the list, I’ve included a form where you can submit links you’ve found useful too! So submit those awesome Icon Packs and wallpaper sites you use and let’s build something we can all use to build kick-ass, graphically rich themes!

Not so good. Using this method you’re not presenting how your theme actually looks in active mode.

Here’s what you should be doing when sharing your themes:

• When you’re ready to share your theme with the Sweeter Home world, choose an active screen that looks great
• Hit the menu button and press More
• Press Screen Capture
• Make sure Use as Preview for upload is checked
• Press Save
• THEN go into Edit Mode and upload the theme immediately

Choosing a good preview that really represents the best your theme has to offer is the difference between getting 20 or so downloads, or thousands of downloads like the themes below.

A vocal and helpful community is developing too, so here’s some more places you can go to talk to others other Sweeter Home:

There is one particular situation where Sweeter Home needs community feedback desperately. A small number of Droid users are reporting a boot hang after a crash where the screen appears stuck on the Red Eye. While there are a couple of quick fix workarounds, what we really need is is a logcat of the boot process. If you have experienced this (or are experiencing it right now) please READ THIS HELP PAGE. With your help we can fix this experience for all Sweeter Home Droid users.