Fotó vagy grafika?

Kocsis Kata képe


Bármilyen technológiával is készül egy alkotás, a számítógépre már csak digitalizált formában kerülhet. A monitorok ugyanis egymás mellé helyezett, apró, színes négyzetekkel jelenítik meg a szövegeket és a képeket. A sok közeli, apró "pontot" folytonos vonalként érzékeli a szemünk. Az ilyen pixelesen tárolt képeket nevezzük digitális képeknek. Ma már sok profi fényképezőgép is digitálisan rögzíti a képet, azaz nem kell az előhívással bíbelődni, de szkenneléssel és grafikai programok segítségével is előállíthatóak. Régen a keresztszemes hímzések ugyanezt a hatást használták ki. Minél kisebbek a "szemek" a kép egészéhez képest, annál aprólékosabb, életszerűbb volt a kialakult kép.

Régen is létezett a pixeles gondolkodás

Forrás: keresztszemes hímzés minta

Az ősi mozaikok abban különböznek, hogy a kis kockák nem szabályos négyzetrácsban helyezkednek el, hanem követik az íves minták ívét. Ilyen értelemben nem is tekinthetőek a pixeles ábrázolás modelljének.

Pontokból áll, de nem pixeles ábrázolás

Forrás: ókori mozaik részlet

Egy weboldal esetén valahányszor megjelenik az oldal a böngészőben, minden egyes hozzá tartozó kép is letöltődik az oldallal együtt. Ezért nem mindegy, mekkora file-méretben kerülnek fel a webre a honlapot alkotó grafikai elemek és az illusztrációul szolgáló fotók. Minden egyes felhasználni kívánt képet a lehető legkisebb file-méretben kell előállítani. Első lépésként kisebb méretben is elmenthetjük az eredeti képet, hiszen egy 50 cm x 30 cm-s fotót úgy sem jeleníthetünk meg teljes élet-nagyságban a képernyőn. Második lépésként csökkenthetjük a kép felbontását, azaz bizonyos apró részletekről lemondunk kompromisszumos megoldásként. Harmadik lépésben pedig optimalizálhatjuk a képeket a webes használathoz valamilyen tömörítő algoritmus segítségével.

1 Képméret

A képméretet digitális képek esetén általában a függőlegesen és vízszintesen elhelyezkedő pixelek szorzatával adjuk meg. Például 1024 x 768 pixel. Ezen az ábrán egy nagy méretű képet először kisebb méretben hoztam létre és minden kép alá odaírtam a kialakult file méretet.

1000 px X 681 px -es kép



File méret: 714 KB

300 px X 204 px -es kép



File méret: 77 KB

2 Felbontás

Az egységnyi területre eső pixelek száma a felbontás. Nem mindegy, hogy egy négyzetcentimétert 10 pixellel, 100-al, vagy 1000-el valósítunk meg. Általában a művészi hatások eléréséhez nagyon nagy felbontásokat használnak. Ez azt jelenti, hogy ugyanazt a képet nagyon sok, apró pixel segítségével írják le, és így rendkívül részletgazdag marad a felvétel. Azonban semmi nincs ingyen. Az éles, sok színárnyalatot használó, a fény- és a térbeli viszonyokat visszatükröző, élethű felvételekhez bizony óriási file méretek is tartozhatnak. Az alábbi ábrán jól látható, hogyan homályosodik az alakzat körvonala, ahogy egyre kevesebb négyzet áll rendelkezésre a rajzoláshoz, azaz ahogy csökken a felbontás.

Nagy felbontás esetén élesednek a körvonalak



Forrás: Kreatív Webdesign Tanfolyam

3 Képek webre történő optimalizálása

Optimalizálhatjuk a kép file-méretét tömörítéssel is. Sok ingyenes képszerkesztő program is alkalmas arra, hogy egy fotót tömörítsen. Ez azt jelenti, hogy a felbontást nem rontjuk le, de a kép tárolásakor lefutnak bizonyos algoritmusok, amelyek csökkentik a végső file méretét. Néhány részlet kicsit homályosabb lesz, azaz elveszik az eredeti kép információ-tartalmából valami, de a kép még élvezhető marad. Most a felső képet Photoshop segítségével először 56%-os JPG tömörítéssel , majd 10%-os JPG tömörítéssel optimalizáltam. Az 1,3 M-s kép a 212 KB-os esetbe nem vesztett különösebben a minőségéből (valójában nyomtatásban már látszana a különbség), viszont az extrém tömörítés már ront a kép élvezeti értékén.

1000 px X 681 px -es kép, 300 dpi/inch felbontás



File méret: 212 KB

1000 px X 681 px -es kép, 300 dpi/inch felbontás



File méret: 66,26 KB

A weben tehát fontos a képet megjelenítő file mérete. Ezt a legkönnyebben úgy tudod megnézni Windows alatt, hogy a file-névre ráállsz a Windows intézőben és a jobb egérgombra feltűnő menüből a tulajdonságok menüpontot választod. Ekkor egy kis ablakban megjelennek a file tulajdonságai, többek között a formátuma és a mérete is. Általában az első "Általános" fülön nem látod a kép felbontását, ehhez a "Részletek" fülre kell kattintanod. Ha csak simán megállsz az egérrel egy kép file fölött, akkor is megjelenik egy pici ablak a file méretével és a pixelben megadott szélességgel és hosszúsággal.

Akinek még nincs Adobe licensze, az ingyenes online eszközök segítségével is optimalizálhatja a képek file méretét. Az eredeti kép feltöltésekor az eszköz elkészít egy javasolt optimalizált megoldást, de ha a kis képre kattintasz, megjelennek a fentihez hasonló beállítási lehetőségek. A Photoshophoz hasonlóan láthatod a beállított százalék hatását a képeken.

Képformátumok

A digitális képeket file-okként mentjük el. Attól függően, hogy a képalkotó információkat milyen szabályszerűségek szerint kódolják, különböző file-formátumokról, illetve különböző képformátumokról beszélhetünk. Amikor egy képet valamilyen képkezelő alkalmazás vagy program segítségével megnyitunk, tulajdonképpen ezt a kódot fejti vissza a program a szemünk számára feldolgozható képpé. A legismertebb képformátumok jellemzőit az alábbiakban foglaltam össze. Ezek a JPG a GIF és a PNG.

JPG

Az, hogy egy kép jpg tulajdonképpen azt jelenti, hogy a JPEG tömörítő eljárással lett eltárolva, és ezt a file végén a .jpg kiterjesztés is jelzi. Egy JPG formátumú képet akárhányszor újra lehet grafikai programok segítségével tömöríteni, csak egyre kisebb file-méretű képeket kapunk végeredményként.

Veszteségesen tömörített képformátum. Grafikai programok segítségével lehet más formátumokból jpg file-t készíteni, illetve egy nagyobb jpg file egyre kisebb méretűvé tömöríthető a segítségükkel. Más és más tömörítés mellett marad élvezhető egy kép, ha tájképről van szó, ha egy arcról, vagy egy épületről. a használt színek mennyisége és a részletgazdagság is számít. A grafikai szoftverek lehetőséget adnak rá, hogy a %-ban megadott tömörítés mellett megnézd, milyen marad a képminőség. Így tudod minden egyes képnél helyesen felparaméterezni a tömörített mentést.

Az alábbi képernyőképen megfigyelheted, hogyan romlik a kép minősége az egyre erősebb tömörítéseknél, és közben hogyan csökken a file-méret. A kis ablakok segítenek eldönteni, hogy abban a minőségben még élvezhető-e a kép. A jobb oldalon a Quality mutatja %-ban a képminőséget. Minél kisebb ez a szám, annál nagyobb a veszteség, és annál rosszabb minőségű a kép. 100-asra állítva veszteség nélkül lehet elmenteni a képet. A menüben a File->Export->Save for web útvonalon tudod elérni a Photoshop jpg mentését.

Sokféle változata lehet egy képnek



File méret: 149 KB

GIF

Veszteségmentesen tömörít, viszont csak 8 bit színmélységű, tehát nem túl részletgazdag.Árnyalatok és finom árnyékok nélküli, kis méretű grafikákhoz lehetne még ma is használni, de erre az átlátszó hátterű PNG-et használják ma már. Az animált GIF-ekkel pedig nap mint nap találkozhattok, mert reneszánszukat élik a közösségi oldalakon.

PNG

24 bit színmélységű, kifejezetten a képernyőre tervezett file formátum. Nem támogatja a nyomtatáshoz használt CYMK színmódot. Átlátszó hátterű képekhez, logókhoz ideális, mert nagy részletgazdagságot is meg tud jeleníteni.

Könnyen szerkeszthető digitális képek

Képzeld el azt a helyzetet, hogy egy digitális képen található alakzatot át kellene színezned. Ha a digitális képeknek csak az előző fejezetben említett pixeles (más néven bittérképes) megjelenési módja lenne, akkor ez egy rendkívül fáradtságos, unalmas mechanikus munka lenne. Figyeljétek meg például a KWT logó egy részletén, hogy a körvonalak milyen bonyolult módon alakulnak ki. Nem egyetlen színárnyalatból állnak a körvonalakat alkotó pixelek. Átszínezésnél ezeket a tört színeket is ki kellene kísérletezni. Gyakorlatilag olyan mechanikus munka lenne a webgrafikusé, mint a szőnyegszövő kisiparosoké.

A képek elemekre, objektumokra bonthatóak

Valójában az agyunk nem pixelekben fogja fel az elénk táruló világot. Sokkal inkább tárgyakat, objektumokat érzékelünk. Külön neuronok lesznek aktívak, ha egyenes vonalakat látunk. Felismerjük a különböző együtt mozgó alakzatokat. A tárgyak alakját egyszerűbb síkidomokból állítjuk össze, a köröket, háromszögeket, négyszögeket bonyolultabb mintázatokban is el tudjuk különíteni. Különösen érzékeny az agyunk és a szemünk a kontrasztokra, mert a valódi világban a különböző dolgoknak általában a képe is markánsan különbözik. Kivételek persze vannak, gondoljatok csak a kaméleonra.

Minden rajz kialakítható egyszerűbb alakzatokból



Forrás: Kreatív Webdesign Tanfolyam

A vektorgrafika tulajdonképpen egy olyan képek szerkesztésére alkalmas file formátum, amely a képen található alakzatokat nem pixelesen tárolja, hanem más matematikai módszerek segítségével. Ez azt jelenti, hogy az ily módon "kódolt" információkat csak speciális programok tudják olvasni és megjeleníteni. Illusztrációként megpróbáltam leírni, hogyan képzeljétek el a kétféle tárolási módot.

Pixeles tárolás

Az 1. sor 1. pixele legyen kék.
Az első sor 1. sor 2. pixele legyen #1255B0
A teljes kép ilyen számhármasokkal írható le:
(1, 3, #AA22CC)
(1, 4, #00FF11)
... stb.

Vektoros tárolás

A 26. sor 45. pixele legyen a kör középpontja. A kör sugara legyen 30 pixel. A körvonal színe: fekete. A kör kitöltő színe #ĐĐ4312, a háttér pedig fehér.

Ebből talán megsejthető, hogy különösen nagy méretű képek esetén, mondjuk egy óriás plakát tervezésekor, a pixelesen tárolt kép jóval nagyobb tárhelyet fog felemészteni. Egy több méteres kört pixelenként eltárolni biztosan sokkal több helyet igényel, mint egy két centiset. A vektorgrafikánál azonban nem ez a helyzet. Pontosan ugyanakkora egy két méteres kör forrás file-ja, mint a két centisé. Ugyanakkor, ha sok dolog történik a képen, sok az alakzat, és nem túl nagy méretű a kép, akkor a pixeles tárolás akár kisebb file-méretet is eredményezhet.

Ha egy vektorgrafikán kapod meg a kör átszínezésének feladatát, kb. 60 másodperc alatt végzel. Megkeresed a kör objektumát, és a kört alakító paramétereknél a körvonal színét kiválasztod a Color Picker panelen. Minden másról a program gondoskodik. Ha vastagabb körvonalat szeretnél, természetesen nem fogod a pixeleket kattintgatni az eredeti körvonal mentén, hanem megkeresed hol kell beállítani az alakzat körvonalának vastagságát. Ahhoz, hogy bonyolult illusztrációkat is lehessen készíteni, ezek a grafikai programok meglehetősen bonyolultak lettek. Minden egyes elem külön mozgatható, színezhető, felület rendelhető hozzá, mintázatot, árnyékot vagy éppen körvonalat kaphat. Egy átlagos Adobe Illustrator munkán akár több ezer beállítási lehetőség van. Az ehhez tartozó kezelő felület egy űrhajóéval vetekszik. Nem véletlen, hogy a webgrafikus rendkívül jól fizetett és keresett szakma. Egyáltalán nem könnyű profi szinten elsajátítani egy vektorgrafikai program használatát. És még ha a kisujjadban is vannak a technológiai alapok, nem biztos, hogy mindez művészi érzékkel párosul...

Az Adobe Illustrator kezelő felülete



Forrás: Kreatív Webdesign Tanfolyam

Vektoros képek felbontása

Ez a fogalom a vektoros képek esetébe nem igazán értelmezhető. Ugyanis egy vektoros kép tetszőlegesen lekicsinyíthető, vagy felnagyítható, mert csak a grafikát alkotó szabályokat tárolja el. Amikor a vektoros formátumból pixeles képet mentünk, akkor lehet megadni, hogy mekkora képméret és mekkora felbontás mellett készítse el a pixeles képet.

A Save as / Mentés funkciónál állítod be a felbontást



Forrás: Kreatív Webdesign Tanfolyam

Ha utána az így keletkezett képet nagyítjuk, akkor a minősége romlani fog. Ellenben, ha az eredeti vektoros képet mentjük el kétszeres méretben tökéletes marad a minőség. Az első képen 473 px szélességben mentettem el az oroszlánt jpg-ben az Illustrator Save as funkciója segítségével veszteségmentesen, azaz 100%-os tömörítést beállítva, majd Photoshopban kétszeresére nagyítottam. A második esetben Illustrator-ban mentettem eleve 946 pixel szélesre a jpg képet és 60%-os tömörítést alkalmaztam, hogy ne maradjon túl nagy a file-méret. Tehát a második esetben még rontottam a minőségen. Figyeljétek meg, hogy az utólag nagyított verzió mennyivel rosszabb minőségű lett (azaz az első eset a rosszabb, a második a vektorgrafika előnyeit illusztrálja). A képekre kattintva a jobb alsó sarokban megjelenik a további nagyíthatóságot lehetővé tevő ikon.

Photoshopban utólag kétszeresére nagyítva



Illustratorban eleve kétszer akkoraként mentve



Tehát nemcsak amiatt ideális eszköz a logó tervezéshez, mert az elemek tetszőlegesen, kis idő- és energia befektetéssel módosíthatóak, hanem a végeredmény bármilyen méretben és formában jó minőségben áll a rendelkezésre. Töltőtoll vagy óriás plakát, a vektorgrafikaként tárolt logónak édes mindegy. Ha pedig kijönnek a hiper-szuper mega felbontású monitorok, és tízszeres felbontásra van szükség, akkor az is megoldható egyetlen plusz mentéssel.

Vektoros képformátumok

Az Adobe Illustrator legismertebb file-formátuma az .AI kiterjesztésű. Kevesen tudják, hogy ötféle módon is elmenthető egy grafika úgy, hogy minden Illustrator-nak szükséges adat megmarad: AI, PDF, EPS, FXG és SVG. Minden részletes információt megtudhatsz az Adobe hivatalos file-formátumairól a kézikönyvből.

SVG

Az SVG fájl formátum egy nemrégiben kifejlesztett vektorgrafikus kép formátum. XML alapú, statikus és animált elemeket, linkeket egyaránt tartalmazhat. Vektorgrafikus, bitmap és szöveges objektum típusokat is kezel. Az XML felépítésű leíró nyelv miatt kereshető, indexelhető, ami a böngészőknek fontos szempont.

Számtalan alkalmazás képes olvasni, pl. a legtöbb webböngésző, és az alábbi programok: Inkscape, SVGmaker, SVG Developer Center és természetesen az Adobe Illustrator.

EPS

Mivel az EPS fájlok PostScript nyelven alapulnak, vektoros és bittérképes (pixeles) grafikákat egyaránt tartalmazhatnak. Amennyiben a rajzelem több rajztáblát tartalmaz, ezeket a rajztáblákat a program csak akkor őrzi meg, ha a fájlt EPS formátumban menti.

Mikor melyik típusú képre és eszközre van szükséged?

Most már talán kellőképpen összezavarodtál, mégis, mikor, milyen formátumra, kép típusra és grafikai programra lesz szükséged? Összefoglaltam, melyik munkához, melyik eszközt szokták alkalmazni, de természetesen nagyok az egyéni eltérések. Többek között nagyon sok ingyenes képszerkesztő program is létezik, amelyek megpróbálják megközelíteni a "nagyok" funkcionalitását.

Hangulattábla egy kisvállalkozás arculattervéhez



Photoshop

  • Fotó manipuláció, kivágások, kör alakú kivágás, fekete-fehér hatások, vízjel, grunge hatások (kopottas, szaggatott képek), retus portréképeken, zavaró részletek eltüntetése

  • Mockup-ok, template-k a kész művek bemutatására (amikor egy póló elejére teheted a tervezett logódat, vagy egy laptop képernyőjére a tervezett weboldalt)

  • Drótvázak


Photoshop vagy Illustrator

  • Infografika, minden, ahol az illusztráció és a feliratok szoros összefüggésben vannak

  • Grafikus önéletrajz

  • Webdesign oldal tervek


Illustrator

  • művészi illusztrációk,

  • piktogramok, ikonok

  • logók, arculati elemek,

  • felhasználói felület részei,

  • sales grafika (pecsétek, garanciák, leértékelés címkék, stb.),

  • hátterek


Új hozzászólás

CAPTCHA
Bizonyítsd be, hogy nem vagy robot!
  _____   _   ____            _       _   _ 
|_ _| / | | ___| _ __ | |__ | | | |
| | | | |___ \ | '_ \ | '_ \ | | | |
| | | | ___) | | |_) | | | | | | |_| |
|_| |_| |____/ | .__/ |_| |_| \___/
|_|
Enter the code depicted in ASCII art style.

Kocsis Kata

programtervező matematikus, webdesign oktató
Kocsis Kata, programtervező matematikus, webdesign oktató

Életem legfantasztikusabb döntése volt a sok kompromisszummal terhelt alkalmazotti lét feladása. Nagyon büszke vagyok négy éve alapított saját cégünkre, ami az én szememben életforma, hivatás, közösség és gyönyörű célok együttese. A Kreatív Webdesign Tanfolyamok nem egyszerűen online tanfolyami termékek a számomra. A szaktudáson, a tapasztalaton túl olyan értékeket is szeretnék közvetíteni, amelyek a mai társadalomban hiánycikknek számítanak. A vizuális kultúra és igényesség fejlesztése, a művészet és az alkotás becsempészése a hétköznapokba, az együttműködésben rejlő erő megtapasztalása azoknak a hallgatóknak is nagyon sokat adhat, akikből végül nem is lesz webdesigner.

Melyik témák érdekelnek a legjobban?

* kötelező mezők



Ezek a témák érdekelnek

Go to top