You're looking at all articles on The Hickensian tagged 'icons'

With the iPad and iPhone 4, there are as many, if not more, different size icons to create for iOS than there are for desktop apps. While there are plenty of templates and reference sheets for Photoshop users (see Cocoia) I prefer to use Illustrator CS5 to create mine. So I’ve made my own template, and it’s available here if you find it useful too!

Download the iOS icon template for Illustrator CS5

The top layer of the file contains labels and a mask to add the rounded corners of the icon. Don’t forget to hide these before you export.

Corner Radius

Something that Apple doesn’t include in it’s documentation are the various corner radius dimensions for all the icon sizes. This information has been compiled thanks to investigations of Sarah Parmenter and Tim Van Damme.

It’s best to create the artwork with 90° corners and let the OS round them off, but there is a mask layer to help you check how it would look. The mask also uses the appropriate colour for the context – white for the app store, black for the home screen and light grey for the spotlight results.

Also the icon that iOS uses for spotlight results on the iPad is trimmed by 1px around the edge. So while the artwork still needs to be supplied as 50px, the visible area is only 48px, and the guides reflect that, while the rounded corner mask stays at 50px.

Exporting

The icons are all set out on their own artboard, so when you’re ready to export check the ‘Use Artboards’ option to get each icon as an individual file:

Disclaimer

While I’ve worked hard to make sure this template is as accurate as possible, I can’t guarantee it’s completely error-free. Let me know if you find any bugs, and I’ll update it!

If you’re using CS4 or below, this template may well work for you, but hasn’t been tested and may explode leaving terrible stains. I target CS5 because of it’s the first version that has pixel snapping that actually works!

I’ve never over-run on a talk. Ever. Usually I embarrasingly finish around 10 mins early, leaving plenty of time for questions.

Until last week at Future of Web Design that is. When it came down to the last 5 minutes, I realised I had a lot more to go, and had to really hurry the last couple of sections. Thankfully the feedback so far has been positive, but I promise this will be (probably) be the last time I talk on this subject.

The Principles of Icon Design was originally based on the talk I gave at @Media last year, Icons for Interaction, but soon started taking a different form. This one focused more on the process of icon design, although they both share similar examples and concepts. It features new work too however, such as some of the work I’ve been doing with Jolicloud, my first freelance project after leaving Opera.

As promised, you an grab the slides (with notes) here: Download the Principles of Icon Design PDF (17.3mb)

Finally, I must mention how much I enjoyed the conference. As well as meeting old friends, I got to meet new ones, as well as finally meeting design heroes Joshua Davis and Brendan Dawes. When I was working as a print designer at an educational publishers in Oxford, it was these chaps who inspired me to design for online. I always get a bit awestruck meeting such people. (There’s only one other hero I’ve yet to meet – Jason Arber).

A BIG thankyou to Carsonified (and Cat Clark in particular) for organising the event so well.

This month’s .net magazine (#196 December) features my article ‘Design the perfect icon’. focussing on icon design for websites, rather than for software. It expands on the talk I gave at @media earlier this year Icons for Interaction

This is my first really big magazine article that I’ve written, and found 5500 words much harder than I thought, and probably won’t be writing another one in a hurry! However, I’m really pleased with result, and it’s given me an idea of how much harder it would be to write a book.

Last week I had the pleasure of attending @media 2009 in London, where it has to be said, I had the best conference experience I’ve had for a long time. I prefer the more cosy nature of the event – a single track, not too large and overwhelming quantity of people, and simply great talks. I can’t pick one favourite presentation, as I came away feeling really inspired and energised by everything.

It was also the last @media curated by Patrick Griffiths, who is moving on to follow other passions (from next year the conference will be in the able hands of the Web Directions Team). I want to take this opportunity to thank Patrick for encouraging me to talk, and giving the best possible environment to do it in.

After giving the presentation, I realised that there are 2 areas, only touched on briefly here, that should be expanded on: Icon Accessibility and Icon Usability Testing. Those are big topics for another day/talk/blog post, so until then here are my slides for my talk on ‘Icons for Interaction’:

Download the Icons for Interaction PDF (18mb). All links are available on my delicious account, tagged icondesigntalk. My speaking notes are also included in the PDF, hopefully this will be enough to make the slides meaningful.

The typeface I used for this was Comic Crafts Astronauts in Trouble.

Just over 2 years ago, I started work on what turned out to be my largest icon project to date, for the new version of Linotype’s FontExplorer app (or ‘FEX’ as it’s also known). It was great to be asked to work on an app that I use everyday, and as the project grew, over 280 new icons were created for it, and at several different sizes.

The first job was to look at the application icons for Pro and Server editions. Amongst the early sketches, I was very keen on an early idea that used a printers wooden draw of metal type:

However, the child’s block idea was chosen, as Linotype liked how it suggested using the app was ‘childs play’, so this idea was progressed into early vector roughs:

As you can see, the Linotype L logo was common theme to all ideas, some more subtle than others. At one point we considered a transparent version:

These were worked through until we arrived at the final icons. Both apps also have updaters that show them packaged in plastic and brown parcel tape:

One of the requirements of the brief was that the client needed original vector artwork, so for the first time, I used Illustrator to create all the icons, not just the larger application icons. There are pros and cons with this – Illustrator has handy features such as global colour and selecting elements by same stroke or fill, but when it comes to pixel perfect rendering it’s a pain. You end up using little workarounds (such as not making a stroke 1 pixel, but 0.8) in order to achieve crispness.

Finally, to be ready for Resolution Independence (and as no one has created vectors that can scaled down effectively as well as up), several versions were required. So for each of those 280 odd icons, the following sizes were required: 16, 32, 48, 128 px, with application icons requiring a further 256 and 512px version. As a lot of these interface icons are 16px at default, the 128px version didn’t need to be as detailed/photorealistic as an application icon would be at that size, but still look good at that size. Here are some examples:

It was not only a great project to work on, but also a great client to work with!

Update: I’ve had such a great response to this! It looks as if I’ve already got the job covered, but please do send in your details and samples. I promise I will look at each one and keep your details for future projects. Thanks!

I need help! Are you icon designer, experienced in creating application and interface icons for Mac OS X and Windows XP/Vista? Can create icons from 16px up to 512px? Yes? Now, are you free this month?!

I have an large-ish icon project for a software application (can’t say more than that at the moment) on with an urgent deadline of the end of April, and I need your help! If this sounds like you, please drop me an email (see the footer) and let me see your portfolio, either online, or as attached samples. Even if you’re not contracted on this project, I’m always looking for good designers to recommend clients to, and work with.

The new 1.1.3 firmware for the iPhone and iPodTouch brings with it the ability to add a ‘webclip’ from Safari to your home screen.

Thanks to this tip you can easily create a custom icon for people visiting your site, that works just like your favicon. Its just a shame you can’t add your own for other sites – I would love a custom Google Reader icon.

EXTRA : Having tried Nathans suggestion of 158×158px I can confirm that this size does indeed produce a crisper icon. Also, Drew has come come up with a way of using custom icons. I’ve put one up for Google Reader here

There has been a lot of requests for one of these, so I’ve finally made the PimpMySafari logo into a custom Safari icon!

Download this zip file to get the icon as an .icns file, iContainer and applied to a folder.

How To Install

There are 3 ways to install the new icon

• If you have Pixadex, import the iContainer, and apply the icon with Quick Drop
• Ctrl Click Safari.app and choose “Show Package Contents”. Drop the new compass.icns file into the /Contents/Resources/ folder.
• Select the folder with the PMS icon, choose Get Info from the Finder (Apple-I). Click the icon and copy (Apple-C). Do the same with the Safari.app but paste intead of copy.

Please note that due to lack of time this icon file does not include 48,32 or 16 pixel resolution components, but should be fine in most situations.

Enjoy!

Issue 2 of the excellent PDF magazine Design in Flight is now out, including my article on creating the interface icons for NetNewsWire 2. This is my first ‘proper’ article, and I found the process rather daunting, especially after reading the first issue, where the quality of the articles was so high.
The question I get asked the most is ‘How do you create icons?’, so hopefully the walk-through will be useful.

At $10 for a year’s subscription Design in Flight its a snip, and Issue 2 contains articles by Eric Meyer, Keith Robinson, Eris Free and many others.

The public beta of NetNewsWire 2 is finally available. Go and get yourself a copy, and enjoy new features like (amongst many others) the in-built tabbed browser, with rendering powered by the Safari webcore. Version 2 is also a free upgrade if you’re already a registered user.

With this release, NNW’s welog editor becomes a separate application called MarsEdit. While this doesn’t have the large feature set of Ecto, I prefer the way the interface is laid out and find it much more intuitive. In my last month or so of using Movable Type (before switching to Textpattern), I was using this to write to my journal. One important feature of Ecto’s it does have is the ability to assign your own stylesheet to the preview, to get a better idea of how the article will look. Textpattern is going to include MetaWeblog support soon, so I hope to be back using this when that happens.

For this version of NetNewsWire, Brent Simmons had asked me to redesign the interface icons. A new set was created, although later on in the beta cycle these were redrawn by Bryan Bell to keep them in a family feel with MarsEdit (which had already been finished by that point). So that my icons didn’t go to waste, Brent has added a way of swapping themes via Terminal:

1. Quit NetNewsWire if it’s running.
2. In the Terminal, type: defaults write com.ranchero.NetNewsWire toolbarTheme JonHicks (Hit return.)
3. Launch NetNewsWire.
4. To get back to the default set, step 2 should be: defaults write com.ranchero.NetNewsWire toolbarTheme default

Here are those icons:

I’ve had a lot of requests for a write up on how I go about creating icons, so I’ve written an article, using the process from designing the NNW icons from sketches to finals as the basis. This will hopefully be published soon, more on that later.