{"id":220,"date":"2014-11-12T10:41:15","date_gmt":"2014-11-12T16:41:15","guid":{"rendered":"http:\/\/jeffhottinger.com\/blog\/?p=220"},"modified":"2018-02-22T12:43:25","modified_gmt":"2018-02-22T18:43:25","slug":"replacement-byword-icon","status":"publish","type":"post","link":"https:\/\/jeffhottinger.com\/blog\/2014\/11\/replacement-byword-icon\/","title":{"rendered":"Replacement Byword Icon"},"content":{"rendered":"

\"Byword<\/a><\/p>\n

Byword<\/a> has become one of my favorite apps to write in, even just as a scratchpad sometimes, from amongst many, many Markdown<\/a> text editors. It works great in OS X 10.10 Yosemite too, but I find the icon clashes in my Dock with the new style of system icons. I get the typewriter key idea, but it looks a little archaic with its real-world style texture and depth now that Apple has switched to a more expressive and simplified style.<\/p>\n

I looked around online and found this replacement<\/a> by Natty Coleman and tried that out for a while. It’s a little too dark though, the icon is larger than other circular OS X icons, and I wasn’t sure about the switch to a sans-serif B either. Unfortunately I pasted Natty’s replacement over the original icon, so I wasn’t able to use it as a resource later. I thought I’d be able to find it by examining the package, but no luck in the resources folder. I just remembered that I think you can \u201cdelete\u201d the icon in the Get Info window to revert to the original so I’ll have to give that a try. There is also\u00a0another one<\/a> on Dribbble, but it didn’t work for me for a couple reasons.<\/p>\n

Anyhow I made this replacement icon for my own use. I used the new style from iTunes\/iBooks\/Mac App Store\/ etc. and tried to keep it as close to the original as possible. I kept the serifed B and used Baskerville Old Face, which is my best fast guess at what font the original icon’s B was. Probably not correct exactly, but hard to tell from just one character. The bars get a little thin though, so if I do a round two I will try to find a better match. Like I said, I didn’t keep the original icon for reference so I was basing it on the icon visible in the App Store search results, which is pretty small.<\/p>\n

I inverted the gradient to keep with the style Apple uses, and lightened it up a bit to make a drop shadow from the B visible. I used Pixelmator<\/a>\u00a0(who’s icon is also looking a little incongruous. Correction, this icon was updated with the latest version, my Dock just hadn’t updated yet.<\/em>) with this OS X icon template<\/a>, and then produced an icon using Img2icns<\/a> for the final result. I didn’t spend the time to really do everything properly at every size though, as I don’t really have the tools for that. The only way I’ve done that before was with Photoshop and IconBuilder and I don’t have Photoshop currently. Plus that would take a lot longer and I wanted something quick.<\/p>\n

\"\"<\/a>
Original, Natty’s, Mine.<\/figcaption><\/figure>\n

Here’s the actual icon file if you want to use it as well:<\/p>\n

Byword Replacement Icon.icns<\/a><\/p>\n

UPDATE:\u00a0<\/strong>I’ve changed the font and made the B larger. It’s still not the right font, but the bar thickness is better. I think the B might be too big now, but I’m still working on it.<\/p>\n

Byword Icon 3.icns<\/a><\/p>\n

\"Byword<\/a>UPDATE 2:<\/strong> Small tweaks to the gradient. Also started playing around with a version for OmniFocus, not that all icons in OS X should be circles now!<\/p>\n

\"Byword<\/a>\"OmniFocus<\/a>\"OmniFocus<\/a><\/p>\n

UPDATE 3:\u00a0<\/strong>A few months back the official actual icon of Byword was updated to a new modern look. The App developer went with an even more minimal look than what I was playing with and I think it looks great:<\/p>\n

\"The<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

Byword has become one of my favorite apps to write in, even just as a scratchpad sometimes, from amongst many, many Markdown text editors. It works great in OS X 10.10 Yosemite too, but I find the icon clashes in my Dock with the new style of system icons. I get the typewriter key idea, […]<\/p>\n","protected":false},"author":2,"featured_media":230,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[55,24],"tags":[],"class_list":["post-220","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-icons","category-interface-design"],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/jeffhottinger.com\/blog\/wordpress\/wp-content\/uploads\/2014\/11\/All-Byword-Icons2.png?fit=818%2C268&ssl=1","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts\/220","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/comments?post=220"}],"version-history":[{"count":15,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts\/220\/revisions"}],"predecessor-version":[{"id":375,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/posts\/220\/revisions\/375"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/media\/230"}],"wp:attachment":[{"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/media?parent=220"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/categories?post=220"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jeffhottinger.com\/blog\/wp-json\/wp\/v2\/tags?post=220"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}