Pixelgyar Képek, Grafiká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 oldalunkra
- 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
A színelmélet alapjai
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, Facebookra...
Sajnos azt kell mondjam, minden ilyen letöltéssel és újrapubliká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 felhaszná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. Amennyiben
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álható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

rendelkezik 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
felhaszná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ó

oldalakon tudod megvásárolni, pl. Creative Market.
Itt is vannak szintek, egy 1 dolláros képet nem használhatsz egy
tömegtermé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épmegosztó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

designer, szerkesztő vagy cégtulajdonos - főleg ő, hiszen üzleti felhasználásra
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
megtalá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álni,
másrészt pedig az embereknek elegük lett a műtermi, beállított, bárgyú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
modellé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
hajlamosabbak áldozni, mint a képekért.
Mára már legalább száz hasonló fotómegosztó oldal jött létre.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 7
Én egy .pdf-be összegyűjtöttem kicsit több, mint ötvenet, ezt innen

tudod letölteni - de mint a weboldalak általában, itt is lehet, hogy
mostanra 1-2 megszűnt, de a legjobbak még mindig benne vannak:
50+ ingyenes, legális fotólelőhely
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 8
MILYEN KÉPEKET ISMERÜNK?
A kép gyűjtőfogalom, egyaránt használjuk a fotókra, grafikákra,

festmé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,
amelyben 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
egyenesen arányos mind a pixel,mind a MB-ban (megabite), sőt GB-ban
(gigabite) 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 tartson
túl sokáig betöltenie a böngészőnek, de felismerhető, élvezhető maradjon.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 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ő informá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.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 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-kepmeret-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.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 11
Azt is vedd figyelembe, hogy ha egy képet újra, és újra megnyitsz, és

elmentesz .jpg-be, akkor újra és újra tömörítesz még rajta, tehát
fokozatosan 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 jobban
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.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 12
.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
internetezel. 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:
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 13
Ma az animált gif egy megállított idő. A kétes minőségű grafikákat

felváltottá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 mindenki 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 un. cinemagraph, amely egy videószerkeszté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.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 14
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
tanulmányozását - mindenki másnak - a vektoros rajzok egyenesekből,
görbékből, és az azokat összekötő pontokból állnak, ezeket nevezik Bazier
görbének.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 15
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égebbiek),
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 felhú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 elemekrem, elem
csoportokra 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.
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 16
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
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 17
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 élvezhetetlen.
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!
AAszínelmélet
Képek, alapjai
betűk, grafikák
tipográfia 18
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-weben/
Használd a megfelelő formátumot!
Egyszerű ábrákhoz jó lehet a .gif is, színes, részletgazdag képekhez magas

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

beazonosítani a várható tartalmat, sőt akár olvasás után visszatérve is
könnyebben 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!
SZERETNÉL TÖBBET
TANULNI?
Ha szeretnél többet megtudni a képekről, grafikákról, és a

designról, esetleg új karrier felé kacsintgatsz, nézz szét
weboldalunkon, ahol hasznos tartalmaink mellett
megtalálhatod képzéseinket is, amelyek segítségével
1 éven belül a magad ura lehetsz és elsajátíthatod
a webdesign csínját-bínját!
TOVÁBB A WEBOLDALRA!

Pixelgyar Képek, Grafiká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

Pixelgyar Képek, Grafikák

Uploaded by

Copyright:

Available Formats

ALAPOZÓ LECKÉK

Ha azt mondom képek, akkor 10-ből 9-en nyitják is a Google képkeresőjét és

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

A legjobb amit tehetsz, ha nem ismered egy kép forrását vagy

A szerzői jog a 1999. évi LXXVI. törvényben került rögzítésre, amely

Ezért letöltés vagy vásárlás esetén minden esetben kötelességed tájékozódni

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ó

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

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.

Én egy .pdf-be összegyűjtöttem kicsit több, mint ötvenet, ezt innen

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

MILYEN KÉPEKET ISMERÜNK?

A kép gyűjtőfogalom, egyaránt használjuk a fotókra, grafikákra,

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, .jpeg

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

Azt is vedd figyelembe, hogy ha egy képet újra, és újra megnyitsz, és

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

É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

Kifinomultabb változata, az un. cinemagraph, amely egy videószerkesztési

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 túl

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

Az egyik legfontosabb szempont a mai napig a fájlméret.

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 magas

Használj képeket bátran!

A képes tartalmakat többen nézik meg, a jól megválasztott kép segít

Ha szeretnél többet megtudni a képekről, grafikákról, és a

You might also like