Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

iOS 7 Mac icon project: Calendar

We've tackled a tricky customer today, redesigning the Calendar icon with an iOS 7 look

icon comparison
Calendar was today’s mission, and it completes the default Mountain Lion Dock – we now have an iOS 7 icon design for every app that appears on a new Mac’s Dock.
This one was always going to be a little awkward because of the way the icons works, but we think we’ve found a solution that looks great.

The problem with Calendar is that when you put it in the Dock, the date changes to the current day. This is a great little touch, but it means that no matter what you change the icon to, the date will always be displayed at the same angle and in the same font. I went into the design knowing this, and worked around the date to create something that is simpler, and more iOS 7-like, but which will still display the date correctly in the Dock.

Changing the icon is a whole other issue, though. You need to have an empty icon for the Dock, and a filled icon for Finder, and applying them cannot be done through Candybar. We’ve given a brief step-by-step below, but if you’re still getting stuck a quick Google should help out.

1. First, the PNGs need to be made into .icns files. Download img2icns for free, which can do this quickly and easily. Drag the icons in and export them as .icns files.

2. Find Calendar in the Applications folder. Right-click it and choose Show Package Contents. Open Contents, then Resources. Here, find the two items called App-empty.icns and App.icns. Copy them to your Desktop as backup – if you don’t you’ll lose them forever and won’t be able to return to the default Calendar icon.

3. Rename the two new iOS 7 icons so that their names are identical to that of the official icons. The empty icon should be called App-empty.icns, and the other should be called App.icns. Drag them into the Resources folder, choose to Replace the current icons, and Authenticate your action.

4. Nearly done! Now look in the Resources file for a folder called Calendar.docktileplugin and open it. Choose Contents, then Resources. Drag the blank iOS 7 icon into this location, too, replacing the older icon.

5. Finally, open Terminal and once you’ve been automatically logged in, type in killall Dock to restart the Dock. The new icon should be applied!

Like I said, it’s a little more complicated than the other icons in the project so far. Backing up is really important, so make sure you keep a copy of the original icons before you replace them.

You can grab all the icons in my project below. I haven’t finished yet – I’ll be working on finishing up the built-in apps in the next few weeks, as well as making icons for the iWork and iLife suites, along with some third-party apps. Stay tuned!

App Store
iOS 7 Mac icon project: Trash
iOS 7 Mac icon project: Trash
iOS 7 Mac icon project: Trash
Full Trash

App Store              iTunes              Messages               Safari             Reminders              Trash

iOS 7 Mac icon project: Trash

Finder               Launchpad                Mail                   Notes              Photo Booth

iOS 7 Mac icon project: Trash
Mission Control
           iOS 7 Mac icon project: Trash          
System Preferences

Contacts            Dashboard     Mission Control        FaceTime      System Preferences

Remember, you need to back up the default Calendar icons before you apply these!


Calendar Empty
Convert these PNG files into icns files to make them work in your Dock