Official website for iCreate - the creative magazine for Mac users

FOLLOW US ON:

Dec 6, 2013

iOS 7 Mac icon project: Dropbox

by Stephen Ashby

Dropbox gets the iOS 7 icon redesign treatment with the latest project update

comparing iOS 7 dropbox icon to mac

We’re well into third-party apps now, and the next on my request list was Dropbox. The app has been redesigned for iOS 7, so this was actually quite a straightforward one to design. The old icon used all kinds of gradients and, frankly, looked pretty awful, so I set about recreating the new icon with a block of blue and a white background.

iOS 7 Mac icon project: Dropbox

I sketched out the shapes from scratch, and worked up a couple of designs using the two colours. First I recreated the icon very closely, with a blue box and white outline, then reversed it. I prefer the blue version, but both are below so you can grab your favourite.

Blue Dropbox icon with white outline in style of iOS 7White Dropbox icon with blue icon in style of iOS 7

  • Tell a Friend
  • Our Twitter provides the latest breaking apple news, reviews, tutorials and downloads online and our Facebook fan page is the best place to communicate with other iCreate fans.
    • Wiz

      Wow, you are amazing!

    • Mini Apple Genius

      Can you please make icons for Terminal, Pixelmator, Parallels Desktop, and Final Cut Pro? Great job! I might get dropbox just for this :) !

    • Paolo

      Epic!! Thanks!

    • Mr. E

      You inspired me to try and create an iDVD icon.

    • Mr. E

      You inspired me to try to create an iDVD icon.

    • CC

      I did the Final Cut Pro X icon in iOS 7 style, here is the link:
      http://fav.me/d6tm797

    • Mini Apple Genius

      While it looks good, I would prefer if Stephen Ashby did it.

    • CC

      What do you want it to look like? The current clapperboard style, except flat? I can do that.

    • Mini Apple Genius

      Yes, that’s what I would like. Also white. I noticed In the other icon that the top of the white icon did not match the bottom of the icon. Also I would like it if there was no text on it. Thanks!

    • Mini Apple Genius

      Why can’t this be a png?

    • Mini Apple Genius

      (I still want the black and white strips at the top, just not the whole thing black.)

    • Menubalk

      I tried changing the icon, both manually and with LiteIcon, but Dropbox keeps changing it back as soon as it launches! Please help?

    • Mr. E

      png images are not supported on Disqus. My original is a png.

    • Mini Apple Genius

      Why not have a link to the png?

    • Mr. E

      Here you are. http://bit.ly/Jgsi4M

    • Mini Apple Genius

      Thank you so much!

    • Alessio Dal Fiume 

      Hi! Unfortunately Dropbox keeps changing it back as soon as it launches! Any suggestions? Please, let us know!

    • Benjamin Kanter

      can you (stephen) make microsoft office icons and like you did with the system icons and ilife and iWork make a dropbox folder with them

    • iCreate Magazine

      Looks great! Nice work :) iDVD is on my list of icons to make, but yours is really nice.

      Steve

    • iCreate Magazine

      Microsoft Office is on my (long) list of icons to work on. Don’t worry, I’ll get there eventually!

      Steve

    • iCreate Magazine

      I think I’ve found a fix but I’m having trouble testing it so if you guys can let me know if it works I’ll post it up in the main article.

      Find Dropbox in Finder, Right Click>Show Package Contents

      Contents>Resources>box.icns

      Replace that icon with the one above and it should fix the issue.

      You may have to rename my icon to box.icns as well to make it work. And remember that if you delete the old icon it will be gone forever, so if you want to make a backup just drag it onto your Desktop.

      Let me know how it goes!

      Steve

    • Alessio Dal Fiume 

      I uninstalled Dropbox, then I reinstalled it and I followed your instructions… now it works! :D
      Thank you so much!

    • Mr. E

      Thanks

    • Pingback: iOS 7 Mac icon project: Adobe Photoshop CC | iCreate

    • dennis

      Dear Iceate,

      Can you make the icons for the apps below:
      Aperture

      Mainstage
      Final Cut Pro X
      Compressor
      Motion
      Xcode
      Microsoft office (Word, Powerpoint, Excel, Communicator, Outlook, Messenger)
      Skype
      google earth
      firefox
      The Unachiver
      ——————————
      Remember to put them on the “to-make” list.

      I also found an ios 7 like style dictionary icon on the web!