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

Dan Rubin's SuperfluousBanter

Design, random musings, and the Web. Since 1977

Archive for 2007

Older

Pink for October

Tuesday, October 2nd, 2007

As you may have noticed (if you’re view­ing this site in a stan­dard brows­er), I’ve ditched orange in favor of pink, and things will stay that way for the rest of Octo­ber. I’m doing this, along with many oth­er sites, to sup­port Breast Can­cer Aware­ness Month.

For more infor­ma­tion on this project (cre­at­ed by Matthew Oliphant), check out the Pink for Octo­ber site.

Categories:

11 Comments

Sidebar Creative Interviewed by Digital Web

Tuesday, September 25th, 2007

Matthew Pen­nell of Dig­i­tal Web Mag­a­zine recent­ly 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­Mark­er), and our plans for the future.

Work­ing with Side­bar has been a won­der­ful expe­ri­ence since we start­ed 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

Customize your iPhone: SummerBoard

Friday, September 14th, 2007

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

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

The first tuto­r­i­al in this series cov­ered using Dock­Swap to change your iPhone’s Dock back­ground, specif­i­cal­ly replac­ing it with one that match­es 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 oth­er set­tings, but most impor­tant­ly it appears to pre­vent Dock­Swap from doing its job. Thank­ful­ly, we can now take advan­tage of Sum­mer­Board­’s new theme sup­port to set a cus­tom Dock back­ground, home screen wall­pa­per, or both.

Summer 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 does­n’t affect any change when you use it. How­ev­er, 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­tion­al 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.

Simple themes

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

Each theme is com­prised of three images (pix­el 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 fold­er and then copy­ing that fold­er to the prop­er loca­tion on your iPhone.

Adding a custom theme

There’s real­ly 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­i­al). We will, how­ev­er, 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­at­ed 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­li­er tuto­r­i­al on replac­ing your Dock back­ground (see the Dock screen­shot at the begin­ning of this tuto­r­i­al), 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 fold­er named “Touch” that con­tains the required image files.

Next, con­nect to your iPhone via SFTP (read the instruc­tions if need­ed), 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­li­er. Once there, upload the entire “Touch” fold­er (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 oth­er file repos­i­to­ry 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­i­al, make sure you have every­thing you need »

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

iPod Touch Dock

Ini­tial­ly, 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. Bleed­ing-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­i­al 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­i­al, though I plan to cov­er launch­ers and Spring­Board cus­tomiza­tion in the future.

Get DockSwap

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 start­ed writ­ing this tuto­r­i­al, the default pack­age of cus­tom Dock back­grounds did not include any iPod Touch ver­sions, how­ev­er 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 col­or to some­thing oth­er 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 includ­ed iPod Touch back­ground images—however, as of this writ­ing, I still pre­fer my ver­sion since it is clos­er to the real iPod Touch background.

The template

To make it as easy as pos­si­ble to cus­tomize the dock image, I’ve cre­at­ed a sim­ple, lay­ered Pho­to­shop file that includes the default set of icons, a cus­tomiz­able back­ground col­or lay­er, and the oth­er 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­at­ed two PNGs, one with reflec­tions and one without:

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

Your custom 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 lay­er with reminder instruc­tions, so make sure you hide that before export­ing your image.

You can eas­i­ly change the back­ground col­or of the dock by dou­ble-click­ing the bot­tom lay­er in the lay­er group (named “bg col­or”). Some col­ors will work bet­ter than oth­ers, so play around until you get the desired result. Dark­er col­ors will work better:

alternate Dock background colors

Of course, there’s no lim­it to what you can do visu­al­ly, 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 direct­ly to your iPhone via its IP address (your iPhone must be con­nect­ed 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­i­ly change your iPhone’s Auto-Lock set­ting to “Nev­er”, 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­to­ry that appears (the full path to this direc­to­ry is /private/var/root/Library). Once there, nav­i­gate into the “Dock­Swap” direc­to­ry (if it does­n’t exist, cre­ate it), and then cre­ate a new direc­to­ry named “Cus­tom”.

Upload your back­ground images into the new­ly cre­at­ed “Cus­tom” direc­to­ry, 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­cal­ly 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 spir­it 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 post­ed 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­lar­ly updat­ed and eas­i­ly 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

Flickr Old Skool Badges

Thursday, February 15th, 2007

Flickr old skool badge examples

On Jan­u­ary 30th, pre-acqui­si­tion mem­bers of Flickr received an email. For those of you who did­n’t receive the mes­sage, it looked some­thing like this. The gist of the mes­sage was that, on or before March 15th 2007, us “old skool” mem­bers would have to roll our orig­i­nal Flickr user­names (our email address­es) into new or exist­ing Yahoo! accounts.

Stick Wit U

Now, I’m not going to get involved with the dis­cus­sion about the mer­its of this deci­sion, espe­cial­ly since I’m going to have to cre­ate a spe­cial Yahoo! account just for Flickr (per­son­al pref­er­ence, yes, but only because I only use my exist­ing Yahoo! account for com­mu­ni­ca­tion with a few spe­cif­ic offline orga­ni­za­tions, and com­bin­ing them with Flickr just does­n’t make sense), but I thought in the spir­it of us old skool mem­bers stick­ing with Flickr for so long, through thick and thin, I’d whip up an easy way to dis­play our “age” (per­haps you’d pre­fer “stead­fast­ness”?). So, with one month to go until the dead­line, here they are: Flickr Old Skool Badges.

Badges? We Don’t Need No Stinkin’ Badges!

Each badge is a 48px x 48px trans­par­ent PNG, per­fect for lay­er­ing right on top of your exist­ing Flickr pro­file image. Just right-click on the links below to save each image to your computer.

No usage restric­tions, just cred­it me and link back here if you alter and redis­trib­ute them, and don’t redis­trib­ute the orig­i­nal ver­sions (link direct­ly to this entry).

Old Skool users rawk!

Updates

Categories:

22 Comments

Older