Modern pixel-optimalizáció

Nézzük csak meg a YouTube “javasolt” új favicon-ját, HOT-NESS:

Természetesen kézzel készült, mint minden míves megoldás a világban:

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!

Érdemes végigolvasni az eredeti poszt hozzászólásait, ahol egyéb példákat is találunk. Webdesignerek, hajrá. Mini ikonkészítésben is használható ez a remek ötlet.

update 090917: A csávó közben gőzerővel dolgozott, majd kiadta a világ első, kézzel gyártott subpixel betűkészletét, ami mindössze 3 pixel magas (x-height). Akit érdekel, olvassa a szálat, a többieknek bemutatom, hol tart éppen:

(Mégse kövessétek a szálat, vége felé megjelenik egy majom.)

update 090924: A YouTube-nak annyira megtetszett az új favicon, hogy annak alapján elkészítették a saját változatukat (már látható), sőt, posztot is írtak róla. Szuper, komolyan mondom.

30 Responses to “Modern pixel-optimalizáció”

  1. Gravatar Icon 0 Credo

    Ez lényegében ClearType jellegű subpixeles trükközés, ahogy elnézem. Kérdés, hogy nem BGR-es LCD-n és CRT-n is olyan patent-e, ahogy a legtöbben BGR-es LCD-n látjuk.

  2. Gravatar Icon 1 Péter

    True Beauty :) (A linkelt oldalt meg sürgősen el kell felejtenem, mert különben ma nem fogok tudni dolgozni…)

  3. Gravatar Icon 2 Szindbad

    Subpixel rendering, mi ezen a meglepo? Nalam minden kis meretu szoveg ilyen, ha kinagyitom.

  4. Gravatar Icon 3 rakenroll

    Ertelemszeruen BGR paneleken randa lesz. Ezen az oldalon meg lehet nezni kinek mijennye van: http://www.lagom.nl/lcd-test/subpixel.php

  5. Gravatar Icon 4 Szindbad
  6. Gravatar Icon 5 angelday

    Állj.

    Nem az a szexi ebben a cuccban, hogy feltalálta valaki a subpixel renderinget, az nem újság, hanem az, hogy 16×16 pixelen kézzel megcsinálta a hatást, amit, FYI, a Photoshopban nem lehet ilyen szépen összehozni.

  7. Gravatar Icon 6 Zsoltt

    Azért is van egy csalás is…

    A szebb képen 1 pixellel több van vízszintesen.
    U betűnél tűnt fel, de és tényleg.

  8. Gravatar Icon 7 Szindbad

    A subpixel rendering szintiszta matematika. Ha en hosszu orakon keresztul megszereksztek ‘mivesen’ egy derekszogu haromszoget a paintban, akkor az mar hirtelen ‘cool’ lesz?

  9. Gravatar Icon 8 angelday

    *sóhaj*

  10. Gravatar Icon 9 rog

    :D

  11. Gravatar Icon 10 Ger

    Marion is volna mit csinálni: ha kihalványítanád a keretet, nem lenne annyira kockafejű!

  12. Gravatar Icon 11 soobrosa
  13. Gravatar Icon 12 angelday

    via waxy

    Andy Baio FTW

  14. Gravatar Icon 13 Matrixfan

    Nagyon bírom ezeket a design megoldásokat, főleg ha az ízlésesség felé halad tőle valami.

  15. Gravatar Icon 14 Pepinke

    Az idézet utolsó mondatának első szava “did’t”. Nem hiányzik ott egy n-bötü?
    A téma nem az én hatásköröm. Hasonló dolog a zongora hangolása talán. Itt fehérnek látunk betüket, amik nem azok. Egy manapság is hangolt zongorát tisztának hallunk, holott a félhangközök nem egyenlő távolságra vannak herzben. Tehát a félhangok minden esetben félhangnak hallatszódnak, pedig… A tökéletes hangolás eredményezi a jól temperált zongorát. Amit hamisnak hallunk.
    Tökéletesség vs Matematika.

  16. Gravatar Icon 15 angelday

    Pepinke, az idézet copy-paste volt. De megnéztem és… tényleg hiányzik! Mindegy, ezt már az eredeti komment szerzőjének kéne megírnod.

    A zongorát még kifejthetnéd azért: jól értem, ha faszán behangolod és nincs temperálva, hamis lesz?

  17. Gravatar Icon 16 Pepinke

    A tiszta hangolás az, amit ma hsználunk komolyzenében. Vonóshangszereknél nyilván nem tökéletes, hiszen az ember pár pillanat alatt maga hangolja a hangszerét, de megközelítőleg helyes. Pláne hogy a két hangolás, azaz a tiszta és az egyenletes temperálás egyetlen közös pontja az egyvonalas a-hang. Ez 440 Hz. Sajnos manapság egyre megy feljebb jópár zenekarban már 443. A hangközöket cent-ekre osztották fel, vagyis egy oktáv 1200 cent, azaz egy félhang 100 cent távolság. Ugye az oktávban 12 félhang van. Az egyvonalas c, ami 0 cent, az tiszta hangolásnál 264 Hz, míg egyenletes temperálásnál 261,63 Hz. Az oktáv vége, ami a kétvonalas c, az az 1200 cent. Itt a tiszta hangolás 528 Hz, az egyenletes 523,25 Hz. Az arány 2:1-hez a két c között. Tehát tisztánál 264 + 264= 528, egyenletesnél 261,63 + 261,63= 523,25.
    Az arányok az azonos hangok között ugyanazok, Csak a hangmagasságok mások. Előfordul, hogy akár egy azonos hang tiszta és egyenletes hangolása között fél hang is van.
    Kicsit tömény ez így, remélem valamelyest érthető. De a neten nyilván találsz jobb leírást, táblázattal.
    Ráadásul nemhogy a zenehallgatónak, de a zenésznek sem mind1, mert mi meghalljuk a 18-ad hang eltérést is, ha nem még kisebbet.
    Ennyi röviden, remélem hasznodra lesz.
    :)

  18. Gravatar Icon 17 angelday

    You had me at 440 vs 443 Hz.

  19. Gravatar Icon 18 Pepinke

    :D
    Kiegészítés: a 443 Hz a felhangoknak sem tesz jót, emiatt rosszabb hangzása egy zenekarnak. Ezt persze az is okozza, hogy a romantikában megnövekedett a hangigény, ezért a hangszereket átalakították, stb… Ebből adódóan van manapság vérremenő vita a “régizenészek” és a “hétköznapi zenészek” között.
    Ha van, vagy beszerzel SH atlaszból a Zene kötetet, abban rengeteg érdekesség van az egész zenei témával kapcsolatban.

  20. Gravatar Icon 19 Casper

    “Természetesen kézzel készült, mint minden míves megoldás a világban”

    Én is azóta kezdek el szép dolgokat csinálni photoshopban, amióta nem lábbal fogom az egeret.

  21. Gravatar Icon 20 Barát Csaba

    Nem jobb lenne egyszerűen így megcsinálni? Mit a véleményed angelday?

  22. Gravatar Icon 21 Barát Csaba

    hopsz link lemaradt szóval ez

    http://baratcsaba.hu/blog/kepek/pelda.ico

  23. Gravatar Icon 22 angelday

    Szerintem tökéletes az eredeti példa a posztban.

  24. Gravatar Icon 23 ion

    Nem azert a ket fillerert, de mar akkor is olvashatobb lett volna, ha eleve normalisan megcsinaljak anti-aliasinggal a regi ikont:
    http://i30.tinypic.com/2v96ryr.jpg

  25. Gravatar Icon 24 agazso

    Ezt pont ma talaltam:

    First subpixel typeface, ever.

    http://typophile.com/node/61920

  26. Gravatar Icon 25 Credo

    @rakenroll: Biztos, hogy az általad linkelt oldal okés, nem keveredett meg? Nekem a csíkoknál mindegyik eléggé bleedel, talán az RGB legkevésbé, a Black edge teszt szerint is RGB monitorom van, és a szövegek közül is az RGB-s néz ki a legjobban. Hasonlóképp a Microsoft ClearType oldala szerint is RGB-s a monitorom: http://www.microsoft.com/typography/cleartypefaq.mspx

    Ezzel szemben nekem úgy rémlett, hogy a panelek többsége BGR-es, és a saját tesztem is ezt erősítette meg, hogy az enyém az. A legbiztosabb teszt szerintem: Húzz egy vörös, zöld és kék csíkot egymás alá, ugyanabba a pixeloszlopba, pár pixeles hosszuk legyen, hogy jobban lásd őket. Ez után skubizd meg, valamelyik irányba dőlni fog kicsit a vonal, abból látszik, hogy a pixelen belül a kék vagy a vörös az első subpixel, nálam a kék. (Zoomolni nem szabad, nagyító sem árt, ha van kéznél, esetleg valami durva makróval rendelkező fényképező.)

    Szóval ez eléggé megkevert engem, talán a BGR-t hívják RGB-nek és vice versa, mondjuk a másik irányból számolják, nem a néző oldaláról balról jobbra?

    @Pepinke: Ez a zongorás engem is nagyon érdekelne, irkáltam zenelejátszókat, talán még fogok is, sokat molyoltam, hogy melyik frekvenciatábla az abszolút tuti. (SID és MOD playereken belül is vannak eltérések, “iskolák”, én meg magamtól nem sokat konyítok a zenéhez, csak indexeltem a táblát.) Szóval amit matekkal kiszámoltak, annál kellemesebb a fülnek a nem teljesen pontos tábla? Létezik ilyen, amit szakértőként ajánlanál? Köszönet előre is!

  27. Gravatar Icon 26 Credo

    Hopp, gyorsan korrigálom is magam, én tévedtem, fehér háttéren végeztem a tesztemet, nem feketén, a feketén még sokkal határozottabban látszik, hogy tényleg a vörös van elöl, a monitorom, ahogy bizonyára a legtöbb LCD-s RGB-s. Egyébként erről lenne szó, hátha más is hasznát veszi: http://img38.imageshack.us/img38/8181/rgbteszt.png

  28. Gravatar Icon 27 chek

    kicsit szarjuk le ezeket az technikai dolgokat és egy perces elengedett egérrel tisztelegjünk, azok előtt akik pixelről pixelre képesek egy ilyen komplett családot rajzolni.

  29. Gravatar Icon 28 Andris

    És hogy csinál ebből színes betűket? :) Újrarajzolja az egészet?

  30. Gravatar Icon 29 zeroEV

    Szeretném megjegyezni, hogy a post írásakor még a fent levő (bal oldali) faviconja volt a youtube-nak, de mára kicserélték egy fokkal jobbra, de még mindig nem a jobb oldali ikonra.