Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#4749 closed Enhancement (fixed)

Support for HiDPI (Retina) Displays

Reported by: collegeitdept Owned by: livings124
Priority: Normal Milestone: 2.60
Component: Mac Client Version: 2.42
Severity: Normal Keywords: HiDPI


Support for the eventual release of HiDPI displays from Apple.

Attachments (4)

icons - priority and (12.1 KB) - added by Kibo 10 years ago.
icons - (6.1 KB) - added by Kibo 10 years ago.
icons - bandwidth 4 and (12.8 KB) - added by Kibo 10 years ago.
DownArrowTemplate2x in TemplateTester (10.6.8).png (12.7 KB) - added by Kibo 9 years ago.

Download all attachments as: .zip

Change History (48)

comment:1 Changed 10 years ago by livings124

So who's volunteering to redo every image in the app? :-)

comment:2 Changed 10 years ago by collegeitdept


Unfortunately I don't have the expertise or the know how… I was just saying that the day is clearly coming and to prepare for HiDPI displays. The signs are clearer now since the release of OS X Lion 10.7.3 and its new HiDPI hand (URL/link) cursors.

Keep up the excellent work!

comment:3 Changed 10 years ago by livings124

That wasn't necessarily a sarcastic response. We really do need someone to do graphics (anyone out there?), and we would have to redo all the images to support the 2x images.

comment:4 Changed 10 years ago by Kibo

Hmm. I think I'd like to take a crack at it!

Aside from the icons for the program and its document type (which I assume don't need to be redone, as they already exist at a large size) I count 65 .PNGs. A few of them are already oversize (such as the globe and the turtle.) The remaining ones (mostly 16x16) all need to be redone, but they're generally pretty simple, flat-colored shapes, so I think I could re-create them all (matching the existing style) within a couple of weeks.

I propose to re-create all the small icons as vector graphics to future-proof them, and then render them out as .PNGs at the specific needed sizes (with a final per-pixel touchup because I'm finicky about things having neat edges.) I know the assumption is that Apple's "HiDPI" mode will involve doubling existing linear resolutions, but that could well change, so I'd definitely preserve vector versions of the artwork in case other sizes are needed.

Anyway, I'll wait a couple days just in case any of the people who've worked on the icons in the past would like to claim the right to do further work on their art. If nobody objects in the next couple of days, I'll get to work on drawing new versions of all those little buttons.

comment:5 Changed 10 years ago by livings124

Awesome! Lion requires two sets of images:the standard sized ones, and double-sized ones, so vectors aren't necessary. The double-sized images are like in iOS, with double the width and double the height. The file names would be image.png and image@…. A caveat is that template images must be just solid-black and transparent (I think some of the current ones have some transparency, etc, but they shouldn't). Feel free to adjust anything that you think needs adjusting (one change I wanted to do was make the action icon match the new lion gear, for example).

comment:6 Changed 10 years ago by Kibo

It's actually easier to draw them as vector images (as opposed to pushing individual pixels around) -- it only takes a couple seconds to convert the master art to the double-size PNGs (and any other sizes which might be needed at any point in the future. You never know when you might want a 14px version of something that's currently 16px, etc.)

I can have some samples for you in a day or two -- I've drawn high-res versions of some of the icons as tests so far and I look to be on track to be able to do a full set of them in a week or so. (Again, assuming I'm not stepping on anybody's toes, since I'm new to the project.)

comment:7 Changed 10 years ago by livings124

As long as they look as good as the current images, anything's fine with me. Thanks!

(you're not stepping on anyones toes, that's for sure)

comment:8 Changed 10 years ago by jordan

Pardon the question, but are you the Kibo? If so, will you autograph this durian for me?

comment:9 Changed 10 years ago by jordan

Kibo: also, if you're interested in doing Transmission icons, the web client also needs a new set. IIRC its needs are fairly light, about 10 icons or so.

comment:10 Changed 10 years ago by Kibo

Yes, Jordan, I'm that guy. It's hard to autograph a durian, though, they're all bumpy and sticky.

The Web UI uses 23 PNGs, but most of them are just rescaled versions of the Mac ones, so I could certainly re-render those from the same vector art after I finish the Mac set. I don't see anything horribly wrong with the existing Web icons, except that they only exist at one resolution. The CSS is written to use the images at natural size, though, so if you wanted to support higher-resolution ones you'd have to figure out how to rewrite the CSS to scale them, or have two separate style sheets for two sets of icons. (Or the .PNGs could simply be replaced with .SVGs... that would be the easiest way to make the interface scalable, but then the small icons would look lumpy.)

comment:11 Changed 10 years ago by livings124

We're hoping to redo the web ui to not resemble a specific client or mimic an operating system, which is why we need all new graphics. Ideally they would be different from the Mac client to give the web ui its own look (we need a web ui guy, too ;-)).

Last edited 10 years ago by livings124 (previous) (diff)

comment:12 Changed 10 years ago by Kibo

Then I'll just focus on polishing up the Mac icons for now. (I agree it would probably be good to get the bits that look like OS X controls out of the Web UI.)

comment:13 Changed 10 years ago by livings124

Sounds good. If you have any images you want me to test, let me know.

comment:14 Changed 10 years ago by jordan

Also, you might want to pull a fresh copy of Transmission from trunk, or from a nightly binary at There's been a lot of shuffling in web/ since 2.42 was released, so it's possible that images were added or removed since then.

comment:16 Changed 10 years ago by Kibo

livings124, here's my work in progress:

So far I've built 2x images for about 3/4 of the existing ones, and I've also reworked many of the smaller ones to make them match or to correct little defects. I restyled the smaller gear icons to look more like the Finder's gear menu, and I drew a new large gear icon to look similar to the big blue gear in Safari's Preferences window. Also, I've been converting all the template images to pure black. Otherwise I've tried not to introduce any major changes to the styling of things yet.

I don't have 10.7 installed so I haven't test-driven the 2x icons; the 1x ones appear to work for me. Please let me know if I'm on the right track so far -- at this point it's easy to tweak 'em further if there are defects or if you have suggestions for design changes (or if you need any of them to be a couple pixels larger or smaller.)

Anyway, please let me know how I'm doin' and I should be able to revise/finish the set in a few days.

comment:17 Changed 10 years ago by livings124

Those look great!!

The only comment I have is to use the images from trunk as a basis, not 2.42. The priority images have changed, so could you make the images match those (and would it be possible to make the PriorityNormalTemplate? a dot instead of a rectangle, or something like that?).

Thanks! Really appreciate the work you've done.

comment:18 Changed 10 years ago by livings124

Looking through, I've noticed that TurtleTemplate? was always over sized. Would make sense to make the normal one 18x18. The Bandwidth icon could also cleaned up a bit. All in all, these are great though!

comment:19 Changed 10 years ago by Kibo

I noticed the priority icons were changing, which is why I hadn't yet touched them. I think the chevrons are a little hard to distinguish -- after all, "\/" and "/\" contain the same two strokes in different orders -- so I'll see if I can give them a little tapering to give their points some visual emphasis despite the lack of color. I'll also try to change the narrow ones in PriorityControl? from highway arrows to squished chevrons.

I'll resize TurtleTemplate?. What about the other oversized ones -- Favicon, Globe, CreateLarge?, and Magnet?

I think I may change the 1x version of InfoOptions? back to an eight-tooth gear, the twelve-tooth one is complex enough that it should only be used for the 2x version.

I'll see what I can do about smoothing the edges of the Bandwidth icon.

Do UploadBadge?, DownloadBadge?, and QuitBadge? need 2x versions? They're currently 128px wide -- Given that the app icon exists at 512px, should I change them to 512px for consistency? (After all, Dock magnification can make icons bigger than 128px.)

I aim to have the whole set finished by the end of the weekend. The only icon I can't upscale is the 512px application icon -- Apple's been making some of theirs 1024px lately for reasons unknown. The Transmission icon is so beautifully detailed that I can't redraw it and have it match exactly (and I can't just swipe the one from "Transmission-1920.jpg" because that one has different details.) In the rare case that anyone sets their desktop to have ten-inch-tall icons, I believe the existing 512px one will suffice.

comment:20 Changed 10 years ago by Kibo

Hmm, I might even draw a completely new Bandwidth icon. No matter how much I try to smooth out the shading in the existing one it always looks like a stereo speaker to me. I'll try designing one that looks more like an automotive speedometer or tachometer, with more color and less dead space at the bottom.

comment:21 Changed 10 years ago by livings124

Sounds good about the priority option. None of these images are set in stone, so feel free to play around.

In regards to the oversized images:

  • favicon.png is sized to 16x16 in code, so you could make a smaller one and make the normal one 2x, or not bother.
  • globe.png and createlarge.png are 64x64 in code as well, so the same goes.
  • magnet.png is used as 16x16 in its add window, so we actually could probably use a smaller one that's easier to make out. We use it at 32x32 in the main window (and 16x16 when in minimal mode)0

In regards to the badges, it appears that the OS gives us a app icon of 128x128, so to me at least it would make sense to act as the standard width of those icons is 128.

Don't worry about the main icon. It should be fine at least for the time being.

I am really impressed by all this. Thanks!!

comment:22 Changed 10 years ago by Kibo

livings124, I'll shortly be e-mailing you an archive of all the icons, assuming my flaky municipal Wi-Fi stays up long enough. The set's complete, though of course they can still be tweaked if you have any suggestions for improvements (or if I screwed up and made one the wrong size or something) -- I've archived all the vector art so it won't be difficult to make further edits.

I reduced TurtleTemplate?.png, Favicon.png, and Globe.png to the specified sizes. I didn't shrink Magnet.png (as OS X should be able to shrink these icons down gracefully, I didn't want to compromise it at larger sizes.)

There's a completely new Bandwidth icon that looks more like a modern automobile speedometer, please let me know what you think.

InfoFiles?.png and InfoOptions?.png now have separate designs for the 1x and 2x versions due to the complexity of those icons; otherwise, all the 1x and 2x versions match. (This means that when you're giving support, you can ask people "How many teeth does the gear in the Preferences window have?" to find out what mode they're using.)

All images have had their resource forks stripped and then been run through ImageOptim? repeatedly, because I noticed that Photoshop is really wasteful when saving PNGs (I was able to get the whole set to come in under 1 MB; if Photoshop had its way, it'd be more like 9 MB.)

comment:23 Changed 10 years ago by livings124

These icons are pretty amazing! Thanks again!

From a quick scan:

  • Would it be possible to enter the high/low priority icons, or decrease the height so there's no whitespace above/below?
  • I'm not crazy about the bandwidth icon, unfortunately. It's still much too blurry, when it should be pretty clear. Would it be possible to create a much clearer version of the old icon (or even the new one), or a variation?
Last edited 10 years ago by livings124 (previous) (diff)

comment:24 Changed 10 years ago by Kibo

Sure, I can make more attempts at Bandwidth.png. Most of the trials I've made so far have involved a lot of shading to make it look three-dimensional, but I can certainly do a flatter, more stylized one without so many small parts. I'll try to have another candidate for your review tomorrow.

I pushed the "HighPriority?" icon up (and the "LowPriority?" one down) on purpose because blunt arrows always look better to me when they're centered on their tails -- otherwise the noses are de-emphasized (in other words, it looks like the "down" chevron is slightly above the "up" chevron if they're lined up exactly.) But I can move them to the centers of their cells if that's the way you prefer them.

comment:25 Changed 10 years ago by livings124

In theory I would agree that centering on the tail makes sense, but the high priority icon, for example, looks odd that it's not aligned with the text when displayed on the main window.

Last edited 10 years ago by livings124 (previous) (diff)

Changed 10 years ago by Kibo

comment:26 Changed 10 years ago by Kibo

Here's some tweaked priority icons (closer to the center) and a couple more prospective bandwidth icons (now with very contrasty colors and fewer moving parts.) Please let me know if these are heading in the right direction; I'll probably have more ideas for new bandwidth icons tonight.

Changed 10 years ago by Kibo

comment:27 Changed 10 years ago by Kibo

And here's a light revision of Mr.Magnet, now with glowing tips to help you see him in the dark.

comment:28 Changed 10 years ago by x190

Is Mr. Magnet bipolar? :-)

Changed 10 years ago by Kibo

comment:29 Changed 10 years ago by Kibo

livings124, here's two more pairs of prospective bandwidth icons. One set is a very precise copy of the old one, except slightly simplified to keep the edges clean. The other one, with the blue needle, is my favorite (the orange and green one didn't quite fit in with the other prefs icons, but the blue one harmonizes nicely and is really clear.)

If none of these floats your boat, I can look into coming up with a new basic design, but honestly, I think the blue-needle one's worth keeping.

comment:30 Changed 10 years ago by livings124

Both of those look pretty good! Thanks!

comment:31 Changed 10 years ago by Kibo

You're welcome. You have my secret E-mail address if you have any requests for further improvements or fixes.

One last suggestion: In the main window, when a file isn't found, the system error icon ("/!\") is used, but it's white-on-yellow, making the exclamation point nearly invisible at that size. Would it be possible to have the code use Transmission's 16x16 black-on yellow "/!\" icon instead of the system one?

jordan, if you want to brainstorm ideas for new Web icons, we should probably do that in another ticket, or in E-mail (I'll send you my address.) If you're good I'll tell you where the durian is.

comment:32 Changed 10 years ago by livings124

I believe the system error icon isn't used in 2.5 or later, so that didn't need to be redone anyway. Thanks!

comment:33 Changed 10 years ago by livings124

Sorry Kibo, I think I misread your last comment. I'll investigate using your error icon.

comment:34 Changed 10 years ago by collegeitdept

So has the official release of Transmission 2.5 been delayed or something? Sorry to seem impatient. For good news, VLC 2.0 was released today!

Keep up the good work! Transmission is one of the best Mac apps available.

comment:35 Changed 10 years ago by livings124

Unrelated to this ticket, but 2.50 is coming real soon now.

comment:36 Changed 9 years ago by livings124

  • Milestone changed from None Set to 2.60
  • Summary changed from Support for HiDPI Displays to Support for HiDPI (Retina) Displays

r13338 adds the images. Thanks!

comment:37 Changed 9 years ago by Kibo

You're welcome! You know where to reach me should you need any more art. (I hear that OS X 10.9 is going to support eight-dimensional scratch-n-sniff icons...)

comment:38 Changed 9 years ago by livings124

And here I am with a computer that only supports six-dimensions scratch-n-sniff!

Last edited 9 years ago by livings124 (previous) (diff)

comment:39 Changed 9 years ago by livings124

r13340 Updates the Mac code to use the @2x images.

comment:40 Changed 9 years ago by livings124

  • Resolution set to fixed
  • Status changed from new to closed

comment:41 Changed 9 years ago by livings124

Hey Kibo,

UpArrowTemplate?.png, DownArrowTemplate?.png, and their @2x versions seem to have some shading in them, which excludes them from the OS's automatic handling of template images. Could they be done as black-and-transparent-only images? Thanks!

comment:42 Changed 9 years ago by Kibo

In r13342, UpArrowTemplate? and DownArrowTemplate? seem to be only black-and-transparent; I opened them in Photoshop, checked various pixels and I'm not seeing anything but black and varying degrees of transparency.

I checked the developer reference NSImage_Class's setTemplate method and I can't see that there's anything unkosher about the way those are built...

I also tried feeding them to TemplateTester? (from ) and that app displays them correctly. (However, it's an old app, and I'm running OS X 10.6, so if it's a problem specific to 10.7/10.8 I'm not seeing it.)

So, I don't understand what you're seeing that I need to fix... are the icons displaying incorrectly in some manner you could make a screenshot of?

I think all the other "Template" icons are built the same way as the arrows (as black silhouettes with alpha channels.) Are you having any similar issues with, for example, YingYangTemplate? or TurtleTemplate??

Last edited 9 years ago by Kibo (previous) (diff)

comment:43 Changed 9 years ago by livings124

Yup, it was a bug in the xib, fixed now. Sorry about the confusion. Thanks!

comment:44 Changed 9 years ago by livings124

And thanks for the link to TemplateTester? - very useful!

Note: See TracTickets for help on using tickets.