27 Jun
   Filed Under: Design, How-To, Icon Design   

Okay, I thought it was time for a concise tutorial. We all know the Safari toolbar icons; they are, basically, buttons. To design these properly, you want some elements to be in order; a texture, basic shading, the beveling of the glyphs inside. In this tutorial, you aren’t only going to learn good design practices – the good design practices that you will learn, will guarantee that the toolbar button you will make is ready for Leopard’s resolution-independent UI.

Here’s an example of toolbar buttons in Tiger:


In Leopard, however, this style has been abandoned, in favor for a more dark, unified and bezeled look;


Whichever one you like better doesn’t matter, but we’re going to make a Leopard button now. You can adorn your Finder with it later on, or do whatever you want. It’s a good idea, however, to start thinking what kind of a button you want to make. Let’s say we want to make a whole new button that, when pressed, opens iCal.

What this means is that you’ll want to find an appropriate glyph. iCal is an easy example; we already have a convention for an ‘iCal’ or calendar glyph in OS X. No, really, check it out;


As you may observe, these buttons resemble Leopard’s quite a bit. They also have that nice bezel. Let’s make a screenshot (take this one, if you want to follow along) or make a new glyph if there is no convention. “But wait, Sebastiaan!”, I hear you say, “why remake a button that’s already there?”

Well, here’s good design lesson number one; imitate to learn. You want to learn how to make buttons like this? A good idea is making an attempt to remake it. Lesson two: Design for the future. Be thoughtful in your designs. Before you kick up your favorite image editor, think what you want to make, but also how long you want to use it. Are there future requirements for the graphic you are making? For normal work, you might consider making things at a high resolution so you can print beautifully, but in this case, Leopard needs some high-res resources for buttons.

And you can even set your working size to be infinite. Yeah. That’s right, you can make your resources as big as you want them if you make them from scratch. With Photoshop? Yup.

Follow along. If at some point you stop getting it, just keep reading and at the end there’s a nice PSD to try it all out for yourself. Let’s start with our calendar glyph screengrab. It’s not too big…


Let’s make it a bit bigger. Select “percent” from the image size dialog. Picture 6.jpg

Then proceed to resize to to 400% it’s original size. Select “Nearest Neighbor” from the resample dropdown.

Picture 7.jpg

Okay, now that you’ve got it in the size it should be minimally for Leopard in bitmap, you can start making a vector out of it. Use the Pen Tool in Photoshop to trace its lines. Be sure to select Shape when making it and sample its color.


After a bit of working the lines and tweaking the edges to be exactly 90 degrees, this is the result. Your mileage may vary, depending on your Pen Tool skills, but just keep tweaking with the white and black arrow tools to tweak the shapes. There are plenty of Pen Tool tutorials out there.

If we were to overlay this to it’s original background now, it looks like this;


That’s not too funky; it doesn’t really work this way because it looks like a graphic slapped on a gradient. It’s just too flat, you know? Let’s add a bezel. Although this ‘pixeled’ icon contains only sharp edges, you can apply the same method for round shapes, in vector, to make bezels that actually work (instead of working at the small size with 1 pixel ‘outer bevel’ layer effects, that really get messy).


As you can see, you can, without resorting to layer styles, make a white form behind your existing vector shapes. At this level, you can see it’s a white form. At our classic size, however…


As for the background of the button, some people insist on fussy practices of sampling colors. In this case, take a 1 pixel wide selection to rapidly ‘prototype’ the button background without having to create a whole gradient;


Take this selection, copy it to a separate layer and scale it about 20 times wider. Once you are happy with your glyph, you can take the shape of the button, make a vector and apply the proper gradient on it.


As you can see from the PSD, you can export this as a ‘regular’ size (as the button was before, thus, 25% of our current image) and as 4x to comply with the Resolution Independent guidelines laid down in the now public session at WWDC ’06. You can also, as the buttons we see here are easy to make in the new Interface Builder under Leopard, export them as PDF’s. Be sure to fit the path in an ‘image’ of appropriate pixels, though, or your shape might be placed quite oddly in the NSButton.

Now that you know the basics of putting together these kind of buttons, go make an alternative set to Safari’s! Or perhaps some new toolbar buttons for Mail? Preview? Let’s see what you can come up with in some spare time!

If you enjoyed this tutorial, you can take some time to comment, share with delicious, or digg it. Kind words over email are also appreciated ;).

26 Jun
   Filed Under: Apple, Design, Icon Design   


Sent by an anonymous source, this supposedly shows the new iPhoto fullscreen navigation. Some specific features of the new interface were omitted.

22 Jun
   Filed Under: Design, Icon Design   

Craig Hockenberry said this little bit about the Preview icon on twitter, and I felt like making an actual blog post out of this. It’s astonishing.

In Tiger, we’ve all known and loved (or hated) is a bit changed in Leopard. Here’s what it was like in high-resolution;


I must say I find the icon a bit more agreeable on this size, but I still find the overly simple gradients on the ‘eyeglass’ disturbingly ugly. They don’t fit the appearance of the icon at all. But enough for that, here’s the really disturbing part. Leopard’s got a new-ish Preview icon, also featuring ‘the Preview kid’.


And as you can see, the kid is now captured with a gaze that one could best describe as ‘demonic’ or ‘possessed’. It’s a rather freaky image, which reminds me, personally, of a rather well-known person in popular culture.

40 jack nicholson fait le malin.jpg

Doesn’t it just scream ‘the Shining’ to you? Do you think the Apple design division has been Kubrickified? Am I just terribly, terribly wrong and is there a whole story to Johnny? (hint: “Heeeeeere’s Johnny!“) Drop a comment!

Edit; One could say, that after my cursing the Preview icon, the darn stock photo kid has finally gotten what’s going to him and he had got a stroke in the photo shoot. Err, whatever.


22 Jun
   Filed Under: Unfiled   

Quicksilver’s been one of my most loved and used applications for a long while now, and the single driving force for it’s continuous rule of my desktop is it’s fantastic community development. I can inject a python interpreter into anything, I interface with my entire computer while Quicksilver’s actually smoking, and above all, I can do without thinking. I can ‘instinctively’ tap a few keys and Quicksilver knows what I want.

Ankur Kothari, first responsible for the awesome Fumo interface for Quicksilver that actually smokes, and making an awesome, full-fledged how-to and Xcode project that can help you out if you are interested in making your own Quicksilver interface (which was very handy to me), now has made a plugin that does something that I instantly thought of was kick-ass; it plugs into Quicksilver and lets you set some of it’s animations; including several of Quicksilver’s new, and cool effects. If you run Quicksilver, I suggest checking out this how-to and the plugin itself. It’s made me even more appreciative of Ankur’s great efforts to help all of us Quicksilver-veterans up-to-date with some awesome new features, looks, and ways to operate your computer.

Here’s a little movie. Please, Ankur, continue work on this, if you need some work where graphics are involved, let me know. Give him an email or comment to show your support for his awesome efforts over all this time.

21 Jun
   Filed Under: Design, Personal Work   

I’m honoured to present my third ‘Daily Deviation’ award on the biggest digital art site on the internet, deviantART. My replacement icon for Wireshark has gotten this beauty and I didn’t even notice until I had a gazillion messages and referrals to my website. Thanks for the kind words and downloads, everyone! If you want to download it, go to Icon Designer.

Link to the deviation in question…

I haven’t been very verbal lately and I couldn’t because I have had some life-changing moments that really need some thought. Perhaps I’ll divulge or make a long post about it a bit later on but at the moment, I’m really having some questions with utmost relevance about my future, my life in general, and well, what you are presented with here, my company, my idea, my ambitions. As I have said before, July will turn out an exciting month, but I can assure you it’ll be more of a rollercoaster to me and even more of a complete astonishment to you (or perhaps not, I just hope so). So, more updates soon… there has been huge progress in my work, and in my life. There’s certainly no lazy silence here. Not ever.

comments off
17 Jun


Icon Designer, the place for your desktop customisation and icon services, has gotten to version two.

Go check it out, and tell me what you think. There’s still a few minor issues with the overly spacious bottom and the page being really all-image, but that’s what I do best. Sorry, I can’t really make a lot of time free to get this into a ‘real’ website, but I do want to share with you all. New is a Macbook Pro icon, Jon ‘Wolf’ Rentzsch’s MagicHat icon, and the announcement that there will soon be some more cool client work. It will also provide you with details on how to get the upcoming ‘Military’ icon set, celebrating the successful ending of the War on Bad Design.

While I was considering a small sneak preview of Cocoia Main, I think this will do for now. Enjoy, all Macbook Pro users, and all you others; check in for the icon sweetness around the end of this month!

comments off