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 Pen­nell of Dig­i­tal Web Mag­a­zine recently sat down with the boys from Side­bar Cre­ative for a group chat about our lit­tle design col­lec­tive.

We talk about what goes on behind the scenes, our approach to cre­at­ing web apps (includ­ing our first ven­ture, MyMile­Marker), and our plans for the future.

Work­ing with Side­bar has been a won­der­ful expe­ri­ence since we started in Jan­u­ary, and this inter­view offers you a glimpse of our per­son­al­i­ties and some insight into why it works.

Categories:

2 Comments

Interviewed by Designer Interviews

Monday, September 24th, 2007

Tis the sea­son for being interviewed—this time I sat down (vir­tu­ally) for some Q&A with Helen from Design Inter­views, and now the fruits of our labor have been pub­lished for your enjoy­ment.

It cov­ers top­ics not touched on in my last inter­view (and vice versa) so if you have a few moments, head on over and check it out. Their list of inter­vie­wees is exten­sive and includes folks like Jeff Croft (inter­view) and Andy Budd (inter­view), though you may need to dig around a bit to find them all (their index of inter­views seems to be incom­plete at the moment).

Categories:

No Comments

Customize your iPhone: SummerBoard

Friday, September 14th, 2007

Update: Sum­mer­Board 2.1+ makes much of this tuto­r­ial inac­cu­rate, but the theme instruc­tions still work. I’ll be writ­ing an updated tuto­r­ial shortly to reflect the changes and additions.

Note: Before fol­low­ing this tuto­r­ial, make sure you have every­thing you need »

The first tuto­r­ial in this series cov­ered using Dock­Swap to change your iPhone’s Dock back­ground, specif­i­cally replac­ing it with one that matches the Dock on the iPod Touch:

customized iPhone Dock

This was fine and dandy until yes­ter­day, when a new ver­sion of Sum­mer­Board (an app which allows cus­tomiza­tion of the iPhone’s Spring­Board, or home screen) was released. This new ver­sion sup­ports themes and var­i­ous other set­tings, but most impor­tantly it appears to pre­vent Dock­Swap from doing its job. Thank­fully, we can now take advan­tage of SummerBoard’s new theme sup­port to set a cus­tom Dock back­ground, home screen wall­pa­per, or both.

Sum­mer lovin’

First thing’s first: fire up Installer.app on your iPhone and install Sum­mer­Board (the cur­rent ver­sion as of this writ­ing is 2.0). If you already have Dock­Swap installed, there’s no rea­son to unin­stall it; it just doesn’t affect any change when you use it. How­ever, if you’d like to save some space, you can go ahead and remove it.

Sum­mer­Board 2.0 offers the fol­low­ing home screen (aka Spring­Board) cus­tomiza­tion goodness:

In addi­tion to those main fea­tures, there are extra set­tings which give you addi­tional con­trol over your home screen:

SummerBoard preferences

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

Sim­ple themes

Sum­mer­Board 2.0 includes four themes by default:

Each theme is com­prised of three images (pixel dimen­sions fol­low each file name):

Cre­at­ing your own cus­tom theme is sim­ply a mat­ter of cre­at­ing each of those images, plac­ing them in a folder and then copy­ing that folder to the proper loca­tion on your iPhone.

Adding a cus­tom theme

There’s really no end to the num­ber of cus­tom themes you can cre­ate using an image edi­tor and some free time, so I’ll leave that process to you (after all, this isn’t an image edit­ing tuto­r­ial). We will, how­ever, walk through the sim­ple process of trans­fer­ring a cus­tom theme to your iPhone.

First, we need a cus­tom theme—for this exam­ple, I’ve cre­ated a theme based on the iPod Touch home screen, com­plete with plain black wall­pa­per (in case don’t want your “lock screen” image show­ing up behind your icons). For those of you who already fol­lowed my ear­lier tuto­r­ial on replac­ing your Dock back­ground (see the Dock screen­shot at the begin­ning of this tuto­r­ial), this will allow you to have the same look with Sum­mer­Board 2.0 installed:

After decom­press­ing the archive, you will have a folder named “Touch” that con­tains the required image files.

Next, con­nect to your iPhone via SFTP (read the instruc­tions if needed), and nav­i­gate into Library/SummerBoard/Themes (the full path is /private/var/root/Library/SummerBoard/Themes), where you’ll see the direc­to­ries of the four pre-installed themes men­tioned ear­lier. 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” but­ton) and launch SMBPrefs, then press “Theme” and select “Touch” (the theme we just uploaded). Press the “Home” but­ton once more to return to your home screen and see the new theme in place, look­ing some­thing like this:

iPhone with SummerBoard Touch theme

Share your customizations

If you feel inspired and cre­ate a cool theme, upload an archive to your site or other file repos­i­tory and link to it in the com­ments of this entry. At some point in the near future, iPhone cus­tomiza­tion sites will begin to sup­port themes, but until then it’ll be fun to pass them around.

Even if you pre­fer to not share your cus­tom images, be a good sport and share any cool cus­tomiza­tions with the entire class by post­ing screen­shots of your cus­tomiza­tions to Flickr and adding them to the iPhone Cus­tomiza­tion group.

Categories:

62 Comments

Customize your iPhone: DockSwap

Monday, September 10th, 2007

Update: “Dock­Swap” is now known as “Cus­tomize”. Also, for more theme-like options, you may want to use Sum­mer­board instead »

Note: Before fol­low­ing this tuto­r­ial, make sure you have every­thing you need »

With the intro­duc­tion of the iPod Touch, many iPhone own­ers (myself included) let slip a few quiet “ooohs” and “ahhs” at the more Leopard-esque Dock back­ground behind the 4 main appli­ca­tion icons:

iPod Touch Dock

Ini­tially, I just resigned myself to the hope that Apple would update the look of the Dock in the next major iPhone Soft­ware Update. But then a few days ago, a new appli­ca­tion appeared in the Installer.app list: Dock­Swap, along with some cus­tom Dock back­ground images. Bleeding-edge devel­op­ers be praised! Of course, I had to install it and make my own cus­tom back­ground, and this tuto­r­ial is a result.

Before and after

By fol­low­ing 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 replac­ing the default appli­ca­tions or icons in this tuto­r­ial, though I plan to cover launch­ers and Spring­Board cus­tomiza­tion in the future.

Get Dock­Swap

Before we dig into the graph­ics, launch Installer.app on your iPhone, and install Dock­Swap. There are also some cus­tom back­ground images for Dock­Swap, so go ahead and install them if you want to play around with some alter­nate options.

Do not touch?

When I started writ­ing this tuto­r­ial, the default pack­age of cus­tom Dock back­grounds did not include any iPod Touch ver­sions, how­ever this has since been reme­died. For those of you who don’t want to cre­ate a cus­tom ver­sion (e.g. chang­ing the back­ground color to some­thing other than black) or haven’t cus­tomized the four default iPhone appli­ca­tion icons (Phone, Mail, Safari, iPod), you can just install the cus­tom images and use one of the included iPod Touch back­ground images—however, as of this writ­ing, I still pre­fer my ver­sion since it is closer to the real iPod Touch background.

The tem­plate

To make it as easy as pos­si­ble to cus­tomize the dock image, I’ve cre­ated a sim­ple, lay­ered Pho­to­shop file that includes the default set of icons, a cus­tomiz­able back­ground color layer, and the other ele­ments in sep­a­rate lay­ers in case you want to play around on your own:

If you don’t have Pho­to­shop, I’ve also cre­ated two PNGs, one with reflec­tions and one without:

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

Your cus­tom background

If you don’t plan to make any cus­tomiza­tions, and just want the iPod Touch look, you can just down­load one of the PNGs above and skip to the next sec­tion. Oth­er­wise, read on.

The PSD includes a text layer with reminder instruc­tions, so make sure you hide that before export­ing your image.

You can eas­ily change the back­ground color of the dock by double-clicking the bot­tom layer in the layer group (named “bg color”). Some col­ors will work bet­ter than oth­ers, so play around until you get the desired result. Darker col­ors will work better:

alternate Dock background colors

Of course, there’s no limit to what you can do visu­ally, but I’ll leave fur­ther explo­rations to you.

Once you have your back­ground 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 cus­tom back­ground image(s), it’s time to get them on your iPhone, and the eas­i­est way is via SFTP. If you fol­lowed the instruc­tions, you will be able to con­nect directly to your iPhone via its IP address (your iPhone must be con­nected to a WiFi net­work 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 net­work to which you are connected.

Con­nect to that IP address using your SFTP client, with “root” as the user­name and “dot­tie” as the pass­word (to keep the con­nec­tion alive, you may need to tem­porar­ily change your iPhone’s Auto-Lock set­ting to “Never”, under Settings→General→Auto-Lock, to pre­vent the iPhone from enter­ing sleep mode).

Once logged in, nav­i­gate into the “Library” direc­tory that appears (the full path to this direc­tory is /private/var/root/Library). Once there, nav­i­gate into the “Dock­Swap” direc­tory (if it doesn’t exist, cre­ate it), and then cre­ate a new direc­tory named “Cus­tom”.

Upload your back­ground images into the newly cre­ated “Cus­tom” direc­tory, then launch Dock­Swap on the iPhone and select your new back­ground image. Press your “Home” but­ton to return to the Spring­Board (which auto­mat­i­cally restarts), slide the unlock switch, and your Dock should now be graced by your cus­tom back­ground image!

Share your customizations

In the grand spirit of shar­ing, if you cre­ate some snazzy new cus­tom Dock back­ground, post it online and link to it in the com­ments of this entry, and I’ll start cre­at­ing a col­lec­tion that can be posted as a pack­age. I may also see about get­ting such a pack­age added to the Installer.app sources so it can be reg­u­larly updated and eas­ily installed on iPhones everywhere.

Even if you pre­fer to not share your cus­tom images, go ahead and post screen­shots of your cus­tomiza­tions to Flickr and add them to the iPhone Cus­tomiza­tion group.

Categories:

8 Comments

Customize your iPhone

Monday, September 10th, 2007

I’ve been enam­ored with my iPhone since stand­ing in line for it back on June 29th. It’s the only thing I’ve ever waited in line for (not even con­cert tick­ets or an Xbox360) and so far I’ve been thrilled with it—it’s the sin­gle coolest item I’ve ever owned.

Of course, that doesn’t mean I didn’t dive into hack­ing and cus­tomiz­ing it the minute var­i­ous 3rd-party options became avail­able, and now with Null­river Software’s excel­lent AppTapp/Installer.app (cur­rently an unsup­ported beta for OS X and XP/Vista), there’s no rea­son why any­one shouldn’t start play­ing (well, other than the pos­si­bil­ity of some­how ruin­ing your iPhone and maybe void­ing the war­ranty in the process—standard dis­claimers apply from this point on; you have been warned).

Tuto­ri­als in this series

If you already have the required soft­ware installed (see below), you can jump directly to each arti­cle as it becomes avail­able (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 tuto­r­ial will also list any other soft­ware needed to com­plete the steps, but you’ll need the items above no mat­ter what.

Do you like to “do it yourself”?

I’m not really describ­ing any­thing ground­break­ing in these how-to’s, so if you want to just dive in and learn every­thing there is to know, the iPhoneAt­las list of native appli­ca­tions is a great place to start.

Add your suggestions

As always, if you have any tips, tricks or links that will add to the expe­ri­ence, post a com­ment on the appro­pri­ate tuto­r­ial (or this entry if it’s more gen­eral info).

Categories:

6 Comments

Older