OWT Képek Grafikák

alapozó leckék
KÉPEK,
GRAFIKÁK
FONTOS: Kérlek a letöltött leckék esetén figyelj arra, hogy ne sértsd meg a szerzői jogokat.
Bízom benne, hogy a munkámat megtiszteled azzal, ha másoknak nem küldöd el,
hanem az oldalukra - www.webdesigntanfolyam.com - irányítod őket!
Pixelgyár Kft. © 2017
Képek, grafikák 2
TARTALOMJEGYZÉK
KÉPET, DE HONNAN?..............................................................................3
SZERZŐI JOG.........................................................................................4
AKKOR HONNAN TÖLTSEK LE FOTÓKAT?...............................................6
MILYEN KÉPEKET ISMERÜNK?...............................................................8
Pixeles képek..................................................................................................8
Vektoros képek............................................................................................14
Akkor melyiket használjuk?.........................................................................15
KÉPEK A WEBRE...................................................................................17
Képek, grafikák 3
KÉPET, DE HONNAN?
Ha azt mondom képek, akkor 10-ből 9-en nyitják is a Google képkereső-
jét és töltik le, amit csak találnak. Megy a weboldalra, hírlevélbe, Face-
bookra... Sajnos azt kell mondjam, minden ilyen letöltéssel és újrapub-
likálással szerzői jogsértést követnek el. Ez addig nem probléma, amíg
nem érkezik egy kellemetlen hangvételű levél és egy vaskos számla a fel-
használási díjat illetően.
A KÉP AZ KÉP.
Abban az esetben, ha otthon kiteszed a falra akkor igen, vagyis saját, privát
felhasználásra töltöd le, ez esetben sokkal megengedőbb a jog. Ameny-
nyiben azonban a weboldaladon használod fel, azaz üzleti célokra, akkor
a kép az termék, áru, méghozzá másé.
A képeket, fotókat, grafikákat, illusztrációkat, ikonokat stb. valakik készí-

tik ugyanúgy, mint bármely más terméket, és a szerző jogán megilleti őket
a döntés, hogy hol, hogyan és mennyiért használják az általuk készített
alkotást.
Sokféle felhasználási joggal el lehet látni egy képet vagy fotót, van aki
ingyenesen letölthetővé teszi és bárki felhasználhatja, mások bizonyos
összegekért vagy egyáltalán nem engedélyezik azt, hogy valaki használja
az alkotásaikat.
Az alkotás jelen esetben nem művészi értékét jelenti, hanem a készítés

jogát (amennyiben nem sérti eleve más szerzői jogait).
Képek, grafikák 4
A Google keresőjében olyan képeket hoz fel, amelyek más weboldalak

részei, tartalmai, tehát elméletileg nekik van rá felhasználási joguk, neked
nem, azaz saját maga készítette, vagy esetleg megvásárolta. Akkor sem,
ha ők is bizonytalan forrásból használták fel, mert ez nem mentesít téged
sem.
A legjobb amit tehetsz, ha nem ismered egy kép forrását vagy felhasznál-
hatóságát, akkor nem használod.
SZERZŐI JOG
A szerzői jog a 1999. évi LXXVI. törvényben került rögzítésre, amely ren-
delkezik arról, hogy mi esik jogvédelem alá és mi nem - egy ötletet például
Magyarországon nem lehet ilyen módon megvédeni. A szerzői jogról
bővebben a Szellemi Tulajdon Nemzeti Hivatala ad tájékoztatást.
Fontos tudni, hogy a szerzői jogokról nem lehet lemondani! Amikor egy
szerzői jogvédett grafikát, fotót vagy webdesignt vásárolsz, akkor a fel-
használási vagy a vagyoni jogait veszed meg, a szerző továbbiakban is
rendelkezhet olyan jogokról, amelyekre a felhasználásod nem tért ki.
Ezért letöltés vagy vásárlás esetén minden esetben kötelességed tá-

jékozódni arról, hogy milyen jogok illetnek meg és milyen kötelességeid
lehetnek, pl. a szerző nevének vagy weboldalának feltüntetése.
Képek, grafikák 5
Képek esetén 3 fő felhasználási módot különböztetünk meg:
FIZETŐS - bármilyen felhasználásra, ezeket jobbára az ún. stock fotó ol-

dalakon tudod megvásárolni, pl. Creative Market.
Itt is vannak szintek, egy 1 dolláros képet nem használhatsz egy tömegter-
méken, arra általában külön licenszet kell vásárolni.
Ide tartoznak az olyan jogvédett, de megvehető képek is, mint a sztárok
fotói vagy Hello Kitty.
INGYENES - magán- és üzleti célra is, pl. a Pixabay oldalon rengeteg ilyen
képet találsz - ide tartoznak általában a Creative Commons licence alatt
futó képek is, de ezek is igen változatosak. Jóval tágabb felhasználási
formákat hoztak létre az erősen különböző jogvédett tartalmak jelölésére.
A jelrendszer ma már nemzetközileg teljesen elfogadott és érthető.
Tanulmányozd a Creative Commons licence-t, mert pl. a Flickr képmeg-

osztón csodálatos, kreatív fotókat találsz felhasználható megjelöléssel.
INGYENES - csak magáncélra ingyenes, üzleti célra meg kell vásárolni,

hobbifotósok oldalain találsz ilyeneket.
Képek, grafikák 6
AKKOR HONNAN TÖLTSEK LE FOTÓKAT?
Ez állandó problémája az online dolgozó, publikáló embernek, legyen az de-

signer, szerkesztő vagy cégtulajdonos - főleg ő, hiszen üzleti felhasználás-
ra kemény fotóárakat találni a hagyományos stockfotó oldalakon, amit
egy kisvállalkozás sajnos nem mindig engedhet meg.
Ugyanis eddig jobbára két út volt:

1. nekiülni a Google képkeresőnek és vinni amit találunk (sic! lásd fenn,
hogy ez miért nem jó megoldás)
vagy
2. venni a stock fotó oldalakon.
Az egyik lopás, a másik drága, ráadásul a képkeresgélés egy borzalmasan
időrabló tevékenység, hosszú órákat el lehet tölteni a megfelelő kép meg-
találásával. Aztán 1-2 éve elindult a fotópiac átalakulása, jobbára azért,
mert minden stock oldalon ugyanazokat a fotókat lehetett már megtalál-
ni, másrészt pedig az embereknek elegük lett a műtermi, beállított, bár-
gyún mosolygó családokból és a mobil fotózásnak köszönhetőek inkább
az életszagú, nem tökéletes képeket kezdték hitelesebbnek gondolni.
Mint a közösségi történetekben, itt is jól látható, hogy az ingyenes alapra

kezdenek plusz szolgáltatások ráépülni, már csak a különböző üzleti mo-
dellért is érdemes megnézegetni ezeket az oldalakat. Ugyanis nem a
fotóért kérnek pénzt, hanem a kényelemért és azért az emberek hajlamo-
sabbak áldozni, mint a képekért.
Mára már legalább száz hasonló fotómegosztó oldal jött létre.
Képek, grafikák 7
Én egy .pdf-be nemrég összegyűjtöttem kicsit több, mint ötvenet, ezt in-
nen tudod letölteni - de mint a weboldalak általában, itt is lehet, hogy mos-
tanra 1-2 megszűnt, de a legjobbak még mindig benne vannak:
50+ ingyenes, legális fotólelőhely
Képek, grafikák 8
MILYEN KÉPEKET ISMERÜNK?

A kép gyűjtőfogalom, egyaránt használjuk a fotókra, grafikákra, fest-
ményekre. Itt a tanfolyamon kétféle képtípust különböztetünk meg - az
egyik a pixelekből álló bittérképes, vagy másnéven raszteres forma, amely-
ben a kép részletei ezekből a pixelkockákból épülnek fel.
Ezek nagyrészt fényképek, ahol a méret a lényeg. Vagyis a minőség egye-
nesen arányos mind a pixel,mind a MB-ban (megabite), sőt GB-ban (giga-
bite) mérhető fájlmérettel. Egy a fényképezőgépből nyersen kikerülő fotó
több GB is lehet, ezeket webre kerülés előtt mindenképpen optimalizálni
szükséges.
Lehetnek azonban olyan grafikák is, amelyek képszerkesztő programban
készülnek, mint a Photoshop. Ezek szintén pixelgrafikusak.
Különböző raszteres fájlformátumok pl. .bmp, .gif, .png, .jpg, .ico
A nyers kép, amiből a fotósok dolgoznak és nincs tömörítve pedig .raw
formátumot visel.
Pixeles képek
Ebből a weben manapság a .png és a .jpg formával fogsz leginkább

találkozni.
Az, hogy egy képet milyen formátumban mentünk el, leginkább a későbbi
felhasználás vélhető módjától függ. Egy fényképezőgépről bevitt képet,
amennyiben nyomdai, vagy fotókidolgozásra szánjuk, igyekszünk eredeti
formájában megtartani, azaz minél kevesebb részletet elveszíteni.
Ha azonban az internetre szánjuk, elsősorban a fájlméret dominál, ne tart-
son túl sokáig betöltenie a böngészőnek, de felismerhető, élvezhető ma-
radjon.
Képek, grafikák 9
.jpg
A .jpg formátummal találkozhatsz a legtöbbet - főként fotóknál. A .jpg,

.jpeg egy ún. veszteségesen tömörített képformátum.
Azaz a tömörítés mértékével csökken a fájlméret, de a képen lévő in-
formáció is, ilyenkor lesz pixeles a kép. Ilyennel bizonyára találkoztál már,
ha esetleg az internetről levadászott képet próbáltad kinyomtatni valami
emberi méretben.
Képek, grafikák 10
Az eredeti 5 MB-os kép (amit a netről szedtem, tehát már tömörített) - 60

quality, vagyis 60%-os tömörítés mellett már csak 146 Kb, és még egészen
jó képminőséget ad vissza.
A 30%-os már itt-ott foltos, az 5%-os pedig nagyon pixeles, és teljesen
eltűntek olyan részletgazdag területek, mint a szirmok. Ez változó, minél
több részletet tartalmaz egy kép, annál zizisebb lesz a tömörítéssel.
Olvasnivaló: https://webdesigntanfolyam.com/mekkora-a-megfelelo-kep-
meret-a-weben/
Ha körvonalas képet, apró részleteket akarsz megmutatni, és mindezt kis

méretben, akkor nem a legjobb választás - a jobb szélén már erőteljesen
izzad a maci, azaz szöszösek lesznek a vonalai, töredezettek a színei,
színátmenetei, fura aurás lesz a tekintete.
Azt is vedd figyelembe, hogy ha egy képet újra, és újra megnyitsz, és el-
mentesz .jpg-be, akkor újra és újra tömörítesz még rajta, tehát fokoza-
tosan romlik a minősége.
Klasszikus példa a Facebook, ahová ha feltöltesz egy .jpg képet bizony

gyakran iszonyatosan eltorzítja. Nem hiába, az emberek naponta milliónyi
képet töltenek fel, szükség van tömörítésre. Ha szeretnéd, hogy kicsit job-
ban megőrizze a formáját, akkor .png képet töltesz fel, amely nálad még
nem tömörített, így egy újratömörítéstől nem lesz olyan gyalázatos.
.png
Pár éve lett népszerű ez a formátum. Előtte kevésbé használták, mert a

.png képek veszteségmentes tömörítéssel dolgoznak, azaz nem rontják a
képminőséget, ezért cserében nem is túl karcsúak fájlméretben.
24 bit színmélységű (16,7 millió szín), azaz rendkívül részletgazdag - van
8 bitesmentésre is lehetőség. A .png kifejezetten képernyőre tervezett
képformátum, így a nyomdai CYMK színmódot nem támogatja. Ellenben
támogatja az átlátszó hátteret, így termékfotókhoz a legideálisabb menté-
si forma.
.gif
Kihaló félben lévő formátum - már nincs szükség arra a fájlméret/sávszé-

lesség spórolásra, amiért annyira kedvelt volt eredetileg.
Ha nem emlékszel ezekre vagy nagyon fiatal vagy, vagy nem régóta in-
ternetezel. Mindenesetre egy remek múzeumi sétát ajánlok a .gif-ek
birodalmába https://www.amazing-animations.com
És a .gif, ahogy ma ismerjük:
Ma az animált gif egy megállított idő. A kétes minőségű grafikákat felvál-

tották a brutális megapixelek, a HD minőségű videóból kivett képkockák.
A technológia fejlődésével a vizuális kommunikáció is fejlődött, és minden-
ki kezében ott az eszköz az ilyen megoldások megvalósítására, munkára
vagy szórakozásként.
Kifinomultabb változata, az ún. cinemagraph, amely egy videószerkesz-

tési eljárással csak bizonyos mozdulatokat ismétel a képen, maga a kép
állókép.
Ezek nagyon jó minőségű videóanyagokból készülnek, így a végleges

méretük is általában több MB.
Nézegess hasonlóakat itt: https://flixel.com/cinemagraphs/fresh/

Illetve több helyen meg is vásárolhatod őket egy-egy kampányhoz, bár
elég borsos az áruk: https://www.gallereplay.com/
Találsz alkalmazásokat, amelyekkel magad is elkészítheted őket, ilyen a
https://flixel.com
vagy mobilra is több megoldást találhatsz: https://www.hongkiat.com/
blog/cinemagraph-iphone-android-apps/
Vektoros képek
Mi az a vektor? Egy függvény. Vagyis a képinformációk ez esetben nem

adatként a pixelekben tárolódnak, hanem egy matematikai képlet írja le
őket. Bonyi? Az.
Matematikai érdeklődésűeknek ajánlom a technológia részletes tanul-
mányozását - mindenki másnak - a vektoros rajzok egyenesekből, gör-
békből, és az azokat összekötő pontokból állnak, ezeket nevezik Bézier
görbének.
Vektoros fájlformátumok: .ai (Illustrator), .eps, .pdf-ben is lehet menteni,

valamint .svg (ez egy kód gyakorlatilag, a webdesignban fontos szerepe
van), .cdr (CorelDraw - manapság már csak nyomdák használják, a régeb-
biek),
De vektorosan tárolódnak egyes betűtípusok is, .otf (Opentype)
Akkor melyiket használjuk?
Mikor melyiket - a pixeles, vagy raszteres képek minősége a nagyítással

romlik, míg egy vektoros kép korlátlanul nagyítható - pl. logóknál nagyon
fontos, hogy egy 5x9 cm-s névjegykártyán, és egy 15 emeletes házra fel-
húzott molinón is megfelelő minőségű legyen.
A pixeles képhez viszonyítva a vektoros fájlméret elenyésző, viszont ha

túl sok pontból áll, a kirajzolás a processzort, memóriát terheli nagyon.
A pixeles fájlméret függ a színmélységtől, beágyazott színprofiloktól,

tömörítési módtól, a vektoros esetén ezek nem befolyásolják a méretet. A
pixeles kép egységes egész, míg a vektorgrafika elemekre, elem csopor-
tokra bontható pl. egy összetett grafika minden eleme külön mozgatható.
A vektoros képből bármikor készíthetsz pixeleset, azonban a pixelesől

vektorosat csak nehézkesen vagy egyáltalán nem.
Az egyszerű rajzok, vonalas ábrák könnyebben vektorizálhatóak - un. trace
átalakítással, de fotókat, részletes képeket nem lehet így jól átültetni, csak
átrajzolni. Ez minden esetben a kép részletességétől függő dolog, nem
nagyon van rá egy gombnyomásos megoldás, illetve sok-sok utómunka
van vele, mire azért realista lesz és nem csak egy maszat.
Ezen a kis videón láthatod, hogy a felismerhetőséghez még azért kell

dolgozni rajta - https://www.youtube.com/watch?v=vqGiapzL3gY
KÉPEK A WEBRE
Az egyik legfontosabb szempont a mai napig a fájlméret.
Nem csak nem “illik” óriási, több megás képeket letöltetni senkivel, aki
nem akarja - azért a 4G határai még mindig megvannak - hanem nincs is
semmi értelme, egy akkora kép böngészőben kezelhetetlen és élvezhe-
tetlen.
Mennyi ideig töltötted ezt a képet? http://farm3.static.flickr.
com/2401/2045014005_dd60043073_o.jpg
Vigyázat 4,9 MB, és 9600x7200!!
Ha ilyen brutálnagy fájlra hivatkozol, mindig jelezd! A fényképezőgépek
ma már akár 20 MB képeket is készítenek, de soha ne töltsd fel ezeket a
weboldaladra nyersen!
Manapság ezt úgy oldjuk meg igazán jól, hogy a felhasználó által használt
eszközhöz előkészített, másnéven optimalizált képet jelenítjük meg neki.
Aki mobilon böngészik, az egy kisebb, butított képet kap, aki pedig egy
hatalmas retina kijelzős monitoron vagy 4K tévén internetezik, nos neki
igyekszünk a legjobb képminőséget adni, hiszen feltételezzük, hogy azért
vette az eszközt, mert erre igénye van és nem egy 4GB mobilnettel nyomja.
A képek optimalizálásáról a blogon ebben a cikkben írok bővebben:

https://webdesigntanfolyam.com/mekkora-a-megfelelo-kepmeret-a-we-
ben/
Használd a megfelelő formátumot!
Egyszerű ábrákhoz jó lehet a .gif is, színes, részletgazdag képekhez ma-

gas minőségű .jpg, vagy .png
Állítsd mérlegre a kis fájlméretet, és az elvárt képminőséget, és válaszd az
ahhoz leginkább passzoló formát!
Használj képeket bátran!
A képes tartalmakat többen nézik meg, a jól megválasztott kép segít bea-
zonosítani a várható tartalmat, sőt akár olvasás után visszatérve is köny-
nyebben rátalálnak, ha a címre nem is emlékeznek.
A képek érdekesek, tartalmasak - de csak kiváló minőségű fotóanyaggal
dolgozz - egy jobb mobiltelefon is képes jó képet csinálni, a képminőség
az egy dolog, a képalkotás meg a másik!

OWT Képek Grafikák

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

OWT Képek Grafikák

Uploaded by

Copyright:

Available Formats

alapozó leckék

A képeket, fotókat, grafikákat, illusztrációkat, ikonokat stb. valakik készí-

Az alkotás jelen esetben nem művészi értékét jelenti, hanem a készítés

A Google keresőjében olyan képeket hoz fel, amelyek más weboldalak

Ezért letöltés vagy vásárlás esetén minden esetben kötelességed tá-

Képek esetén 3 fő felhasználási módot különböztetünk meg:

FIZETŐS - bármilyen felhasználásra, ezeket jobbára az ún. stock fotó ol-

Tanulmányozd a Creative Commons licence-t, mert pl. a Flickr képmeg-

INGYENES - csak magáncélra ingyenes, üzleti célra meg kell vásárolni,

AKKOR HONNAN TÖLTSEK LE FOTÓKAT?

Ez állandó problémája az online dolgozó, publikáló embernek, legyen az de-

Ugyanis eddig jobbára két út volt:

Mint a közösségi történetekben, itt is jól látható, hogy az ingyenes alapra

Mára már legalább száz hasonló fotómegosztó oldal jött létre.

50+ ingyenes, legális fotólelőhely

MILYEN KÉPEKET ISMERÜNK?

Ebből a weben manapság a .png és a .jpg formával fogsz leginkább

A .jpg formátummal találkozhatsz a legtöbbet - főként fotóknál. A .jpg,

Az eredeti 5 MB-os kép (amit a netről szedtem, tehát már tömörített) - 60

Ha körvonalas képet, apró részleteket akarsz megmutatni, és mindezt kis

Klasszikus példa a Facebook, ahová ha feltöltesz egy .jpg képet bizony

Pár éve lett népszerű ez a formátum. Előtte kevésbé használták, mert a

Kihaló félben lévő formátum - már nincs szükség arra a fájlméret/sávszé-

És a .gif, ahogy ma ismerjük:

Ma az animált gif egy megállított idő. A kétes minőségű grafikákat felvál-

Kifinomultabb változata, az ún. cinemagraph, amely egy videószerkesz-

Ezek nagyon jó minőségű videóanyagokból készülnek, így a végleges

Nézegess hasonlóakat itt: https://flixel.com/cinemagraphs/fresh/

Mi az a vektor? Egy függvény. Vagyis a képinformációk ez esetben nem

Vektoros fájlformátumok: .ai (Illustrator), .eps, .pdf-ben is lehet menteni,

Akkor melyiket használjuk?

Mikor melyiket - a pixeles, vagy raszteres képek minősége a nagyítással

A pixeles képhez viszonyítva a vektoros fájlméret elenyésző, viszont ha

A pixeles fájlméret függ a színmélységtől, beágyazott színprofiloktól,

A vektoros képből bármikor készíthetsz pixeleset, azonban a pixelesől

Ezen a kis videón láthatod, hogy a felismerhetőséghez még azért kell

A képek optimalizálásáról a blogon ebben a cikkben írok bővebben:

Használd a megfelelő formátumot!

Egyszerű ábrákhoz jó lehet a .gif is, színes, részletgazdag képekhez ma-

Használj képeket bátran!

You might also like