Design, random musings, and the Web. Since 1977
Tuesday, October 2nd, 2007
As you may have noticed (if you’re viewing this site in a standard browser), I’ve ditched orange in favor of pink, and things will stay that way for the rest of October. I’m doing this, along with many other sites, to support Breast Cancer Awareness Month.
For more information on this project (created by Matthew Oliphant), check out the Pink for October site.
Categories:
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:
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:
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.
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:
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.
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.
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:
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:
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:
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.
By following the steps below, we’re going to take our iPhone Dock from its default style:
to a shiny new “iPhone Touch” version:
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.
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.
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.
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.
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:
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).
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!
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:
Thursday, February 15th, 2007
On January 30th, pre-acquisition members of Flickr received an email. For those of you who didn’t receive the message, it looked something like this. The gist of the message was that, on or before March 15th 2007, us “old skool” members would have to roll our original Flickr usernames (our email addresses) into new or existing Yahoo! accounts.
Now, I’m not going to get involved with the discussion about the merits of this decision, especially since I’m going to have to create a special Yahoo! account just for Flickr (personal preference, yes, but only because I only use my existing Yahoo! account for communication with a few specific offline organizations, and combining them with Flickr just doesn’t make sense), but I thought in the spirit of us old skool members sticking with Flickr for so long, through thick and thin, I’d whip up an easy way to display our “age” (perhaps you’d prefer “steadfastness”?). So, with one month to go until the deadline, here they are: Flickr Old Skool Badges.
Each badge is a 48px x 48px transparent PNG, perfect for layering right on top of your existing Flickr profile image. Just right-click on the links below to save each image to your computer.
No usage restrictions, just credit me and link back here if you alter and redistribute them, and don’t redistribute the original versions (link directly to this entry).
Old Skool users rawk!
Categories:
