Brett Terpstradesign page - Brett Terpstra

A Fluid icon for ThinkUp

Brett — Mon, 20 Feb 2012 20:00:31 +0000

I love ThinkUp for managing what there is of my social presence, as well as for archiving my Twitter and Facebook posts. So much so that it gets its own Fluid¹ app. The favicon for the web app (which Fluid uses as the app icon by default) is really sad-looking in the Dock, though, so I whipped up an icon and thought I’d share it. Nothing special, just a little more pleasing to me than the blurry mess the favicon creates.

Running a local copy of ThinkUp isn’t terribly difficult, but I won’t go into a full list of instructions here. There are great instructions on the ThinkUp site for both local installations and running it in the cloud. If you have web sharing turned on, though, and you put it in your Sites folder, you’re most of the way there. I point a virtual host² named “think” to it, and make that the home URL for my Fluid browser.

Click the icon image above to get the full version (or right click and save the linked file). In the general preferences for a Fluid ThinkUp SSB, just use the “Change” button under “Application Icon” and select the ‘png’ file you downloaded.

You’ve heard of Fluid, right? If you regularly use web apps such as Facebook, GMail, Google Reader or any web-based site, you need this. The best part of the registered version is separate cookies, which is extremely useful if you have, say, multiple Google accounts. Just get it! ↩
By the way, managing virtual hosts is way more fun with VirtualHostX. If you do local development or run local websites, I highly recommend it. ↩

Originally posted on BrettTerpstra.com at A Fluid icon for ThinkUp

Stained: Simplify Jacket

Brett — Sun, 06 Nov 2011 15:00:56 +0000

This one was just for fun. I’m sharing it mostly as a starting point for anyone who wants to dig in and make their own theme for Simplify ($2.99 on the Mac App Store), a music controller for Spotify Desktop and iTunes.

If you want to try it out (and you use the Spotify Desktop client and Simplify), just download the file below and unzip it, then double click the Stained.jacket file. It will offer to install it; just click ok and then enable it in the Simplify preferences. There are 4 variations to play with. It has some quirks, but I don’t think it’s bad for an hour’s work.

If you want to hack into it, look in ~/Library/Application Support/Simplify after you install it and dig through the directories there. In one of the oddly named directories, you’ll find the Stained.jacket folder. All of the HTML, CSS, images and JavaScript that comprise the jacket will be in there. If you kill the Simplify app and then launch it from the command line with open -a Simplify.app --args --watch-jackets, it will reload every time you change a file in that directory. Very handy for design/debugging.

Download

Stained — Simplify Jacket — A grungy polaroid Jacket for Simplify. More Info

Originally posted on BrettTerpstra.com at Stained: Simplify Jacket

Bored with your MacVim icon? Me too.

Brett — Sat, 23 Apr 2011 14:19:24 +0000

I got bored with the default MacVim icon a long time ago, before I was even using it regularly. I’ve been using Daniel Fischer’s replacement icons since then, but today I got bored again. I didn’t find anything great out on the net, so I set off to make my own.

If you want to try them out, just download the zip at the bottom of the page. It contains a folder for each available style (6) and each folder has a MacVim.icns file in it. If you go to MacVim.app in Finder and right click it, you can choose “Show Package Contents” to get into the bundle. Then navigate to Contents -> Resources and drop your new MacVim.icns file over the existing one. You might want to move the old one somewhere safe first, you might hate the new one…

Let me know what you think. It’s not my shining moment in graphic design, but I rather like the blue ones. There’s no accounting for taste, right?

Update: Here’s the PSD file (Photoshop CS5), if you want it. You can tweak your own angles, colors and fonts/text easily (there are only a few layers). Most of it is simple layer styles with shapes and masks, and everything is editable. Change the color just by double clicking the bottom shape layer, everything else will shift with it.

Download

Brett’s MacVim Icons v1 — I just got bored with the existing MacVim icons so I thought I’d try to throw something together… Zip file contains ICNS files ready to drop into the Resources folder, as well as PNG versions at 512px. More Info

Originally posted on BrettTerpstra.com at Bored with your MacVim icon? Me too.

Pinboard redesign experiment

Brett — Sun, 13 Mar 2011 07:51:02 +0000

A Pinboard redesign built off of the styles started by Josh Pigford, I’m providing a bare stylesheet which works with StyleBot on Chrome and User CSS on Safari. The Chrome version can be installed straight from Stylebot.me. Stylebot.me also has a userscript version which could be used with Greasemonkey, but my styles don’t seem to translate well to Firefox, yet. I’ll work on that when I have time.

Here’s the raw stylesheet if you want to grab it and use it in User CSS or somewhere else: pinboard.css. I’m not going to tell you it’s bulletproof, but feel free to send in obvious bugs. Also feel free to pick it up and run with it, just link the “credit chain” back and make sure to show us what you did!

Originally posted on BrettTerpstra.com at Pinboard redesign experiment

Dynamic placeholder images, now with kittens

Brett — Tue, 01 Mar 2011 01:27:25 +0000

Thanks to Michael Jones for brightening an otherwise dull day for me. He pointed me to placekitten, a site that mimics placehold.it and inserts dummy images into HTML mockups for you. The difference being that placekitten does it with pictures of, yes, kittens.

While you might not ever show a design filled with kittens to the average client, you can keep yourself feeling warm and fuzzy while you code out the details. You were going to put the client’s images into those placeholders anyway, right?

For whatever you’d actually use it for, I threw snippets into the Tools group (started here) in my TextExpander snippets. If you’re curious, just install them from my TextExpander project page, or update your existing group if you’ve installed via the urls.

For reference, the snippet is simply this:

The g/ in there makes it greyscale, just pull it out of the url to make it color instead. Both versions are in the Tools snippets.

Hey, lighten up. Try some kittens.

Originally posted on BrettTerpstra.com at Dynamic placeholder images, now with kittens

A cleaner HootSuite icon for Fluid/Prism

Brett — Thu, 05 Aug 2010 00:05:49 +0000

This is just a quick pointer to an icon I whipped up this evening for HootSuite. I thought I’d share it in case anyone else found the default icon packed with the Fluid SSB download (available here) unsatisfactory. Their icon is too big and looks awkward in my Dock, so I trimmed it down and vectorized the owl to clean up the lines a bit.

If you haven’t tried HootSuite, it’s a great social media client with a layout similar to TweetDeck. It lacks some of the features that TweetDeck has, but not too many, and it has the benefit of not crashing. Over. And over. Check it out for all your Twitter, Facebook, LinkedIn, Ping.fm, etc. needs.

Here you go: HootSuite Icon Revised

Originally posted on BrettTerpstra.com at A cleaner HootSuite icon for Fluid/Prism

An ode to Twilight, and a TextMate tip

Brett — Thu, 08 Jul 2010 10:39:24 +0000

A good friend of mine, Christina Warren, just published a piece on Mashable / Dev & Design about TextMate themes, and it warms my heart to know there are other people as dedicated to this aging text editor as I am. She also made her collection available on GitHub, so check that out if you’re in the market for a new look.

Despite the lack of any major TextMate update for years now, it’s still my absolute favorite editor. I’ve tried to let go of it. I played with Coda when it came out, and even tried to port some of my favorite TextMate bundles (without much success), but in the end it turned out that I really like having multiple windows taking advantage of my multi-monitor setup. At least when it comes to Terminal (which, thanks to Visor, is never further away than a double-tap on my control key), FTP programs and my editor. So that was a wash.

Espresso came out a while after, and it was (and is) hands-down the sexiest text editor out there. I still use it whenever I can, but I just haven’t found it to be as extensible and comfortable for me as TextMate. I can make TextMate do anything. Seriously, it made the coffee I’m drinking.

And now, I’d like to pay tribute to one of the original TextMate themes which, in my opinion, is still the greatest theme ever. I’m not alone in this, people espouse its virtues throughout the search engines, it’s been ported to Espresso, Coda, even Notepad++ on Windows, and you can often find online code rendered in its pleasing pallete. I like light on dark themes in general, and I do, on occasion, like to switch to something high-contrast like Succulent or Vibrant Ink. I even like dark brown backgrounds with mellow foregrounds, sometimes. But I always end up back at Twilight, with its slate background and perfectly contrasted colors. It’s detailed and effective in just about every possible syntax, and I find it perfect for readability. I just wish they hadn’t gone and named a tale of girly vampires after it.

I will offer a bit of a tip to try to bring this post around to being… interesting? Did you know that you can actually pull off multiple themes in one? If you look at the screenshot in this post, you’ll see two different color schemes, one for my MultiMarkdown files, and one for my PHP code. It’s a customization of the Twilight theme, with custom colors added for Markdown-specific scopes. In the Preferences, under Fonts & Colors, you’ll note that every color definition has a related scope. You can add new scopes and define colors by pressing the plus button on the left.

You can use a simple TextMate command to find the scope for a particular item. Create a new command in the Bundle Editor, set it to Save Nothing, Input: None, Output: Show as Tool Tip. In the Command field, enter:


echo "$TM_SCOPE" | pbcopy
echo "$TM_SCOPE copied"

Then assign a key equivalent to it and you can just stick your cursor inside whatever you want to know the scope of, and press your key combination. The scope is in your clipboard now, and you can do what you want with it (like add new color definitions). Enjoy!

Originally posted on BrettTerpstra.com at An ode to Twilight, and a TextMate tip

My weather report. Seriously.

Brett — Wed, 26 May 2010 02:15:54 +0000

I did some massive Spring cleaning over the weekend, and found a lot of “treasures” that, after having been momentarily cherished, are on their way to the dump. A pile of Dead Kennedy’s and TCHC cassettes from High School that had been severely devastated by an extended stay in the garage, original vinyl pressings from some of my old bands, Phreak boxes, and more defunct electronics than I could possibly E-bay. Amongst all of it, though, I found a CD of work from my Interactive Multimedia degree at the Minneapolis College of Art and Design. Aside from my diploma, it’s really the only proof I have left that I was ever there. There was definitely some interesting work on there, though.

We were given a weather report from a local cable station. Our assignment was to make it interesting, and this is what I did with it. The sound design, especially, makes me chuckle.

httpv://www.youtube.com/watch?v=6WUmr9FM3GY

YouTube Link…

Thank you. That is all.

Originally posted on BrettTerpstra.com at My weather report. Seriously.

Designing Draw

Brett — Sun, 13 Dec 2009 04:21:21 +0000

Erica Sadun recently released her latest app, Draw (iTunes link), into the wilds of the App Store. I take a special interest in this release because I designed the interface for it from the ground up. Erica, of course, made all of the magic happen; she’d take my photoshop sketches and send them back as amazing working interfaces. In the end, it was a really fun process to go through and Erica was great to work with. Here’s a quick walk-through of the design process.

I started with a choice between a chalkboard motif and something more pencil-and-paper based. Erica made that decision pretty easy, and we moved forward with a “sketchbook” look. The pencil picker was an interesting challenge, I needed to make them small and compact and Erica needed to make them, um, work. A little back and forth and she had a working model using my tiny little pencils that even the largest-fingered user would be able to use.

At first, I was mixing hand drawn elements and photorealistic icons, which I ditched in favor of a more congruous hand-drawn aesthetic overall. This included redesigning the more traditional “HUD” slider to be a piece of paper as well. The nub of translucent black originally used to pull the HUD up turned into a paperclip, attached to a slightly discolored piece of paper which slid over the main panel to reveal additional options. Whereas the HUD would have been suited by a typical exponential tween, the paper aesthetic required a little more cartoonish animation, which Erica accomplished adeptly with a nice bounce.

The icons went through quite a few permutations before I gave up on finding the right brush in Illustrator. Eventually, I drew the icon elements (on the same sketchpad I scanned to make the final paper textures) and scanned them in, cleaned them up and turned them into icons. As the sliding elements and icons became less “modern,” the paper textures and hand-drawn elements became less “antique,” and soon they met in the middle in a more harmonic interface.

The color changed over the course of the mockups, eventually ending up on a more neutral blue-grey. It looks dull and dead next to the more “antiqued” previous generations, but it’s much easier to create your own drawings on a neutral page, so I decided to keep things grey. I think it works well for the end user.

The best part of working with Erica is that she could make any of my little visual ideas “work.” In programming my own apps, I often pull some punches because I don’t have the chops to pull them off quickly. It makes a big difference working with someone who knows the iPhone SDK inside and out. I think the finished 1.0 version of Draw is a slick, easy-to-use app that will be fun for all ages.

Originally posted on BrettTerpstra.com at Designing Draw