Mesačné archívy: september 2010

Grafické formáty JPEG, GIF a PNG

V praxi sa môžeme najčastejšie stretnúť s tromi typmi súborových formátov pre ukladanie obrazovej informácie. Tých formátov je v skutočnosti viac, ale na webe to budú, PNGGIF. No a výstupom z bežného fotoaparátu bude formát JPEG. Predstavme si ich bližšie.

Formát JPEG

Jedná sa o stratový formát, ktorý umožňuje nastaviť mieru stratovosti buď smerom ku kvalite obrázku, alebo smerom k jeho veľkosti, ktorú bude zaberať na disku. To znamená, že čím vyššia kvalita informácie, tým viac miesta na disku bude zaberať.

Tento formát je štandardom – nech ho použije ku kompresii ktokoľvek, vždy to bude ten istý JPEG obrázok.

Využitie

Fomrát JPEG má najväčšie využitie v ukladaní farebných a čiernobielych fotografií a malieb realistických scén. Hodí sa na obrázky, kde je prechod z jednej farby do druhej veľmi plynulý, i medzi ich odtieňmi. Na druhú stranu, je nevhodný pre ukladanie obrázkov ikoniek, textu, pretože tie obsahujú ostré hrany (okraj textu, ikonky, …) a tie spôsobujú, že JPEG môže na týchto vysoko kontrastných miestach vytvoriť poznateľné artefakty. Preto je vhodné takéto typy obrázkov ukladať v bezstratovom formáte.

Obrázok nižšie ilustruje, ako artefakty vyzerajú, keď sa snažíme ukladať vysoko kontrastnú informáciu vo formáte JPEG.

Text v JPEG formáte

Preto, ak ukladáte obrázky, ktoré znázorňujú prostredie počítača (ang. screenshot), je vhodné použiť formát PNG, nie JPEG, ktorý môže spôsobiť práve spomínané artefakty, nakoľko v počítačovej grafike je kontrast na ostrých hranách dosť bežný.

Obrázok nižšie ilustruje fotografiu vo formáte JPEG. Ako sa môžete presvedčiť pohľadom na originálu veľkosť, tento formát je pre tento typ informácie – fotografia – vhodný.

Fotka bodliaka JPEG

Kompresia

Kompresia, ktorú používa JPEG formát je stratovou kompresiou – znižuje množstvo informácií potrebných na popísanie obsahu obrázku. Kompresia v tomto prípade funguje tak, že informácia o farbe sa ukladá v nižšom rozlíšení, ako informácia o intezite tejto farby. Kým v mnohých prípadoch je táto strata nepozorovateľná, tak na druhej strane umožňuje uchovať oveľa viac obrázkov na disku, ako obrázkov uložených v bezstratovom formáte.

Formát PNG

Tento formát (ang. Portable Network Graphics) je bezstratový, vhodný na grafiku s ostrými hranami a na zábery rozhrania operačného systému. Je ideálnym formátom pre grafické rozhranie webových aplikácií (pretože často obsahujú vysoko kontrastné miesta). Bol vyvinutý, aby nahradil formát GIF. Problémom jeho rozšírenia je používanie starého prehliadača Internet Explorer vo verzii 6 (hlavne v minulosti), ktorý beží dnes väčšinou na nelegálnych verziách operačného systému Windows XP.

Jedná sa o jednu bitmapu obrazových bodov. Ponúka všetko to, čo ponúka aj GIF, ale nevie animácie. Obrázky vo formáte PNG môžu byť uložené buď ako 8-bitové PNG (rovnako, ako GIF – max. 256 farieb pre jeden celý obrázok), alebo ako 24-bitové PNG, ktoré umožňuje ukladať oveľa viac farieb v danom obrázku.

Výhodou tohto formátu je, že vie pracovať s alfa kanálom. To znamená, že akúkoľvek farbu vie spraviť do istej miery priesvitnou. Na obrázku nižšie vidno tieň okna prehliadača, ktorý má čiernu farbu s istým alfa kanálom.

Tieň okolo okna s alfa kanálom

Keby sme tento obrázok stiahli a zobrazili nad akýmkoľvek iným obrázkom (vrstvou), tak cez spomínaný tieň by bolo vidno podkladový obrázok (vrstvu). Na toto musíme mať vhodný grafický editor. Nám najdostupnejší je práve GIMP.

V podstate môžeme povedať, že náš vlastný tieň, ktorý vidíme pri ostrom osvetlení, je čierna farba s alfa kanálom, s istou mierou priesvitnosti. Prečo? Pretože o tomto tieni vieme prehlásiť, že v ňom vidíme aj farbu jeho podkladu.

Obrázok nižšie ilustruje, ako čierny tieň s mierou priesvitnosti prevezme farbu svojho podkladu.

15195190_277999856

Využitie

Keďže sa jedná o bezstratový formát, PNG môžeme použiť aj na fotografie. Žiaľ, s väčším potrebným miestom na disku na ich uloženie, ako tomu bolo pri formáte JPEG. Keďže rozdiel medzi JPEG a PNG pri fotografiách pre bežného človeka nie je viditeľný, je lepšie s fotkami ostať pri JPEG.

PNG je, naopak, veľmi vhodný pre webovú grafiku. Keď si pozriete akúkoľvek modernú webovú stránku, obrázky sú uložené vo formáte PNG. Je to kvôli tomu, že PNG nevytvára artefakty a vysoko kontrastné plochy sú na obrázkoch veľmi dobre čitateľné.

Obrázok nižšie to ilustruje (prítomné ostré línie).

Použitie PNG obrázku vo webovej grafike

Formát GIF

Je najstarším, naviac bezstratovým grafickým formátom určeným predovšetkým pre webovú grafiku. Tento formát ukladá obrázky len v 8-bitovom kódovaní, čiže pre celý obrázok ponúka len 256 farieb, čo je dnes už veľmi obmedzujúce.

Na druhú stranu, ak máme ikonky určené pre webovú grafiku, ktoré sa skladajú z maximálne 256 farieb, je formát GIF veľmi vhodný.

Obrázok nižšie ilustruje ikonku vo formáte GIF (len niekoľko odtieňov sivej a biela).

GIF ikonka

GIF taktiež umožňuje priesvitnosť, ale nie v takom rozsahu, ako PNG. Kým PNG umožňuje dať mieru priesvitnosti akejkoľvek farbe, GIF to vie urobiť len tak, že miesta, ktoré sú priesvitné, nebudú obsahovať žiadnu informáciu o farbe – budú akoby vystrihnuté z obrázka.

Využitie

Ako sme už spomínali, je predovšetkým určený pre webovú grafiku. Inde je jeho použitie takmer zbytočné. Fotografia v tomto formáte je zobrazená na obrázku nižšie (pri zobrazení originálu vidno použitie len 256 farieb).

Fotka vo formáte GIF

Záver a použitá literatúra

Ešte existuje veľké množstvo grafických formátov (BMP, SVG, …), ktoré by stálo za to spomenúť a rozobrať bližšie. Preto štúdium tejto problematiky ponecháme každému zvlášť. Ostáva pripomenúť, že je dôležité, kde a ako sa použie daný typ formátu. PNG a GIF sú ideálnym formátom pre webovú grafiku a grafiku rozhraní aplikácií od operačných systémov, až po aplikácie v mobilných zariadeniach. JPEG je zase vhodný pre fotografie.

Použitá literatúra

Operačné systémy. Ktorý si vybrať?

Existuje veľké množstvo operačných systémov. Od mobilných telefónov, cez smartphone-y, až po stolné počítače. Obmedzme sa na stolné počítače. Spomenieme si hlavne tri operačné systémy, z ktorých každý má nejaké výhody i nevýhody:

  • Mac OS X,
  • MS Windows,
  • Ubuntu Linux.

Všetky vyššie spomínané operačné systémy fungujú na báze práce s oknami a interakcii s myšou.

Mac OS X

Je do detailov dotiahnutý operačný systém postavený na Unix-ovom jadre, z ktorého myšlienky vychádza aj Linux. Výhodou tohto systému je to, že integruje v sebe hardvér a softvér, ktoré sú medzi sebou výkonovo vyladené. Práve v tom je výhoda všetko-v-jednom riešenia: Mac OS X sa dodáva výhradne s hardvéhom Apple. Resp. s hardvérom, ktorý si Apple objedná a vyladí jeho výkon pre seba.

Výhodou tohto spojenia je fakt, že aj počítač s nižším výkonom oproti konkurencii dokáže pracovať svižnejšie. Aj preto je Mac OS X využívaní (v jeho najsilnejšej zostave) pri strihaní videa, mixovaní muziky, prípadne v grafických štúdiách.

intro_finder_20090824

quicklook_hero20090608

MS Windows

Operačný systém od firmy Microsoft je masovo rozšíreným systémom práve vďaka zmluvám, ktoré má Microsoft s firmami vyrábajúcimi notebooky, resp. tzv. skladačky – počítače poskladané podľa potrieb zákazníka.

Systém Windows 7 sa dostal kvalitatívne medzi špičkové operačné systémy, ktoré stavajú taktiež na prívetivé grafické používateľské rozhranie (ang. GUI – graphic user interface).

taskbar_peek_web

Ubuntu Linux

Systém Ubuntu Linux je postavený na Linuxovom jadre, ktorého inšpiráciou bol práve operačný systém Unix. Názov Linux je samopopisný, a v angličtine znamená Linux is not Unix. Myšlienkou väčšiny operačných systémov Linux je ich voľná dostupnosť. V podstate sa dajú inštalovať na akýkoľvek dnes dostupný hardvér, navyše sú zadarmo.

Nevýhodou tohto systému je nutnosť ho konfigurovať, ak chceme používať zložitejšie aplikácie oproti kancelárskym balíkom a prehliadaním internetu.

Od začiatku histórie operačného systému Linux platí, že je skôr pre náročnejších používateľov, ktorým neprekáža ani niekoľkohodinové nastavovanie, ak ho chcú využívať naplno.

u21_office_03_large

u21_office_02_large

Rozdiely

Kým operačný systém Windows ponúka množstvo aplikácií tretích strán, ktoré môžu byť esteticky na nízkej úrovni, aplikácie pre operačný systém Mac OS X ponúka väčšinou graficky veľmi dobre spracované aplikácie tretích strán. Nemusí to však platiť a ani neplatí vždy. Sú aj výnimky.

Cenová politika je aj tu rozdielna. Kým aplikácie pre Mac OS X sú relatívne lacné, pre MS Windows je cena vyššia. Neplatí to samozrejme plošne, ale pre bežné aplikácie sa to dá zovšeobecniť. Napríklad MS Office pre MS Windows stojí pre komerčné použitie cca. 400€, kým kancelársky balík iWork pre Mac OS X a pre komerčné použitie stojí cca. 80€. Pre Linux (Ubuntu v našom prípade) je OpenOffice, ktorý je zadarmo, no neponúka tak dobré používateľské rozhranie, ako MS Office alebo iWork.

Rozdiel medzi plateným softvérom a neplateným je v tom, že ten platený je robený predovšetkým s myšlienkou uspokojiť používateľa, kým softvér poskytnutý zadarmo je skôr len náhradou za platený bez ohľadu na príjemnú funkčnosť, nie plnohodnotným produktom.

Ďalej kým hardvér firmy Apple s operačným systémom Mac OS X je relatívne drahý, tak operačný systém MS Windows zoženiete aj na hardvére za 300€. V tomto prípade je vhodná otázka, či sa uspokojíme z bežným plastovým výliskom, ktorý nespĺňa žiadne estetické normy, alebo s kvalitným dizajnovým prevedením. Všetko je otázkou osobných preferencií.

Koniec koncov, je potrebné myslieť nie len na výkon, ale aj estetický dojem. Estetika dotvára celkový pocit pri práci na zariadení. Nikoho nebaví hrať so zlomenou hokejkou, ale pekný nástroj s kvalitných materiálov inšpiruje k ďalšiemu rozvoju.

Kto teda zvažuje profesionálnu tvorbu, nech siahne na Mac OS X, kto chce len používať operačný systém na báze zasurfovania si na internete, nech siahne na Ubuntu alebo iný Linux. Kto chce niečo medzi tým, nech siahne na operačný systém MS Windows. Týmto nechcem znevažovať ani jeden z nich, skôr naopak, všetko záleží od potreby.

Kódovanie farieb pod pokrievkou

Farebné schémy

V článku o kódovaní farieb sme sa venovali tejto problematike tak trochu z obďaleč. Pozrime sa však na to, ako sa farby v počítačových systémoch kódujú a prečo tie zápisy sú také, aké sú, a ktorý zápis je nám ľuďom blízky.

Pripomeňme si, že obrazový bod na farebnom displeji akéhokoľvek elektronického zariadenia sa skladá z troch farebných zložiek:

  • čerená (ang. red),
  • zelená (ang. green),
  • modrá (ang. blue).

RGB model

Z vyššie uvedeného vychádza aj názov tohto modelu: RGB model. Tak začnime ním. Ako už samotný názov, resp. popis názvu napovedá, tento model bude kódovať farby tromi zložkami a ich vzájomným pomerom. Inak povedané, RGB model hovorí o miere prítomnosti každej zo spomínaných troch farieb na výstupe. Ich kód je v poradí RGB (červená, zelená, modrá).

Povedzme, že farba v RGB bude takáto: RGB(všetko, nič, nič). Inak povedané: červenej bude najviac, zelenej nič i modrej nič. Preto výsledná farba na výstupe bude červená. Všimnime si tie hodnoty na obrázku nižšie – konkrétne položky red (255), green (0), blue (0).

screen-shot-2010-09-11-at-93041-pm

Treba poznamenať, že každá z troch RGB zložiek je zastúpená na škále 0 až 255 (to znamená, že škálovateľných bodov je 256). Preto ak niekde vidíme napísané, že displej zobrazuje vyše 16 miliónov farieb, neznamená to nič iné, ako že podporuje kompletný RGB model, pretože 256*256*256 = 16777216.

Analogicky poriadnu zelenú dostaneme symbolickým zápisom RGB(0,255,0) a poriadnu modrú zápisom RGB(0,0,255).

Pozorný čitateľ už istotne šípi, ako sa bude miešať tých zvyšných vyše 16 miliónov farieb: pridávaním, či uberaním každej zo zložiek červená, zelená, modrá.

Len ilustračne, trávová zelená bude v tomto modeli symbolicky zapísaná takto: RGB(141, 178, 63). Inak povedané, bude sa skladať zo 141 škálových bodov červenej, 178 zelenej a 63 modrej. Obrázok nižšie to ilustruje.

Trávová zelená

Hexadecimálny model

Po RGB modeli musíme ihneď nadviazať hexadecimálnym modelom, pretože ho verne kopíruje. Kým v RGB modeli sme zastúpenie jednotlivých zložiek (červená, zelená, modrá) zapisovali v desiatkovej sústave, v hexadecimálny model, ako už jeho názov napovedá, budeme zapisovať v šestnástkovej sústave. Symbolicky zapíšme poriadnu červenú: hexa(ff0000).

Prvá dvojica číslic tohto šesťmiestneho zápisu tvorí zložku červenú (ff), druhá dvojica číslic zložku zelenú (00) a tretia dvojica zložku modrú (00). Napríklad pre poriadnu zelenú by bol symbolický zápis: hexa(00ff00).

V podstate tu platia rovnaké pravidlá o miešaní, ako aj pri modeli RGB. Rozsah škály každej farby je od 00 po ff v zápise šestnástkovej sústavy. Tak napríklad veľmi pekná sivá (no veľmi svetlá na bežné displeje, aby sa dala rozlíšiť od bielej) by mala zápis: hexa(f7f5f1).

HSL/HSB model

Tento model, na rozdiel od dvoch vyššie spomínaných, popisuje farby viac pochopiteľne ľudskej logike. Skladá sa z troch hodnôt:

  • odtieň (ang. hue),
  • sýtosť (ang. saturation),
  • svetlosť/jas (ang. lightness/brightness).

Odtiaľ aj skratka pre tento model: HSL/HSB.

HSL/HSB model farebný

V podstate sa jedná o takýto princíp: vyberieme si farbu (odtieň), jej sýtosť (či má byť viac k sivej, alebo k plnej farbe v danom odtieni) a jej jas (či má ísť viac k bielej, alebo k čiernej).

hsb_colors

Webový miešač farieb

Na jednoduché miešanie farieb použijeme toto Miešadlo.