← späť

CV5: ÚPRAVA OBRÁZKOV A TEXTÚR

Dnes to bude z trochu iného súdka. Na to, aby sme si mohli na model natiahnúť textúru, potrebujeme si ju najprv vedieť prichystať. Použijeme na to program GIMP (gimp.org) - treba si ho stiahnúť a nainštalovať.

Gimp je program v zásade určený na všeobecnú úpravu grafických súborov. Snaží sa byť čo najviac univerzálny, čo je jeho výhodou aj nevýhodou súčasne. Zrovna na túto prácu s textúrami sa nám to aj celkom hodí.

V zásade sa budeme venovať úprave fotografií. Nejde ani tak o to, aby boli čo najkrajšie (na to existuje kopa automatického softvéru), ale o to, aby boli vhodné na textúrovanie.

Znova platí to isté, čo pre blender: tutorialov ku gimpu je na internete mega veľa, nebojte sa googliť.

Ak náhodou chcete použiť tie isté obrázky čo ja, tak tu sú: (ale ináč kľudne použite ľubovoľné iné): obrazky.zip

Ak máte gimp nejakom čudnom jazyku, zmeňte si ho na angličtinu.

teória: FAREBNÉ MODELY

Cieľom každého farebného modelu je nejakým spôsobom zapísať farbu. To, že týchto modelov je viac, odráža fakt, že farby potrebujeme použiť z viacerých dôvodov na viaceré účely. My si urobíme miniúvod do modelov RGB, CMY(K), HSL, HSV.

Model RGB

RGB = (Red, Green, Blue) je trojica číslených hodnôt vyjadrujúca podiel červenej zelenej a modrej. Štandardne sa pri nich používajú hodnoty vintervaloch 0 - 255.

A ako v tomto zápise vyzerajú základné farby? Ak dáme všetky zložky na 0, dajú nám čiernu, ak dáme všetky zložky naplno, dajú nám bielu.

(0,0,0)(255,255,255)

Ak dáme jednu zložku naplno a ostatné na 0, dostaneme práve základné farby red, green a blue.

(255,0,0) (0,255,0) (0,0,255,)

Ak dáme dve zložky naplno a jednu na 0, dostaneme farby cyan, magenta a yellow.

(0,255,255) (255,0,255) (255,255,0)

Ak ste ešte zažili CRT televízory, tam sa to dalo vidieť naživo. Zblízka bolo vidno, že ide iba o kopu tenkých červených zelených a modrých paličiek. Ak svietili silno, zdiaľky sa nám to poskladalo na svetlé farby, ak svietili slabo, získali sme tmavé farby.

Keďže ide o tri hodnoty, môžeme si ich predstaviť ako body v 3D priestore. RGB priestor sa štandardne zakresľuje ako takáto kocka (pri takejto reprezentácii sa často miesto hodnôt (0-255) naškáluje na interval [0,1]).

Každý bod kocky predstavuje trojicu hodnôt a teda aj nejakú farbu. V rohoch má už spomenuté základné farby a na hlavnej diagonále (medzi čiernou a bielou) odtiene šedej. Teda ak chcete sivú farbu, treba vašej farbe dať hodnoty RGB rovnaké (alebo veľmi blízke) Napríklad

(204,204,204) (51,51,51)

Napríklad tá sýta ružová, čo sa vyskytuje na tejto stránke má hodnoty:

(204,0,170)

Model HSL + HSV

Alternatívou k RGB je model HSL = (Hue, Sauration, Lightness), čo by sa dalo do slovenčiny preložiť ako (farba, sýtosť, svetlosť). Povolené hodnoty má nasledovné

Model HSL sa zvykne reprezentovať ako takýto valec, kde úplne hore je biela farba, dole je čierna, dookola sa mení hodnota farby (hue) a smerom dnu farba stráca sýtosť (na stredovej priamke sú sivé hodnoty)

Získavame ním rovnaké farby ako z modelu RGB, len sú inak reprezentované. Naša ružová by tu bola zapísaná ako:

(310°, 100%, 40%)

Model HSV je podobný, ale miesto lightness (čierna - biela) používa hodnotu value (čierna - plná farba).

Podobných modelov je viacero, podľa toho, čo sa nám práve hodí. Prepočty medzi jednotlivými modelmi sú ľahké, na internete k tomu existuje trilióntisíc convertorov. Nie je nutné poznať všetky, treba iba vedieť že takto nejak môžu vyzerať.

Model CMY(K)

Model CMY sa používa na farebnú tlač. Ide o trojicu hodnôt (Cyan, Magenta, Yellow), kde dané číslo fyzicky predstavuje množstvo pigmentu, ktoré tlačiareň na dané miesto vypľuje.

To písmeno K na konci predstavuje štvrtú farbu, a tou je čierna (black). Totižto z pigmentov (Cyan, Magenta, Yellow) viete vyskladať niečo podobné čiernej (a v miunlosti tak aj veľa farebných tlačiarní tlačilo), ale nebude to také pekné ako použiť priamo čierny pigment, preto bol k modelu CMY pridaný aj K. V súčasnoti veľa tlačiarní používa ešte viac rôznych pigmentov (väčšinou ide o ďalšie odtiene sivej, alebo svetlejšie odtiene pôvodných farieb) - závisí to od typu a kvality tlače. Základom je ale stále štvorica CMYK.

Modelu CMY(K) sa moc venovať nebudeme, ale je dobré vedieť, že existuje.

prax: ÚVOD DO GIMPU

Najprv sa zoznámime s prostredím. Vytvorte si nový súbor kliknutím na File → New. Tu si môžeme určiť vlastnosti obrázku (napríklad rozmery). Máme biele plátno a môžeme s ním robiť. Napríklad kliknúť si štetec, vybrať farbu a kresliť.

Pohyb po plátne:

Pozrime sa na výber farieb. Ako sme si ukazovali pri farebných modeloch, farby vždy žijú v 3D priestore. To 3D je tu (tak ako väčšinou) vyriešené tak, že v hlavnom okienku sa pohybujete v 2D priestore a vedľa máte špeci úsečku na pohyb v treťom rozmere. GIMP sa vo svojej univerzálnosti rozhodol, že nám nechá vybrať si ľubovoľný farebný model a aj vybrať si, akú hodnotu chceme mať v špeci úsečke.

Napríklad, si dáme RGB (red green blue) a červenú do špeci úsečky. Na špeci úsečke si vyberáme mieru červenej a na 2D ploche sa pohybujeme v rámci zelenej a modrej. Konkrétne hodnoty vidno aj v tých šípočkách vpravo.

Moje odporúčanie je, buď si vybrať model HSV (hue, saturation, value) a Hue (teda farebný odtieň položiť do špeci úsečky,

alebo využiť tento tu pekný trojuholníčkový model.

Upozorňujem, že každú farbu vám tu zapisuje aj v hexadecimálnom zápise. Toto je zápis, ktorý sa používa v HTML/CSS, tj keď si budete niekedy robiť webstránky (kolónka HTML notation).

Obyčajný štetec, ale aj všetky ostatné nástroje majú nejaké vlastnosti, ktoré sa dajú nastaviť. Nájdete ich vľavo. (Opacity = priesvitnosť, Hardness = ako veľmi sú ostré/rozmazané okraje. Ostatné sú zjavné)

Tak isto sa tam nachádza aj história, tj zoznam krokov, ktoré se vykonali. Môžete sa v nich vrátiť na nejaký konkrétny (toto je to isté, ako použiť Ctrl+Z)

Ktoré okienka (taby) máte a nemáte k dispozícii vľavo a vpravo sa dá prispôsobiť. Je tu na to taká šípočka. Pracovné prostredie v gimpe sa teda dá veľmi silno prispôsobiť vlastným potrebám.

Základná úprava fotografií

Okej najprv sa pozrieme, čo budeme potrebovať na všeobecnú úpravu obrázkov. Otvorte si v gimpe nejakú fotografiu. Buď pomocou File → Open, alebo to tam proste potiahnite.

1. Desaturácia, alebo zčiernobielenie. Toto budeme potrebovať. Je tu k dispozícii viacero algoritmov na výber, proste si vyberte ten, čo sa vám bude zdať k danému obrázku najkrajší.

2. Crop, čiže orezávanie. Urobíme si požadovaný rámik, poupravujeme ho pomocou ťahania za pomocné obdĺžničky na okrajoch a potvrdíme enterom.

3. Na jednoduché úpravy farebnosti odporúčam Color Balance. Napríklad ak máte fotku zažltnutú kvôli zlému svetlu. Všimnite si, že sú tu klikátka zvlášť pre tmavé, stredné a svetlé odtiene. Skúste sa s tým trochu pohrať. Len tak pre srandu, niektoré typy kombinácií vyzerajú ako instagramové filtre (hlavne kombinovanie teplých a studených odtieňov pre svetlé a tmavé tóny)

4. Brightness + Contrast. Riešenie na ak to chceme tmavšie/svetlejšie alebo viac a menej žiarivé.

Svetlosť obrázka sa dá aj meniť aj trochu sofistikovanejšie, pomocou tzv. Levels. Je to dobré napríklad na to, ak sa chcete zbaviť šumu iba istej tmavosti. (napríklad fľaky na stene a tak). Graf nám znázorňuje koľko máme v obrázku pixlov danej hodnoty. Tu máme skoro všetko bledé, až na tie kúsky, kde je text (preto sú vysoké hodnoty blízko bielej a nízke blízko čiernej).

Pomocou týchto šípočiek si vieme „premapovať“ hodnoty čiernej a bielej. Tj. keď presunieme vrchnú šípočku doľava na hodnotu X, z X sa stane biela, a všetky bledé odtiene, ktoré sa dostanú za ňu budú tiež biele. To isté vieme robiť aj s čiernou. V strede si viete posúvať jednu hodnotu sivej, ak chcete aby vám to inak interpolovalo.

Seamless textures

Ak máte na vašom modeli veľkú špinavú stenu, bolo by dosť neefektívne vyrábať pre ňu gigantickú textúru. Stačí urobiť menšiu a nechať 3D softvér, nech ňou danú stenu "okachličkuje". Samozrejme, základná požiadavka je, že musí sama na seba pekne nadväzovať. Ide o takzvané Seamless textures. Pre nepravideľné fľakaté textúry sa dá použiť automatický tool v GIMP-e.

Rozdiel vidíte, keď si ich poukladáte viac vedľa seba (napr 4)

Na internete sa ináč nachádza milión predvyrobených seamless textúr rôznych tehličiek, dlažieb a podobne. Škoda to nevyužiť.

Ako textúru umelo viac zašpiniť?

Obyčajným štetcom. Odporúčam zvoliť nižšiu priesvitnosť (opacity) a meniť veľkosť a farby. Vpravo máte menúčko plné rôznych predvyrobených škvrnitých štetcov. Pohrajte sa s tým trošku. Niečo bude škaredé a niečo pekné. Proste si to treba povyskušovať.

Ako textúru rozmazať? Máme tu blur. Gaussian blur si pre každý pixel urobí maticu okolitých pixlov a hodnotu vyráta ako nejaký ich priemer. Môžete si zvoliť koľko okolitých pixlov chcete aby aby bral do úvahy (o to viac to bude rozmazané)

Pre dnešok všetko. V gimpe je toho omnoho viac, ale to by sme tu boli do večera.

Odstraňovanie konkrétnych prvkov

Poďme teraz na konkrétnu úpravu. Odfotili ste si priečelie domu a dali ste ho svojej frajerke, nech ho nalepí na váš krásny 3D model. A vám to vráti takto.

Nu, čo sa dá robiť, ideme na to. Orezávať už vieme pomocou crop.

Na vyrovnávanie je tu Transform tool. Po kliknutí na tool kliknete na obrázok a môžete transformovať. Niekde sa vám zjaví aj transformačná matica (na gife nie je vidno). Potvrdíte enterom.

Ešte pred transformovaním v gife používam tzv. guides, ktoré si viete „vytiahnúť“ zboku a zhora. Sú to iba také vizuálne pomocné paličky, na obrázok nemajú vplyv. Pomocou nich si môžete opticky skontrolovať, či veci čo majú byť rovno sú naozaj rovno. Schováte ich potom pomocou View → Show Guides.

Ako sa zbaviť vecí, čo tam nechceme? Možností je niekoľko. Velmi praktický je Heal Tool. (Tools → Paint → Heal) Pomocou Crtl+ ľavý klik si vyberieme ktorú oblasť chceme „kopírovať“ a potom ľavým aplikujeme na škaredé miesto. Je to pomalšia hrajkavá robota. Nedá sa to ručne použiť úplne na všetko, ale pri veľa veciach je to dostatočné. Veľmi podobný je Clone Tool (len má viac možností na výber)

(Bohužiaľ v kombinácii s výrobou gifu mi to zúrivo sekalo, takže mám iba jeden a taký zmätený. Prípadne si pozrite nejaký externý tutorial, napr. na youtube.

Druhá možnosť je využiť pekné elementy čo na obrázku máme a prekopírovať ich. (Ctrl+Copy, Crtl+V). Vzniknuté škaredé prechody vyriešime napríklad healom.

Je na vás koľko sa s tým pohráte. Všetko závisí od toho, aká bude textúra nakoniec veľká a ako veľmi bude vidno. Nie je nutné príliš sa babrať s každým detailom. Tuto nižšie som to veľmi narýchlo zacapkala Healom.

SAMOSTATNÁ ÚLOHA:

Doopravujte všetky požiadavky na obrázku. Úlohu mi pošlite ako obrázok (napr. png)