29 Jun
   Filed Under: Icon Design, Personal   

Hello readers. I’ve gotten quite a few people who have requests for a specific icon, whether it be a replacement or original icon, or a system icon, some people have some good ideas and want to see more icons pushed out.

I got vacation, and although I work a lot of client work and the second pack of the War on Bad Design icons is already underway, I want to see some requests. I might, if the amount of requests is sufficient, make a “Month of Icons” following the “Month of X” convention of making a new release each day. So, what do you want to see? Let me know in the comments or via email. As I said, sufficient requests means that you’ll get what you want.

28 Jun
   Filed Under: Design, Icon Design, Personal Work   

wobd.jpg

A set of quality freeware icons by Icon Designer.

If you like this icon set, please comment, write a blog post, or drop me an email (see Icon Designer for contact details).

Download

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:

tigertoolbarbuttons.jpg

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

leopardtoolbarbuttons.jpg

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;

iphotobuttons.jpg

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…

sizecalendar.jpg

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.

vectorized.jpg

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;

nobezel.jpg

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).

bezel.jpg

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…

100percent.jpg

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;

1pxselection.jpg

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.

vector.jpg

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   

ilife07thmb.jpg

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;

preview_icon_tiger.jpg

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’.

preview_icon_leopard.jpg

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.

scary_preview.jpg