About this site's lack of design: Yes, it's supposed to look this way — I'm helping create a new sandbox theme for WordPress (see it on GitHub).

Dan Rubin's SuperfluousBanter

Suffering from chronic idiocy since 1977

Archive for September, 2007

Older

Sidebar Creative Interviewed by Digital Web

Tuesday, September 25th, 2007

Matthew Pennell of Digital Web Magazine recently sat down with the boys from Sidebar Creative for a group chat about our little design collective.

We talk about what goes on behind the scenes, our approach to creating web apps (including our first venture, MyMileMarker), and our plans for the future.

Working with Sidebar has been a wonderful experience since we started in January, and this interview offers you a glimpse of our personalities and some insight into why it works.

Categories:

2 Comments

Interviewed by Designer Interviews

Monday, September 24th, 2007

‘Tis the season for being interviewed—this time I sat down (virtually) for some Q&A with Helen from Design Interviews, and now the fruits of our labor have been published for your enjoyment.

It covers topics not touched on in my last interview (and vice versa) so if you have a few moments, head on over and check it out. Their list of interviewees is extensive and includes folks like Jeff Croft (interview) and Andy Budd (interview), though you may need to dig around a bit to find them all (their index of interviews seems to be incomplete at the moment).

Categories:

No Comments

Customize your iPhone: SummerBoard

Friday, September 14th, 2007

Update: SummerBoard 2.1+ makes much of this tutorial inaccurate, but the theme instructions still work. I’ll be writing an updated tutorial shortly to reflect the changes and additions.

Note: Before following this tutorial, make sure you have everything you need »

The first tutorial in this series covered using DockSwap to change your iPhone’s Dock background, specifically replacing it with one that matches the Dock on the iPod Touch:

customized iPhone Dock

This was fine and dandy until yesterday, when a new version of SummerBoard (an app which allows customization of the iPhone’s SpringBoard, or home screen) was released. This new version supports themes and various other settings, but most importantly it appears to prevent DockSwap from doing its job. Thankfully, we can now take advantage of SummerBoard’s new theme support to set a custom Dock background, home screen wallpaper, or both.

Summer lovin’

First thing’s first: fire up Installer.app on your iPhone and install SummerBoard (the current version as of this writing is 2.0). If you already have DockSwap installed, there’s no reason to uninstall it; it just doesn’t affect any change when you use it. However, if you’d like to save some space, you can go ahead and remove it.

SummerBoard 2.0 offers the following home screen (aka SpringBoard) customization goodness:

In addition to those main features, there are extra settings which give you additional control over your home screen:

SummerBoard preferences

There isn’t much need to describe in detail what each of these settings does, plus it’s much more fun if you just play around with them and see for yourself.

Simple themes

SummerBoard 2.0 includes four themes by default:

Each theme is comprised of three images (pixel dimensions follow each file name):

Creating your own custom theme is simply a matter of creating each of those images, placing them in a folder and then copying that folder to the proper location on your iPhone.

Adding a custom theme

There’s really no end to the number of custom themes you can create using an image editor and some free time, so I’ll leave that process to you (after all, this isn’t an image editing tutorial). We will, however, walk through the simple process of transferring a custom theme to your iPhone.

First, we need a custom theme—for this example, I’ve created a theme based on the iPod Touch home screen, complete with plain black wallpaper (in case don’t want your “lock screen” image showing up behind your icons). For those of you who already followed my earlier tutorial on replacing your Dock background (see the Dock screenshot at the beginning of this tutorial), this will allow you to have the same look with SummerBoard 2.0 installed:

After decompressing the archive, you will have a folder named “Touch” that contains the required image files.

Next, connect to your iPhone via SFTP (read the instructions if needed), and navigate into Library/SummerBoard/Themes (the full path is /private/var/root/Library/SummerBoard/Themes), where you’ll see the directories of the four pre-installed themes mentioned earlier. Once there, upload the entire “Touch” folder (its path should be /private/var/root/Library/SummerBoard/Themes/Touch).

Now return to your iPhone’s home screen (press the “Home” button) and launch SMBPrefs, then press “Theme” and select “Touch” (the theme we just uploaded). Press the “Home” button once more to return to your home screen and see the new theme in place, looking something like this:

iPhone with SummerBoard Touch theme

Share your customizations

If you feel inspired and create a cool theme, upload an archive to your site or other file repository and link to it in the comments of this entry. At some point in the near future, iPhone customization sites will begin to support themes, but until then it’ll be fun to pass them around.

Even if you prefer to not share your custom images, be a good sport and share any cool customizations with the entire class by posting screenshots of your customizations to Flickr and adding them to the iPhone Customization group.

Categories:

62 Comments

Customize your iPhone: DockSwap

Monday, September 10th, 2007

Update: “DockSwap” is now known as “Customize”. Also, for more theme-like options, you may want to use Summerboard instead »

Note: Before following this tutorial, make sure you have everything you need »

With the introduction of the iPod Touch, many iPhone owners (myself included) let slip a few quiet “ooohs” and “ahhs” at the more Leopard-esque Dock background behind the 4 main application icons:

iPod Touch Dock

Initially, I just resigned myself to the hope that Apple would update the look of the Dock in the next major iPhone Software Update. But then a few days ago, a new application appeared in the Installer.app list: DockSwap, along with some custom Dock background images. Bleeding-edge developers be praised! Of course, I had to install it and make my own custom background, and this tutorial is a result.

Before and after

By following the steps below, we’re going to take our iPhone Dock from its default style:

the default iPhone Dock

to a shiny new “iPhone Touch” version:

customized iPhone Dock

We won’t be replacing the default applications or icons in this tutorial, though I plan to cover launchers and SpringBoard customization in the future.

Get DockSwap

Before we dig into the graphics, launch Installer.app on your iPhone, and install DockSwap. There are also some custom background images for DockSwap, so go ahead and install them if you want to play around with some alternate options.

Do not touch?

When I started writing this tutorial, the default package of custom Dock backgrounds did not include any iPod Touch versions, however this has since been remedied. For those of you who don’t want to create a custom version (e.g. changing the background color to something other than black) or haven’t customized the four default iPhone application icons (Phone, Mail, Safari, iPod), you can just install the custom images and use one of the included iPod Touch background images—however, as of this writing, I still prefer my version since it is closer to the real iPod Touch background.

The template

To make it as easy as possible to customize the dock image, I’ve created a simple, layered Photoshop file that includes the default set of icons, a customizable background color layer, and the other elements in separate layers in case you want to play around on your own:

If you don’t have Photoshop, I’ve also created two PNGs, one with reflections and one without:

You can just use these as-is, or edit them using your non-Photoshop image editor of choice.

Your custom background

If you don’t plan to make any customizations, and just want the iPod Touch look, you can just download one of the PNGs above and skip to the next section. Otherwise, read on.

The PSD includes a text layer with reminder instructions, so make sure you hide that before exporting your image.

You can easily change the background color of the dock by double-clicking the bottom layer in the layer group (named “bg color“). Some colors will work better than others, so play around until you get the desired result. Darker colors will work better:

alternate Dock background colors

Of course, there’s no limit to what you can do visually, but I’ll leave further explorations to you.

Once you have your background image the way you want it, just save it as a PNG (via Save As… or as a 24-bit PNG using the web export option).

Upload and apply

Now that you have your custom background image(s), it’s time to get them on your iPhone, and the easiest way is via SFTP. If you followed the instructions, you will be able to connect directly to your iPhone via its IP address (your iPhone must be connected to a WiFi network for this to work). To find your iPhone’s IP address, tap Settings→Wi-Fi, then the blue arrow next to the name of the network to which you are connected.

Connect to that IP address using your SFTP client, with “root” as the username and “dottie” as the password (to keep the connection alive, you may need to temporarily change your iPhone’s Auto-Lock setting to “Never”, under Settings→General→Auto-Lock, to prevent the iPhone from entering sleep mode).

Once logged in, navigate into the “Library” directory that appears (the full path to this directory is /private/var/root/Library). Once there, navigate into the “DockSwap” directory (if it doesn’t exist, create it), and then create a new directory named “Custom“.

Upload your background images into the newly created “Custom” directory, then launch DockSwap on the iPhone and select your new background image. Press your “Home” button to return to the SpringBoard (which automatically restarts), slide the unlock switch, and your Dock should now be graced by your custom background image!

Share your customizations

In the grand spirit of sharing, if you create some snazzy new custom Dock background, post it online and link to it in the comments of this entry, and I’ll start creating a collection that can be posted as a package. I may also see about getting such a package added to the Installer.app sources so it can be regularly updated and easily installed on iPhones everywhere.

Even if you prefer to not share your custom images, go ahead and post screenshots of your customizations to Flickr and add them to the iPhone Customization group.

Categories:

8 Comments

Customize your iPhone

Monday, September 10th, 2007

I’ve been enamored with my iPhone since standing in line for it back on June 29th. It’s the only thing I’ve ever waited in line for (not even concert tickets or an Xbox360) and so far I’ve been thrilled with it—it’s the single coolest item I’ve ever owned.

Of course, that doesn’t mean I didn’t dive into hacking and customizing it the minute various 3rd-party options became available, and now with Nullriver Software’s excellent AppTapp/Installer.app (currently an unsupported beta for OS X and XP/Vista), there’s no reason why anyone shouldn’t start playing (well, other than the possibility of somehow ruining your iPhone and maybe voiding the warranty in the process—standard disclaimers apply from this point on; you have been warned).

Tutorials in this series

If you already have the required software installed (see below), you can jump directly to each article as it becomes available (this list may expand as more options become available):

What you’ll need

To play along at home, you’ll need a few things before we begin:

Each tutorial will also list any other software needed to complete the steps, but you’ll need the items above no matter what.

Do you like to “do it yourself”?

I’m not really describing anything groundbreaking in these how-to’s, so if you want to just dive in and learn everything there is to know, the iPhoneAtlas list of native applications is a great place to start.

Add your suggestions

As always, if you have any tips, tricks or links that will add to the experience, post a comment on the appropriate tutorial (or this entry if it’s more general info).

Categories:

6 Comments

Older