New to Typophile? Accounts are free, and easy to set up.
Modern pixel art //case: YouTube
Posted by miha in
3 Aug 2009 — 7:55am
3 Aug 2009 — 7:55am
YouTube has so unreadable favicon. New one is on the right:
If you want to be suprised: white text on red is not really white, it is purple & yellow! There is no spoon.
- miha's blog
- Login or register to post comments
User login
Support our Sponsors
Comments
3 Sep 2009 — 2:26pm
This is very interesting.
How did you create your new & improved version - was it created by hand or is there a Photoshop or similar technique?
Cheers,
Henry
--
Henry Hadlow - Graphic Design / Art Direction
9 Sep 2009 — 12:51pm
Hi! Of course it was created by hand!:-) Programs can not do this, well at least not successfully. Particularly Photoshop can't. But you can set very small type in World or in web page, take a screenshot, enlarge it and then study the colorful world that you did't even know it was there! (link 1, link 2)
It helps if you use some techniques of pixel art.
I remembered I did some other favicons as well, I just have to post them!
Oh, and I see there is too strong yellow in YouTube favicon…
9 Sep 2009 — 1:11pm
Doing screen shots of windows font smoothing and then zooming in can produce some interesting color palettes.
9 Sep 2009 — 2:02pm
So, some more (old one on left, new on right):
BBC favicon. There is also an optical correction; I tried to make the upper bowl of "B" a little smaller.
MATD favicon, which has most visible differences in "D" and "A".
This could be the classic example, so I attached an enlargement (OK, serifs in "M" aren't necessary):
And Ascender favicon:
I don't think there is something wrong with originals, but they are not perfect either.
9 Sep 2009 — 9:39pm
You're of a rare breed - it takes one to know one!
Although not using subpixels, you can see a similar
type of obsession in my Mana grayscale pixelfonts:
http://www.themicrofoundry.com/manademo/
And one day I'll use Photofont to make subpixelfonts.
Some people will tell you you're nuts. Just smile
and ignore them - they don't know what Craft is.
hhp
10 Sep 2009 — 2:39am
Creating Mana was surely a lot of work! It's good that I decided to do favicons, the smallest think on webpages (16×16) … yet very noticeable. But maybe I can create a very small-sized subpixel font.
I know this is nuts (or maybe not?), and this is one of the reasons I like it. :-D
15 Sep 2009 — 10:14am
miha, you rock
15 Sep 2009 — 10:48am
This is unreal man. That YouTube favicon, especially. Really great work.
15 Sep 2009 — 12:36pm
Have you considered building a Photoshop filter for this? It can be at least partly automated.
(I'm the author of "ICO Format" and the other plugins on this page, http://www.telegraphics.com.au/sw/ - talk to me privately if you'd like to pursue this.)
15 Sep 2009 — 12:45pm
Thanks! I know it is not real: colors are there but you just hardly see them :-)
15 Sep 2009 — 1:00pm
Photoshop filter is certanly an interesting idea. Maybe it can be implemented in a way that you draw a line and it returns a line with subpixel rendering. Specially useful if you use lines in colors.
Well, the problem is that I only know ActionScript 3.0 (and basic PHP). I have also a doubt how much automation is possible.
15 Sep 2009 — 1:57pm
I'm not sure this would work on display devices other than LCDs with RGB-ordered subpixels. What about jumbotrons, OLEDs, CRTs, greyscale reflective LCDs, or BGR-ordered LCDs?
Found a cool site with monitor tests, including a pic that can help you determine your LCD's subpixel ordering.
15 Sep 2009 — 1:58pm
An excellent demonstration. And Hrant, this reminds me of stuff you were talking about (manual grayscale bitmaps) circa 2003.
15 Sep 2009 — 2:22pm
miha: When I say "automation", it's possible to process a higher resolution image down to an icon while generating the correct RGB encoding of the subpixels. Same way subpixel type rendering works. Plugins are typically coded in C or C++. Just saying I'm open to collaboration on that, if you were interested. Probably this would be a Filter.
15 Sep 2009 — 2:31pm
From Twitter:
litherland @aegirthor Me, too. This is the hottest thing since I can't remember when.
15 Sep 2009 — 4:13pm
Do you think something like Quartz on Mac OS X is clever enough to display all vector images with sub-pixel accuracy?
15 Sep 2009 — 6:16pm
On the Youtube icon there's a big difference just because you resized the red box in your favicon to 15 pixels wide versus the original's 14 pixel width. In the original, there aren't enough pixels to make the letters readable and have space to put a break between the 'b' and 'e'.
16 Sep 2009 — 1:12am
Susan, you are right, this favicons works only on monitors with RGB-ordered subpixels. But I think this type is in majority. Also, Windows ClearType offers an option for BRG-ordered subpixels, but not for other monitors. I would like to know the usage percent of different types of monitors …
Toby: I have to do some research about Ps filters and then I will contact you. Maybe I can help with something.
Vector images can be displayed with subpixels, but there is a catch: It works good for black & white text, but with colorful pictures benefits of subpixel rendering may be lost.
Thom, welcome to Typophile! I have to say you are right. The new favicon looked better just because of added pixel and because old one is bad. Subpixels were just for show :-)
Although I tried again: (original first, second and third are mine; the third one is even one pixel less wide)
16 Sep 2009 — 3:43am
haha! Nice comeback, miha :)
16 Sep 2009 — 5:04am
I see subpixel anti-aliasing as overrated. Also does not work on some displays.
16 Sep 2009 — 5:58am
Jakub, I think your favicon is the nicest (except for the top of the "Y", which could be made more Y-like as in my previous post – with subpixel positioning).
But if you preserved 14 pixels wide background (like in original favicon), there is no way to make it as nice as with subpixel rendering. And certainly impossible with 13 pixels.
Actually I was frustrated with original design, this is why redesigned it – using my newest obsession. I have YouTube open all the time (mostly listening to the songs) and have to watch its blurry favicon … same with Wikipedia.
BTW, there is an explanation on Microsoft site that "a very small number [of LCD screens] have a striping order of BGR". It also says that it improves rendering on CRT, but just a little.
16 Sep 2009 — 6:10am
Certainly not ideal, but still legible at 13x13px I'd say. :)
16 Sep 2009 — 6:58am
Ugh, now you suprised me!
Ok, here is side by side comparison (well I know you could make "You" smaller):
Yours has more true colors … but mine has counters in "u" and "b"! :-D
16 Sep 2009 — 7:00am
Can we do now one with 10 pixels? :-P
16 Sep 2009 — 7:40am
BTW, you did see my subpixel font with x-heigh of 3 pixels? It's here: First subpixel typeface, ever. It's actually more appropriate for subpixel design than colorful icons.
16 Sep 2009 — 7:55am
I have. Truly stunning! Especially if you blow it up and wonder what on earth it reads ;)
16 Sep 2009 — 3:17pm
The most common case where subpixel hinting breaks down might be display devices that can be rotated. I used to run a 17" LCD in portrait mode for more vertical space, for instance. A more common example is probably portable devices like iPhones that can change orientation at will.
Not to discourage the work, of course. Subpixels are awesome. =)
17 Sep 2009 — 7:05am
»Have you considered building a Photoshop filter for this? It can be at least partly automated.« — qu1j0t3
Something similar exists already. Not as a Photoshop filter but a command line tool for Unix systems. It works well, check my comment there for an example.
»I see subpixel anti-aliasing as overrated. Also does not work on some displays.« — jimmac
I think that is because OpenSuse doesn’t enable the true contemporary goodness of FreeType. The old-fashioned intra-pixel filtering is awful.
17 Sep 2009 — 1:33pm
Tobias, this link and its content are awesome! Really great. When I see the favicon on his site, I think redesigning YouTube favicon here is just a child play … I knew the site was special in a first moment because of sharp heading, rendered with subpixel technology.
I've already seen pictures rendered with this technique loong time ago, but they were bad. On this site, they look great!
18 Sep 2009 — 8:22am
"Hi! Of course it was created by hand!:-) Programs can not do this, well at least not successfully."
Uh, they can do this very successfully, actually. There is no shortage of subpixel-aware icon editors out there, and it is not at all difficult to construct a three-boolean lookup table to colors.
In your other post full of false data, I already provided you links to two different image editors, one from the 1970s, which could do this quite easily. You know, the one where you claimed you didn't see any links to font images or font packages.
John Haugeland is http://fullof.bs/
19 Sep 2009 — 12:40pm
John Haugeland your website is named perfectly. Make of that what you will.
miha, Tom Gidden is a friend of mine, actually :) he said he has been reading this thread with interest when you first posted it. Before I even told him about it
20 Sep 2009 — 11:47am
Interesting, Matt! I didn't know he was reading :-)
21 Sep 2009 — 4:51am
Here's a favicon that might lend itself to your skills.
http://kakaku.com
21 Sep 2009 — 10:07pm
Hi all, We've been following this thread at YouTube and are happy to let you know that you've inspired us to change our favicon. We're preparing a blog post about it, but in the meantime we wanted to send Miha some YouTube gear as thanks for bringing it up. Can you email your mailing address to: mia@youtube.com? Thanks!
22 Sep 2009 — 2:08am
Hi Mia & others, I am positively surprised! I've sent you an email.
Matt, you will have to wait a little longer, I am busy with designing my typeface! :-P I've already started and it is not as hard as it seems.
22 Sep 2009 — 2:41am
This is great news, well done YouTube and well done miha!
23 Sep 2009 — 3:40pm
The blog post is now live and the favicon is updated (on YouTube, at least). It will take a while to populate across the Web: http://youtube-global.blogspot.com/2009/09/user-inspires-favicon-change....
Thanks again!
24 Sep 2009 — 5:53am
Looking great! Well done all involved.
Shame it's not miha's sub-pixel favicon, though.
24 Sep 2009 — 10:10am
^ It does use half of his version (the "You") and the "Tube" part is based on the one that jimmac created since the "Tube" lettering is a bit more clear.
It was also widened by 1px so it's the full 16px wide (instead of 15px, so there's no white line along the edge).
24 Sep 2009 — 10:42am
Digression: It's great to see this new crowd frequenting Typophile. I hope you guys stick around for more/deeper font talk. And I'd encourage you to browse around this new home - especially the bitmap stuff.
hhp
24 Sep 2009 — 11:57am
congrats miha! excellent work.
24 Sep 2009 — 1:52pm
Congrats! I wish they had included the upper-right corner reflection, but good news all the same.
25 Sep 2009 — 5:35am
Marc Piel
25 Sep 2009 — 5:45am
I have been very interested in the discussion on sub pixel type because of the "italic" version.
As an industrial designer I have often had to design IHM with pixels and have just realised the number of times I italised, because it made for easier reading, word spacing, etc....
This is even true with a 7x5 pixel matrix!
Does anyone have any comments on this?
Marc
25 Sep 2009 — 6:54am
"It’s great to see this new crowd frequenting Typophile."
Exactly, and as a consequence this thread's quality increased.
"Here’s a favicon that might lend itself to your skills."
Hm, doing this is easy … I did it, but ".com" is rendered with Saffron, an Adobe Flash rendering engine. There are actually a lot of possible designs. Here is one:
Marc – welcome to Typophile! Can you explain with more details?
28 Sep 2009 — 9:43am
nice work, miha
1 Oct 2009 — 4:51am
@miha: this is great work. Would you mind if we used the redesigned favicon for MATD?
—
http://davi.cz
1 Oct 2009 — 8:37am
David, you can use it (I also replied to your email). I think different rasterisers can give good result too in this specific case, because letters are relatively big.
Matt, thanks!
6 Oct 2009 — 11:21am
You know who REALLY needs the subpixel favicon makeover? FontShop. Go there and you'll immediately see why :-)
6 Dec 2009 — 10:47pm
Google There's an incredibly short post up at Typophile by Miha showing how much better YouTube's favicon could be if Google applied a sub-pixel rendering technique. Sub-pixel rendering is the approach that Microsoft uses in its ClearType font-smoothing technology, though there are many others using the new york hotels. The concept of sub-pixel rendering is that you can fool the eye into seeing smoother curves and cleaner lines than are actually possible due to the pixel density of a screen by using very specific colors