Douglas Heriot

Creating the MIDI Friend Icon

When I came to design the icon the MIDI Friend, as it’s a Mac app, I knew it would have to be 3D. When I designed DMX Assistant’s icon, I just used Photoshop and kind of guessed how the perspective should look. It came out not too bad, but looking back, it’s a bit sloppy. I’ve always wanted to learn more about 3D graphics and play with Blender, so this was a good excuse.

I broke all the rules, and just started making stuff, without really doing any sketching or planning first. I sort of had the idea it should just be like a big button – sort of like the interface of the app.

So, Blender has lots and lots of menus everywhere. All I know how to do is make a cube! – so let’s start with that.

 

Cylinders are pretty easy too, so let’s make a big red button.

 

 

Mac icons have to be shiny, so lets’s play with the lighting a bit.

 

Trying to get the shape of the base a bit more natural.

 

 

Let’s add another control stick – just a single button is a bit boring! Pretty easy to make out of a cylinder and sphere.

 

How about adding the word “MIDI” so it’s clear what this does? Wait – isn’t text on icons a bad idea? In general yes, but (just guessing) MIDI means the same thing in other language, so it doesn’t have to be localised. And it doesn’t have to be readable to get the point of the icon across.

 

Just had a thought – it could be nice if the icon looked kind of like the app itself! So I decided to add 2 blue buttons like there are in the actual app (to send MIDI note on and off messages)

 

 

Oops, lighting didn’t work that time!

I want to try and inset the word MIDI into the base of the object. I kind of found a button in Blender that did something like that, but didn’t really work.

If I sit it on top of a blue bar, that would be like the titlebar of the app:

I want the control stick to have a gap in the base to slot into, but I don’t know how to do that! So I sat it on top of a strip thing (rectangle) instead of insetting it.

Played around with the lighting and colour once more, so it more closely matches the app.

Lastly, I slightly changed the camera angle so it matches up with all Apple’s standard ones (eg. Mail, Preview, Text Edit, Xcode, etc. – all use the same angle, documented in the Human Interface Guidelines). If I was doing it all in 2D in Photoshop, this would be impossible, and I’d just have to live with my initial angle I chose (otherwise I’d have to do it all over again!)

To really finish it off, I added a subtle shadow and outline in Photoshop. Still not sure if this was necessary.

I’m very happy with how it turned out, especially given its the first thing I’ve really done in 3D!

I love all the little detail – it’s not that it would be impossible to do in Photoshop, just really difficult to get all the perspective and everything. Here’s a close up shot of the “On” button:

I’m going to have to do all my Mac icons in 3D from now! No, it’s not perfect – a more experienced icon designer and 3D modeller could definitely do a better job, but I’m very happy with my results.

It’s hard to remember since I did this a little while ago now, but I think it was about 2 day’s work all up.

‘Free’ Updates

Does this look like Apple’s designed its App Store in a way to allow for not-free updates one day?

Why not just ask?

I like how The Loop just asks what type of ads I might be interested in, instead of coming up with a crazy Facebook stalking system.

Unhelpfullness

Thank you Facebook for providing me with that clarification. (Does anyone else see this?)

Here’s a little bit from my Google profile trying to show where ‘Australia’ is. (No, that marker is not anywhere near where I’ve ever lived)

Australian Mac App Store Pricing

Well, everything from Apple has always been more expensive in Australia compared to the US. Now, apps from the Mac App Store will also be more expensive than in the US, even with our almost 1:1 exchange rate.

Let’s have a look at Coda. Buying direct from Panic is US$99 (around AU$99). On the app store, it’s AU$119.

Another example is Omni Graffle Pro. At the Omni Store, it’s US$199, or even better, as a student I can get it for US$119. On the app store it’s AU$249 – more than twice the price that I can get direct.

I think I’ll be avoiding the Mac App Store as much as possible, especially for more expensive professional apps.

Open

Just like Steve Jobs had a little laugh about ‘Flash’, Apple also has a go at trying to redefine ‘Open’:

OpenWhy doesn’t it say ‘Closed’, as the store isn’t actually open yet…

Whiteboard Vector Textures

I’ve created a new page with all my free design resources for download (all 2 of them!… there should be more coming sometime though). On that page, you can find some new whiteboard vector textures. I made them by slowly brushing off whiteboard marker from my whiteboard. It creates the dirty cracked look, as seen in the ‘Stock’ graphic above. There will be many more of these whiteboard ones to come (I’ve got a stack of .JPGs to process).

I hope you find them useful!

I should have done this a long time ago…

Now that I’ve disabled Comic Sans, I’ll never have to suffer through it again!
(at least not on my computer)

On your Mac, open Font Book in the Applications folder, find Comic Sans, and click the checkbox disable button down the bottom. If that isn’t satisfying enough, you may also enjoy deleting it completely. (although I think I have to say I wouldn’t recommend that.)

Spam

SpamHam

Thank you Akismet for that pie chart. Why does my blog get so much spam?

Why You Should Restart Your Mac (and gain bonus hard drive space!)

Macs are great. They don’t crash too much, and you don’t have to restart them too often. However, it’s still good to shut down & restart them regularly.

Ram

After doing a bunch of work in Photoshop/Illustrator/InDesign, I opened up my iStat Menus Memory panel, and found that my Mac was using 2.3GB of swap files! (I’ve seen it use even more than that sometimes). My 4GB of ram isn’t enough, so it had to save some things on my hard drive as well.

This can slow down your computer, and uses up hard drive space!

Even after quitting all the  programs I had open, the swap files just stuck around.

When I restart my computer (after writing this blog post), my Mac will clean out all it’s swap files, and I’ll gain a bonus 2.3GB of hard drive space! (which means a lot, when you’re the sort of person that just keep finding ways to use it all up)

When is Good?

When Is Good just saved heaps of our time organising a dinner with some friends.

The quick survey, where people select what dates their available on, narrowed the whole month into 1 day we’re all available!

whenIsGood

(In only a couple of hours — no hundreds of emails back and forth, ‘reply-all’ing everyone!)

An Error

Nothing more, nothing less… just an ‘Error’

Windows-Fail

Another reason I don’t use Windows. Actually, to be fair, Mac isn’t immune to random errors either (but usually a little less random)

Bonus points — How many times can you spot the Microsoft logo?

Too Many Posts

No, I’m not talking about my blog :)

I don’t really want to unsubscribe from Smashing Magazine, but I think I have to — I don’t have enough time to read most of it anyway.

Here’s an article that I came across that pretty much sums up my opinion on posting too much:

http://writetodone.com/2009/01/17/7-reasons-posting-less-frequently-can-increase-your-blogs-popularity/

9 Unread Items In related news, my RSS reader shows a record-breaking low in unread items, after pruning back my subscription list. That feels a lot more satisfying than seeing 200 or so. (Although it’s not as bad as someone I saw with tens of thousands of unread items…)

Extending Paths in Illustrator

This is one thing that always annoyed me after switching from Freehand to Illustrator. I just couldn’t work out how to extend a path — eg. you draw an open path, then want to come back and add some more on the end. In Freehand, you would just select the end point, then use the pen tool to keep drawing as usual, but in Illustrator this would just start a new path.

Method #1 — Add Anchor Points Tool

This is a pretty bad one. My first solution was to just use the Add Anchor Points Tool to add a bunch of points just before the end, and then drag them around to where I really wanted them to go! Not fun.

Method #2 — Join

My next idea was to just make a new path, then join the 2 together. It works, but you don’t get to see the bit in the middle until the end. This is especially annoying if you want to make it curvy.

Method #3 — The Pen Tool

This is the proper way, that I eventually found by accident, and then in the help files as well. It’s like what I was originally doing in Freehand, but slightly different. Instead of using the ‘Direct Selection Tool’ (white pointer) to select the end point, you use the regular Pen Tool to select the endpoint first, then you can keep drawing like usual!

Why didn’t I think of this earlier? Am I the only one that didn’t know this already?

15th October, 1582

The 15th of October in 1582 was a very special day. For fun, try typing it into iCal on your mac. (From the View menu select “Go To Date…”, and enter in 15/10/1582). If you’re in month view, you’ll find it’ll show you September, an no matter how hard you try, you won’t be able to find October of 1582! If you go to week view however, you’ll find October, but something will be wrong…

Missing Week 1582There’s 10 days missing!

I can’t really explain it all, but there’s a pretty interesting article on the Panic Blog that does it pretty well.

Wollongong NYE 2009

Here’s my last photo for the year decade! It’s the 9:30pm fireworks at Wollongong harbour, as seen from Bulli tops, like my other steel works photo (my camera can zoom in a long way!).

Wollongong NYE

You can download a larger version:
Wollongong NYE 2009 (3.8MB)

It’s a panorama made up from a couple of 15 second exposures. The RAW files were batch processed in Photoshop, then stitched in Autostitch.

Spraypaint Brushes Set 1

They’re finally here! You can download my first pack of photoshop brushes:

Spraypaint Brushes Set 1 (18 MB)

(Sorry — I don’t have a nice beautiful download button. I could make you wait longer, but I think it would be better if I just give you the brushes!)

UPDATE: You can now get them along with some other goodies from my stock resources page too.

Here’s a little demo picture. It’s not the nicest looking thing ever, but it demonstrates the kind of textures you can create with the brushes:

Spraypaint Photoshop Brushes

To make these, I just spray-painted a couple of pieces of paper, and scanned them at 900dpi. My scanner isn’t the best, but it isn’t too bad. The brushes aren’t super sharp at the largest size, but they do all go up to around 2500px diameter.

photoshop screenshot

Spraypaint

Stay tuned for set 2! (the back side of the paper has some interesting textures as well…)

Coming Soon… Photoshop Brushes!

Today I was playing around with some black spray paint (don’t worry, I didn’t do anything bad). I painted some white paper so I can make some Photoshop brushes! Here’s a quick preview:

Spraypaint

Right now, I have lots of work to get done, so it will be a few days before these are ready to give away. Make sure you subscribe to the feed if you want to be notified as soon as they’re available.

Lego Star Wars

Almost a year after it was started, my Lego Star Wars stop-motion video is complete. I had actually finished the animation quite a while ago, it just needed a sound-track, which I finished on the weekend.

(more…)

Horrors of MSN

After using iChat and Adium on my mac for so long, I decided to try the real Windows Live Messenger…

You may want to see the large size to get a closer look at its ugliness.

Alarm Clock gets 1001 views!

My photo of an alarm clock finally got over 1000 views on Flickr!

SWF Object Generator

I have started to create a new version of the SWF Object Generator. The old one doesn’t look very nice, so I decided to make it a bit nicer.

Because the audience of this is mainly web developers, and all web developers shouldn’t be using Internet Explorer, I decided to totally not support internet explorer, and have fun with new CSS styles! (This is a very rare opportunity)

My version is based on the old one (copy/paste code, then modified) which means I have released it under the MIT license.

It still has has a lot of work to do (like adding javascript tooltips on the help messages).

Paparazzi!

Paparazzi is a very useful program for Mac that takes pictures of websites. This is much better than using keyboard shortcuts (command + shift + 4) because if the web page is longer than your screen (as usual), Paparazzi will capture the whole page as one image.

Paparazzi uses WebKit, so it will look the same as in Safari. This means that if you want to take a picture of something you must log in for, such as a wordpress control panel, you can!

You can download Paparazzi from www.derailer.org/paparazzi/.

The Epic Panorama

House Panorama

This is the best panorama I’ve ever made. It is made up of 25 long exposure (2 sec) images. After hours of stitching and enhancing, I finally finished this 15000 pixel wide (yes! Fifteen-thousand) masterpiece.

I stitched it together with Autostitch on my 4 year old PC because the program isn’t free on Mac. It did something weird when I stitched all 25 photos at once. I then decided to stitch them in 4 smaller sets them stitch the 4 together. It finally worked in the end after about 4 hours of rendering, blending and option tweaking.

I don’t plan to do another one of these in a while!

Flickr

I now have a Flickr gallery. It is a lot better than my old Google Picasa Web Album.