SlideShare una empresa de Scribd logo
1 de 21
Descargar para leer sin conexión
Pixelgyár Kft. 2012 - Minden jog fenntartva!
ingyenes alapozó leckék
Pixelgyár Kft. 2012 - Minden jog fenntartva!
ingyenes alapozó leckék 3. rész
Képek
használata
www.webdesigntanfolyam.com
“Egy fényképet nézni és látni két külön
dolog. (...)
Fényképet nézni bárki tud, de egy fény-
képet látni azt jelenti, hogy az ember
olvasni tud a képről.
Egyfelől adottak az emberek a maguk
kulturális vívmányaival, másfelől pedig
a természet. A fák, a tavak, a felhős
ég a fényképeken általános, mindenki
számára érthető nyelven beszélnek.
Valamiféle időtlen nyelven, ha szabad
így mondani. Az emberek, az építmé-
nyek, az utak és a kávésdobozok ellen-
ben csak egy adott kontextusban, az
adott időben olvashatók.”
Bernlef
www.webdesigntanfolyam.com
Képtípusok
A kép az kép. Vagy mégsem?
étféle képtípust különböztetünk meg - az egyik a pixelekből álló bittérképes, vagy másnéven rasz-
teres 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 mérhető fájlmérettel. Lehetnek azonban olyan grafikák is, amelyek képszerkesztő
programban készülnek, mint a Photoshop.
Különböző raszteres fájlformátumok
pl. .BMP, .GIF, .PNG, .JPG, .ICO
K
Bittérképes, pixeles képek
Az, hogy egy képet milyen formátumban men-
tü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án-
juk, 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.
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.
www.webdesigntanfolyam.com
A képen látható, hogy az eredeti 2,76 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 130,5 Kb, és
még egészen jó képminőséget ad vissza.
A 30%-os már itt-ott foltos, az 1%-os pedig nagyon
pixeles, és teljesen eltüntek olyan részletgazdag terül-
etek, mint a szirmok.
Ha körvonalas képet, apró részleteket akarsz
megmutatni, és mindezt kis méretben, akkor
nem a legjobb választás - az alsó két képen már
erőteljesen izzad a maci.
Azt is vedd figyelembe, hogy ha egy képet újra, és
újra megnyitsz, és elmentesz .jpg-be, akkor újra és
újra tömörítessz még rajta, tehát fokozatosan rom-
lik a minősége.
www.webdesigntanfolyam.com
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, a .jpg-hez képest - veszteség-
mentesen tömörít.
8 bit színmélységű (256 színű), tehát nem túl
részletgazdag, viszont mivel nem tömöríti agyon
az adatokat, egyszerű vonalas ábrák, finom árnya-
latok, árnyékok nélküli színezésekkel megoldott
grafikákhoz most is tökéletes. Az ún. clipartok ide-
jén volt népszerű.
Az idegesítő animgifeket mindenki ismeri, még ha
nem is tud róla.
Pörgő postaláda, villogó email, és csillogó Hello
Kitty az internet hőskorszakát idézik vissza.
Ez itt a múlt
a GIF ma
“az animgif maga a tökéletes platformközi
médiaformátum.”
hirbehozó/Webisztán
Ma az animgif egy megállított idő. A kétes
minőségű grafikákat felváltották a brutális mega-
pixelek, a HD minőségű videóból kivett képkockák.
A technológia fejlődésével a vizuális kommu-
nikáció is fejlődött, és mindenki kezében ott az
eszköz az ilyen szép megoldások megvalósítására,
munkára vagy szórakozásként.
Pár link animgifekkel:
iPad felhasználók
Cuki fiúk és az epersör
Hogyan készíts Te is?
www.webdesigntanfolyam.com
PNG
Pár éve lett népszerű ez a formátum.
Előtte kevésbé használták mert az IE6 verzió nem
támogatta az átlátszó hátterű .png képeket.
Egyébként a .gif-nek meg lejárt licence. Merthogy
ilyet is lehet.
Már a .gif-eknél is volt átlátszó háttér, de maga
az objektum széle “szakszóval: rohadt”, azaz nem
simult a környezetébe.
24 bit színmélységű (16,7 millió szín),
azaz rendkívül részletgazdag - van 8 bites
mentésre is lehetőség. A .png kifejezetten
képernyőre tervezett képformátum, így
a nyomdai CYMK színmódot nem támo-
gatja.
Webdesign tervezés során ikonok,
ikonkészletek, és részletgazdag fotók
feldolgozásakor találkozunk vele, illetve
jó alternatíva magára a webtervezésre is,
mert a Photoshopban keletkező tervek
mérete sokszor annyira gigászi, hogy
kezelhetetlenek, míg a .png-vel dolgozó
Fireworks negyedakkora fájlméretet
eredményez.
Webdesign során ezt a három pixeles fájl-
formátumot alkalmazzuk leggyakrabban.
Kétféle képtípusról beszéltem, de ez csak
egy volt. Jöjjenek a vektorok!
Vektoros képek, vektorgrafika
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.
www.webdesigntanfolyam.com
Ez az általam rajzolt vektor lányka ennyi pontból és görbéből áll - valaha pedig egy papír szélén, egy
odavetett firkaként született, egy zsiráf társaságában.
A vektorgrafikákat elsősorban a rajzoló programokban készítik - Adobe Illustrator, Inkscape stb.
Vektoros fájlformátumok:
.AI (Illustrator), .EPS, .PDF-ben is lehet menteni, valamint egyes .PNG formákban, .CDR (CorelDraw),
.SVG
Vektorgrafikákkal dolgozik a Flash is, valamint vektorosak az előző anyagban tárgyalt Opentype
betűtípsuok is.
Pixel vs Vektor
A pixeles, vagy raszteres képek minősége a nagyítással romlik, míg egy vektoros kép korlátlanul nagyít-
ható - 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 es-
eté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.
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ő.
www.webdesigntanfolyam.com
Képek a webre
Az egyik legfontosabb szempont a mai napig a fájl-
méret.
Nem csak nem “illik” óriási, több megás képeket letöltetni senkivel, aki nem akarja - sávszélesség... ha-
nem nincs is semmi értelme, egy akkora kép böngészőben kezelhetetlen és élvezhetetlen. Ily módon
vagy a méretét csökkentjük pixelben - 1600x1200 helyett 800x600, vagy a tömörítését 70%-os .jpg, vagy
mindkettőt.
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!
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ó for-
mát!
A webre szánt képeket ments a webre!
A fotószerkesztőkben pl. Photoshop van egy ilyen funkció - Save as Web. Ez megfelelően optimalizálja a
tömörítési, és színkezelési beállításokat, kifejezetten az interneten való megjelenésre, de találunk módot
ezek finomítására is!
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 - ha csak nem dokumen-
tálsz - eseményekről a mobilos fotó is megfelelő, a lényeg ott is, hogy legyen!
www.webdesigntanfolyam.com
Képet, de honnan?
A legkézenfekvőbb megoldásnak a Google
képkeresője tűnik, de ez egyben a legrosszabb is.
A képeket, fotókat, grafikákat, illusztrációkat, ikonokat
stb. valakik készítik, é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.
Az alkotás jelen esetben nem művészi értékkel bíró
képeket jelent, hanem bármilyen képet, amelyet
készítettél, és az nem sérti esetleg már önmagában
más szerzők jogait.
A Google képkeresőjében a legtöbb kép viszont ilyen
jogvédelem alatt áll, hiszen azt már valamilyen oldal
felhasználta, vagy saját maga készítette, vagy esetleg
megvásárolta.
Még akkor sem használható, ha egyébként ingyenes
kép, ha nem ismered az eredeti forrást.
Más dolog a letölthető, és más a felhasználható kép.
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 nem lehet ilyen módon megvédeni.
http://www.artisjus.hu/opencms/export/download/aszerzoijogrol/szerzoi_jogi_torveny.pdf
Fontos tudni, hogy a szerzői jogokról nem lehet lemondani!
Átruházhatóak a műhöz kapcsolódó vagyoni jogok - ezt teszed, amikor a szerződés tárgyát, jelen es-
etben egy grafikát, logót, vagy webdesignt átadsz a megrendelőnek, vagy vásárolsz megrendelőként
- azonban a készítés jogáról, és a készítő feltüntetésének jogáról nem lehet lemondani.
Ha egy logót tervezel például, és a felhasználási körökben nem szerepel mondjuk a lokalizálás más
nyelvekre, akkor elvileg az engedélyed nélkül ez nem lehetséges, és további szerzői jogdíjat kellene
kapnod.
Ugyanígy nem lehet átdolgozni sem - egy ilyen eset a Homáron kötött ki pár éve -
http://homar.blog.hu/2007/06/15/logolopassal_nyitott_az_anyucika
Tanulságos!
www.webdesigntanfolyam.com
Képkeresők
A Flickr-en kívül több száz képkereső, képmegosztó létezik,
ahonnan szabadon, vagy a fenti korlátozásokkal letölthetsz
képeket, grafikákat. Minden esetben olvasd el az oldal felté-
teleit, vagy a fotó melletti leírást, mert rendkívül változatosak
Csak néhány:
http://sxc.hu
(magyar fejlesztés, kb. 350.000 képből válogathatsz)
http://www.morguefile.com
http://www.freedigitalphotos.net
http://www.stockvault.net
http://www.freephotosbank.com
http://www.everystockphoto.com
http://www.woophy.com
http://finallycreative.com/gallery/
http://www.deviantart.com
http://www.vecteezy.com
http://www.brusheezy.com
http://openphoto.net
http://www.photorogue.com
http://freerangestock.com
www.webdesigntanfolyam.com
Creative Commons
Ezzel párhuzamosan létezik egy másik, a szerzői jog alá eső művek felhasználására létrehozott
szervezet, és megjelölés - ez a Creative Commons.
Jóval tágabb felhasználási formákat, változatos licenceket hoztak létre az erősen különböző jogvédett
tartalomak jelölésére. A jelrendszer ma már nemzetközileg teljesen elfogadott, és érthető - Ne add el!
Nevezd meg! vagy Ne változtasd!
http://hu.wikipedia.org/wiki/Creative_Commons
Visszatérve a képekre - azon képek felhasználása ahol “All rights reserved” “Copyright” vagy ehhez
hasonló feliratok vannak, csak a szerző engedélyével használhatóak fel.
Ha nagyon ragaszkodsz egy képhez, és utolérhető a szerző, egyébként lehet, hogy hozzájárul, ha meg-
mondod hol szeretnéd használni a képet!
Nekem pár hónapja írt egy hölgy, szeretné ezeket a rozsdás képeim
felhasználni verseskötetek illusztrálására. Egy jelképes tiszteletdíjat
is felajánlott - 50 EUR, amelyet néhány nap múlva meg is kaptam.
Tanulmányozd a Creative Com-
mons licenszet, mert pl. a Flickr
képmegosztón csodálatos, kreatív
fotókat találsz felhasználható
megjelöléssel.
http://www.flickr.com/crea-
tivecommons/
A Flickr-hez nagyon sok alkalmazás
létezik, itt találsz párat leírással:
http://spottr.hu/2009/01/28/ker-
essunk-a-flickren-maskepp/
http://www.airtightinteractive.
com/projects/related_tag_brows-
er/app/
www.webdesigntanfolyam.com
Képvásárlás
A stock fotók előregyártott képek, amelyekre komoly iparág épült. Ezeket a képeket nem csak web-
szájtokon, hanem reklámokban, újságokban, plakátokon, csomagolásokon és még milliónyi helyen fel-
használják a világ minden táján.
Nem csak fotók, hanem videók, animációk, hanganyagok és vektoros grafikák, instant arculati elemek is
megvásárolhatóak.
http://www.pixmac.hu
http://www.dreamstime.com/res2124307-free-photos
http://www.istockphoto.com
A legismertebb kép piac. Nem olcsó - ha gyorsan kell, jó minőségű illusztráció minden pénzt megér, ha
nem kell 2 napig keresgélned egy képet!
Ne felejtsd el, az idő pénz! Én a képek 80%-át innen veszem, vagy hasonló oldalakról, mint a Crestock,
vagy a Veer.
www.webdesigntanfolyam.com
Krediteket tudsz vásárolni - egy kép 1-7 kredit általában,
webes méretben, felhasználásra.
1 kredit 1 dollár körül van, ami most 200 Ft, szóval azért
nem vág a földhöz, és jogtiszta képed van az adott munkára.
Fontos! A Royalty Free képek azt jelentik, hogy a felhaszná-
lási jogot egy adott munkára vásárolod meg. Ha szeretnéd
a képet máshol is felhasználni, arra is van mód a megfelelő
összeget kiperkálva.
Ha az istock-on vásárolsz kreditet, mindig nézz körül előbb a
weben, hátha találsz használható kupon kódot, amivel több
kreditet kapsz, vagy kevesebbet kell fizetned a vásárláskor.
Keresési kulcszó: istock coupon code, vagy istock photo cred-
it code, és hogy friss találatot kapj mellé írhatod az aktuális
évet, hónapot
pl. istock coupon code 2012 march
TIPP!
Képmutatónak tűnne, ha azt mondanám, hogy én mindig betartom a szabályokat.
Képmutató... képzavar.
Nagyon nem szeretem a szabályokat, de alkotóként tisztelem annyira a másik
munkáját, hogy hivatkozom, megne-vezem a forrást. Már ha nem felejtem el...
Sajnos dvd-számra állnak az évek során összegyűjtött képeim, amiket ezért nem
tudok használni, ezért ha nem mented el mellé, hogy honnan, mikor szerezted be,
mehet is a Lomtár ikonnal jelzett kis mappába, vagy a kukába.
Miután már idehaza is van irodája a nagyobb képügynökségeknek, ahol
azért fizetik Micikét, hogy a jogtalanul használt képekre vadásszon, könnyen
járhatsz úgy, hogy kapsz a postán egy szép printscreent, és egy vastag számlát,
visszamenőlegesen is.
Ha az oldal tulajdonosa nem egyértelmű, a domain tulajdonosa viszont nyilvános,
akkor az perkál, mondjuk Te a grafikusod képlopása okán - így fizettem én pár éve
3 db 180x120 képért kb. 60e Ft-ot.
Minden esetben figyelj oda, milyen forrásból származik a felhasználandó kép, és
nem sérted-e a szerző jogait!
Más a magáncélú, és más a kereskedelmi célú felhasználás.
Indulhat a képkeresés!
Összegzés
www.webdesigntanfolyam.com
Feladatok
Ne csak olvasd! Csináld!
Amit a múlthéten kaptál feladatot - arculat színe és hozzá való betűtípus - most tovább
fejlesztjük. Igen, kitaláltad, képekkel fogod kiegészíteni!
A végeredményt úgy hívják - moodboard, vagyis hangulat tábla - de még nem értünk el a
végére...
Gyakorlatilag egy kollázs. Ha kapsz egy új kreatív feladatot, örvényleni kezdenek benned az ötletek,
színek, hangulatok. Ez az a fázis, amikor valamiféle varázslat kezdődik benned. A teremtés
energiái járják be a tested a fejed búbjától, a lábad ujjáig. Az ilyenkor felszabaduló energiák
miatt csináljuk az egészet! Érzed már a bizsergést (vagyis a vágyat, hogy ezt érezd?)
A moodbooard egy munkafázis.
Segít rendezni a gondolatokat, kibogozni a szálakat, kialakítani egy irányt, és további
inspirációkat ad! A marketing egyik alaptétele, hogy nem terméket, vagy szolgáltatást adunk el, hanem
érzéseket, hangulatokat! Ezt kell leképezni, kifejezni színekkel, tipográfiával és képekkel - egyelőre...
A hangulattábla nem csak téged segít, hogy csapást vágj ebben a dzsungelben, hanem
magaddal viheted az ügyfeled, munkatársaid, grafikusod, fejlesztőd! A tábla segítségével alátámaszt-
hatod a koncepciód, vagy akár tesztelhetsz több irányvonalat anélkül, hogy feleslegesen kellene dol-
goznod. Ehhez hasonló inspirációs táblákat rengeteg kreatív szakmában használnak a divattervezéstől
a lakberendezésig - és sokszor ezek a rokon területek is rengeteg ötletet adnak.
Mi az a moodboard?
www.webdesigntanfolyam.com
Valaki mond egy szót, és te mondasz egy másikat, ami erről eszedbe jut!
A moodboard elkészítéséhez pont ugyanezt kell tenned - a meglévő információk alapján
- nyilván minél több van, annál nagyobb a mozgástered - össze kell szedned a szétszórt
téglákat, amiből a várat feltudod építeni.
Játszottál már valamilyen asszociációs játékot?
“Egy drága francia étterem - “Le gourmandise” a neve”
Ebben a rövid, egy soros leírásban is több információ rejlik, mint gondolod.
francia, drága, étterem - ha még nem jártál ilyenben, akkor is felrémlenek a különböző filmekből, műsorokból a
mikro adagok, furcsa nevű, és még furcsább hozzávalókból készülő ínyencségek. Mert a “gourmandise” szó
ínyencséget jelent, a “Le gourmandise” kifejezés viszont falánkságot, és kapzsiságot is. A francia konyha híres, és
puccos - Champaigne, Bordeaux, Béchamel, Croissants, Bor, mámor, Provance.. ami eszedbe jut, mind
leírhatod. Gazdagság - arany, ezüst étkészlet, kristálypohár, damaszt terítő - A damasztvászon szövése a
lentermelő országokban terjedt el - például Franciaországban a XIII. század közepe táján. (Terebess Lexikon)
Ha több infód van, mondjuk, hogy mennyire drága a drága, klasszikus, vagy éppen ellenkezőleg nagyon is mai az
étterem stílusa, máris tisztul a kép, vagy folytathatod az asszociációs elmélkedést.
A tábla elkészítésére nincs szabály - vághatsz ki újságból cikkeket, akár ki is tépheted,
szkennelhetsz hozzá gyűrött túrórudi papírt, vagy fotózhatsz dohos, öreg falat, de
kutakodhatsz a weben, bőséges a képanyag, csak tudni kell megtalálni pont ugyanazt, vagy
vmi hasonlót ami benned létrejött.
A feladat: Készíts saját moodboardot!
Megint 3 projektet kapsz, picit több infóval -
keress színeket, betűtípusokat a felirathoz, és
2-3 képet, illusztrációt is, amely kapcsolódik,
és jó alap lehet egy leendő megjelenéshez,
weboldalhoz:
1. AngelAir, klímaberendezéseket forgalmazó we-
báruház és szervíz. A fő célcsoportjuk az olcsó
készülé-keket kereső, leginkább otthoni, kisirodai
felhasználók. Mennyei árak - ez a szlogenjük. Ingyen
szállíta-nak az ország bármely pontjára!
2. Pepetta. Ismét egy étterem. De most egy
igazi mediterrán. Minőségi alapanyagkból dol-
gozó, autentikus olasz konyha.
A színek adottak, de kiegészítendők,
kiegészíthetők. A logó egyébként innen
származik - a lecke fakultatív része ennek az
oldalnak a tanulmányozása.
3. Terra Agrár Kft. mezőgazdasági gépek,
pontosabban fejőgépek forgalmazásával foglalkozik,
piacvezető a térségben, komoly, az uniós pályázatok-
hoz megfelelő arculatot szeretne. Az arculatban nem
szeretné ha a tehén alak bármilyen módon megje-
lenne.
A sok duma helyett készítettem neked egy leírást,
hogyan tudod összerakni a saját hangulat
táblád. Ha követed a lépéseket, akkor is menni fog,
ha még sosem használtad a Photoshop-ot!
www.webdesigntanfolyam.com
Irány a fotóbolt!
Photoshopot, de honnan?
Az Adobe Photoshop 30 napos próbaverziója
letölthető az adobe.com-ról, aktuálisan a CS6
verzió.
Letöltés
Amennyiben rendelkezel Photoshop
programmal, úgy bármely régebbi CS, azaz
Creative Suit verzió megfelelő lesz a feladat
elvégzésére!
Ha Gimpet, vagy online fotószerkesztőt
pl. pixlr.com szeretnél használni, azzal is
kivitelezhető a feladat, kicsit másképp néz ki
a felületük!
Akkor vágjunk bele!
1. lépés
Nyisd meg a feltelepített
Photoshopot, és készíts egy új
munkafájlt 800x600 méretben,
File >> New
a háttérszín legyen fehér
(Background Content: White)
www.webdesigntanfolyam.com
2. lépés
A Swatches palettán nyomd meg
ezt a kis fület, és a Load Swatches-
re kattintva hívd be a
letöltött .ase palettádat, amely így
hozzáadódik az alap színeidhez. Ha
csak a saját palettád
akarod látni, akkor a Load Swatch-
es helyett a Replace Swatchest
válaszd.
Milyen palettákról van szó?
A Színek című lecke 2. feladatában
gyűjtöttél ilyen színpalettákat -
már ha megcsináltad :D
Lapozz vissza, és szerezd be őket!
3. lépés
Keresd meg az Eszköztáron az
ecset ikont.
Az Eszköztár ez a hosszú csík
baloldalt - az ecset a 8. ikon lefelé.
Ekkor a kurzorod átváltozik egy
ecset formává,
amelyet jobb klikkel tudsz meg-
változtatni. Akkor előjön ez a kis
tábla, ahol a forma, és a
méret is változtatható.
Ha a színek fölé viszed az egeret,
egy kis pipettává változik, ezzel
tudsz színt felvenni az
ecsetedre.
TIPP:
A .pdf-ben használd a
nagyítást! 150%-on jobban
megtudod nézni a képeket!
www.webdesigntanfolyam.com
4. lépés
Készíts egy új réteget a Layers
dobozban, ezzel a kis ikonnal tusz újabb és
újabb rétegeket létrehozni. A rétegekre
azért van szükség, hogy az egyes elemek
külön-külön mozgathatóak, és szerkeszt-
hetőek maradjanak.
5. lépés
Erre az új rétegre vigyél fel az
ecsetekkel színeket a palettádról.
Másmilyen ecsetformát is
választhatsz!
www.webdesigntanfolyam.com
6. lépés
Hozz létre egy újabb réteget,
és válaszd ki az eszköztáron
a T ikont, ezzel tudsz felira-
tokat, szövegeket írni. Írd fel
a feliratot az általad kiválasz-
tott betűtípussal, és színnel.
Ezeket a fent tudod variálgat-
ni - pirossal bekereteztem.
Most tartunk annál az
állapotnál, ami a múltheti
feladat volt - színeket és
betűtípusokat rendeltünk
össze!
7. lépés
Hozz létre újabb és újabb
szövegrétegeket, és írd a fe-
lirat mellé azokat a kulcssza-
vakat, fogalmakat, amelyek
az asszociáció során eszedbe
jutottak - 4-5 db...
Közben ne felejtsd el el-
menteni a munkád néha, ha
elszáll a géped, kezdheted
elölről -
File >> Save >> moodboard.
psd
www.webdesigntanfolyam.com
8. lépés
A File >> Open segítsé-
gével hívd be a programba
a kiválasztott fotókat. Úgyis
megtudod ezt tenni, hogy
egy másik, nyitott ablakból
egyszerűen behúzgálod a
Photoshopba.
A megnyitott képeket pedig
a már eddig elkészült mood-
boardodra kell áthúznod, és
máris új rétegként megjele-
nik.
A képet behúzni az Eszköz-
tár első nyíl alakú ikonjával
lehet, illetve ugyanezzel
lehet mozgatni a rétegeken/
layereken lévő dolgokat.
Ha azt szeretnéd, hogy a kép
a szövegek alá kerüljön, akkor
viszont magát a Layert kell a
legalsó szintre húzni.
www.webdesigntanfolyam.com
Átméretezés: ha a képek
túl nagyok, vedd kisebbre
őket behúzás előtt az Image
>> Image Size segítségével,
vagy ha már áthúztad őket,
a Ctrl+T gombok együttes
lenyomásával
egy átméretező keretet
kapsz, amely csücskeit húzva
kisebbre veheted a képré-
teget. Ha arányosan akarsz
méretezni, közben javaslom
a Shift billentyű lenyomását
is.
Készen vagy?
Ments el a munkád .psd
formában ha eddig nem tet-
ted, File >> Save >>
moodboard.psd, majd
készítsd el a webes .jpg válto-
zatát a File >> Save for Web
Devices >>
moodboard.jpg
A tömörítésnél használd a
leckében tanultakat!
Gratulálok, kész az első
hangulat táblád!

Más contenido relacionado

Destacado

Government Publications August 2015 Library Guide (4)
Government Publications August 2015 Library Guide (4)Government Publications August 2015 Library Guide (4)
Government Publications August 2015 Library Guide (4)Mary Howrey
 
American Urbanization: New York City
American Urbanization: New York CityAmerican Urbanization: New York City
American Urbanization: New York Citymeggss24
 
Ripped from the Headlines: Cautionary Tales from the Annals of Data Privacy
Ripped from the Headlines: Cautionary Tales from the Annals of Data PrivacyRipped from the Headlines: Cautionary Tales from the Annals of Data Privacy
Ripped from the Headlines: Cautionary Tales from the Annals of Data PrivacyAltheimPrivacy
 
Americas 19th Century
Americas 19th CenturyAmericas 19th Century
Americas 19th Centurymeggss24
 
Personas - Season in the Life
Personas - Season in the LifePersonas - Season in the Life
Personas - Season in the LifeNoel Hatch
 
Facebook New Changes 2011
Facebook New Changes 2011Facebook New Changes 2011
Facebook New Changes 2011AltheimPrivacy
 
Three Easy Steps To Basic Privacy/Security on Facebook
Three Easy Steps To Basic Privacy/Security on FacebookThree Easy Steps To Basic Privacy/Security on Facebook
Three Easy Steps To Basic Privacy/Security on FacebookAltheimPrivacy
 
Senior Health Insurance_DVU_September 12 2013
Senior Health Insurance_DVU_September 12 2013Senior Health Insurance_DVU_September 12 2013
Senior Health Insurance_DVU_September 12 2013Mary Howrey
 
Developing the Work Programme
Developing the Work ProgrammeDeveloping the Work Programme
Developing the Work ProgrammeNoel Hatch
 
8. Comparative History: Article Readings
8. Comparative History: Article Readings8. Comparative History: Article Readings
8. Comparative History: Article Readings03ram
 
Making a Living Project Plan
Making a Living Project PlanMaking a Living Project Plan
Making a Living Project PlanNoel Hatch
 
Transeuropa Village
Transeuropa VillageTranseuropa Village
Transeuropa VillageNoel Hatch
 
How to post a Citizen Report (EN)
How to post a Citizen Report (EN)How to post a Citizen Report (EN)
How to post a Citizen Report (EN)Tom Trewinnard
 

Destacado (19)

Digitális design - Workflow
Digitális design - WorkflowDigitális design - Workflow
Digitális design - Workflow
 
Government Publications August 2015 Library Guide (4)
Government Publications August 2015 Library Guide (4)Government Publications August 2015 Library Guide (4)
Government Publications August 2015 Library Guide (4)
 
American Urbanization: New York City
American Urbanization: New York CityAmerican Urbanization: New York City
American Urbanization: New York City
 
Ripped from the Headlines: Cautionary Tales from the Annals of Data Privacy
Ripped from the Headlines: Cautionary Tales from the Annals of Data PrivacyRipped from the Headlines: Cautionary Tales from the Annals of Data Privacy
Ripped from the Headlines: Cautionary Tales from the Annals of Data Privacy
 
Americas 19th Century
Americas 19th CenturyAmericas 19th Century
Americas 19th Century
 
Personas - Season in the Life
Personas - Season in the LifePersonas - Season in the Life
Personas - Season in the Life
 
LinkedIn for Lawyers
LinkedIn for Lawyers LinkedIn for Lawyers
LinkedIn for Lawyers
 
Blebea
BlebeaBlebea
Blebea
 
Facebook New Changes 2011
Facebook New Changes 2011Facebook New Changes 2011
Facebook New Changes 2011
 
2007 Q3 md&a
2007 Q3 md&a2007 Q3 md&a
2007 Q3 md&a
 
Three Easy Steps To Basic Privacy/Security on Facebook
Three Easy Steps To Basic Privacy/Security on FacebookThree Easy Steps To Basic Privacy/Security on Facebook
Three Easy Steps To Basic Privacy/Security on Facebook
 
Senior Health Insurance_DVU_September 12 2013
Senior Health Insurance_DVU_September 12 2013Senior Health Insurance_DVU_September 12 2013
Senior Health Insurance_DVU_September 12 2013
 
Developing the Work Programme
Developing the Work ProgrammeDeveloping the Work Programme
Developing the Work Programme
 
8. Comparative History: Article Readings
8. Comparative History: Article Readings8. Comparative History: Article Readings
8. Comparative History: Article Readings
 
Survey
SurveySurvey
Survey
 
#outcomefest
#outcomefest#outcomefest
#outcomefest
 
Making a Living Project Plan
Making a Living Project PlanMaking a Living Project Plan
Making a Living Project Plan
 
Transeuropa Village
Transeuropa VillageTranseuropa Village
Transeuropa Village
 
How to post a Citizen Report (EN)
How to post a Citizen Report (EN)How to post a Citizen Report (EN)
How to post a Citizen Report (EN)
 

Online Webdesign Tanfolyam 3. Képek

  • 1. Pixelgyár Kft. 2012 - Minden jog fenntartva! ingyenes alapozó leckék Pixelgyár Kft. 2012 - Minden jog fenntartva! ingyenes alapozó leckék 3. rész Képek használata
  • 2. www.webdesigntanfolyam.com “Egy fényképet nézni és látni két külön dolog. (...) Fényképet nézni bárki tud, de egy fény- képet látni azt jelenti, hogy az ember olvasni tud a képről. Egyfelől adottak az emberek a maguk kulturális vívmányaival, másfelől pedig a természet. A fák, a tavak, a felhős ég a fényképeken általános, mindenki számára érthető nyelven beszélnek. Valamiféle időtlen nyelven, ha szabad így mondani. Az emberek, az építmé- nyek, az utak és a kávésdobozok ellen- ben csak egy adott kontextusban, az adott időben olvashatók.” Bernlef
  • 3. www.webdesigntanfolyam.com Képtípusok A kép az kép. Vagy mégsem? étféle képtípust különböztetünk meg - az egyik a pixelekből álló bittérképes, vagy másnéven rasz- teres 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 mérhető fájlmérettel. Lehetnek azonban olyan grafikák is, amelyek képszerkesztő programban készülnek, mint a Photoshop. Különböző raszteres fájlformátumok pl. .BMP, .GIF, .PNG, .JPG, .ICO K Bittérképes, pixeles képek Az, hogy egy képet milyen formátumban men- tü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án- juk, 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. 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.
  • 4. www.webdesigntanfolyam.com A képen látható, hogy az eredeti 2,76 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 130,5 Kb, és még egészen jó képminőséget ad vissza. A 30%-os már itt-ott foltos, az 1%-os pedig nagyon pixeles, és teljesen eltüntek olyan részletgazdag terül- etek, mint a szirmok. Ha körvonalas képet, apró részleteket akarsz megmutatni, és mindezt kis méretben, akkor nem a legjobb választás - az alsó két képen már erőteljesen izzad a maci. Azt is vedd figyelembe, hogy ha egy képet újra, és újra megnyitsz, és elmentesz .jpg-be, akkor újra és újra tömörítessz még rajta, tehát fokozatosan rom- lik a minősége.
  • 5. www.webdesigntanfolyam.com 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, a .jpg-hez képest - veszteség- mentesen tömörít. 8 bit színmélységű (256 színű), tehát nem túl részletgazdag, viszont mivel nem tömöríti agyon az adatokat, egyszerű vonalas ábrák, finom árnya- latok, árnyékok nélküli színezésekkel megoldott grafikákhoz most is tökéletes. Az ún. clipartok ide- jén volt népszerű. Az idegesítő animgifeket mindenki ismeri, még ha nem is tud róla. Pörgő postaláda, villogó email, és csillogó Hello Kitty az internet hőskorszakát idézik vissza. Ez itt a múlt a GIF ma “az animgif maga a tökéletes platformközi médiaformátum.” hirbehozó/Webisztán Ma az animgif egy megállított idő. A kétes minőségű grafikákat felváltották a brutális mega- pixelek, a HD minőségű videóból kivett képkockák. A technológia fejlődésével a vizuális kommu- nikáció is fejlődött, és mindenki kezében ott az eszköz az ilyen szép megoldások megvalósítására, munkára vagy szórakozásként. Pár link animgifekkel: iPad felhasználók Cuki fiúk és az epersör Hogyan készíts Te is?
  • 6. www.webdesigntanfolyam.com PNG Pár éve lett népszerű ez a formátum. Előtte kevésbé használták mert az IE6 verzió nem támogatta az átlátszó hátterű .png képeket. Egyébként a .gif-nek meg lejárt licence. Merthogy ilyet is lehet. Már a .gif-eknél is volt átlátszó háttér, de maga az objektum széle “szakszóval: rohadt”, azaz nem simult a környezetébe. 24 bit színmélységű (16,7 millió szín), azaz rendkívül részletgazdag - van 8 bites mentésre is lehetőség. A .png kifejezetten képernyőre tervezett képformátum, így a nyomdai CYMK színmódot nem támo- gatja. Webdesign tervezés során ikonok, ikonkészletek, és részletgazdag fotók feldolgozásakor találkozunk vele, illetve jó alternatíva magára a webtervezésre is, mert a Photoshopban keletkező tervek mérete sokszor annyira gigászi, hogy kezelhetetlenek, míg a .png-vel dolgozó Fireworks negyedakkora fájlméretet eredményez. Webdesign során ezt a három pixeles fájl- formátumot alkalmazzuk leggyakrabban. Kétféle képtípusról beszéltem, de ez csak egy volt. Jöjjenek a vektorok! Vektoros képek, vektorgrafika 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.
  • 7. www.webdesigntanfolyam.com Ez az általam rajzolt vektor lányka ennyi pontból és görbéből áll - valaha pedig egy papír szélén, egy odavetett firkaként született, egy zsiráf társaságában. A vektorgrafikákat elsősorban a rajzoló programokban készítik - Adobe Illustrator, Inkscape stb. Vektoros fájlformátumok: .AI (Illustrator), .EPS, .PDF-ben is lehet menteni, valamint egyes .PNG formákban, .CDR (CorelDraw), .SVG Vektorgrafikákkal dolgozik a Flash is, valamint vektorosak az előző anyagban tárgyalt Opentype betűtípsuok is. Pixel vs Vektor A pixeles, vagy raszteres képek minősége a nagyítással romlik, míg egy vektoros kép korlátlanul nagyít- ható - 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 es- eté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. 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ő.
  • 8. www.webdesigntanfolyam.com Képek a webre Az egyik legfontosabb szempont a mai napig a fájl- méret. Nem csak nem “illik” óriási, több megás képeket letöltetni senkivel, aki nem akarja - sávszélesség... ha- nem nincs is semmi értelme, egy akkora kép böngészőben kezelhetetlen és élvezhetetlen. Ily módon vagy a méretét csökkentjük pixelben - 1600x1200 helyett 800x600, vagy a tömörítését 70%-os .jpg, vagy mindkettőt. 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! 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ó for- mát! A webre szánt képeket ments a webre! A fotószerkesztőkben pl. Photoshop van egy ilyen funkció - Save as Web. Ez megfelelően optimalizálja a tömörítési, és színkezelési beállításokat, kifejezetten az interneten való megjelenésre, de találunk módot ezek finomítására is! 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 - ha csak nem dokumen- tálsz - eseményekről a mobilos fotó is megfelelő, a lényeg ott is, hogy legyen!
  • 9. www.webdesigntanfolyam.com Képet, de honnan? A legkézenfekvőbb megoldásnak a Google képkeresője tűnik, de ez egyben a legrosszabb is. A képeket, fotókat, grafikákat, illusztrációkat, ikonokat stb. valakik készítik, é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. Az alkotás jelen esetben nem művészi értékkel bíró képeket jelent, hanem bármilyen képet, amelyet készítettél, és az nem sérti esetleg már önmagában más szerzők jogait. A Google képkeresőjében a legtöbb kép viszont ilyen jogvédelem alatt áll, hiszen azt már valamilyen oldal felhasználta, vagy saját maga készítette, vagy esetleg megvásárolta. Még akkor sem használható, ha egyébként ingyenes kép, ha nem ismered az eredeti forrást. Más dolog a letölthető, és más a felhasználható kép. 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 nem lehet ilyen módon megvédeni. http://www.artisjus.hu/opencms/export/download/aszerzoijogrol/szerzoi_jogi_torveny.pdf Fontos tudni, hogy a szerzői jogokról nem lehet lemondani! Átruházhatóak a műhöz kapcsolódó vagyoni jogok - ezt teszed, amikor a szerződés tárgyát, jelen es- etben egy grafikát, logót, vagy webdesignt átadsz a megrendelőnek, vagy vásárolsz megrendelőként - azonban a készítés jogáról, és a készítő feltüntetésének jogáról nem lehet lemondani. Ha egy logót tervezel például, és a felhasználási körökben nem szerepel mondjuk a lokalizálás más nyelvekre, akkor elvileg az engedélyed nélkül ez nem lehetséges, és további szerzői jogdíjat kellene kapnod. Ugyanígy nem lehet átdolgozni sem - egy ilyen eset a Homáron kötött ki pár éve - http://homar.blog.hu/2007/06/15/logolopassal_nyitott_az_anyucika Tanulságos!
  • 10. www.webdesigntanfolyam.com Képkeresők A Flickr-en kívül több száz képkereső, képmegosztó létezik, ahonnan szabadon, vagy a fenti korlátozásokkal letölthetsz képeket, grafikákat. Minden esetben olvasd el az oldal felté- teleit, vagy a fotó melletti leírást, mert rendkívül változatosak Csak néhány: http://sxc.hu (magyar fejlesztés, kb. 350.000 képből válogathatsz) http://www.morguefile.com http://www.freedigitalphotos.net http://www.stockvault.net http://www.freephotosbank.com http://www.everystockphoto.com http://www.woophy.com http://finallycreative.com/gallery/ http://www.deviantart.com http://www.vecteezy.com http://www.brusheezy.com http://openphoto.net http://www.photorogue.com http://freerangestock.com
  • 11. www.webdesigntanfolyam.com Creative Commons Ezzel párhuzamosan létezik egy másik, a szerzői jog alá eső művek felhasználására létrehozott szervezet, és megjelölés - ez a Creative Commons. Jóval tágabb felhasználási formákat, változatos licenceket hoztak létre az erősen különböző jogvédett tartalomak jelölésére. A jelrendszer ma már nemzetközileg teljesen elfogadott, és érthető - Ne add el! Nevezd meg! vagy Ne változtasd! http://hu.wikipedia.org/wiki/Creative_Commons Visszatérve a képekre - azon képek felhasználása ahol “All rights reserved” “Copyright” vagy ehhez hasonló feliratok vannak, csak a szerző engedélyével használhatóak fel. Ha nagyon ragaszkodsz egy képhez, és utolérhető a szerző, egyébként lehet, hogy hozzájárul, ha meg- mondod hol szeretnéd használni a képet! Nekem pár hónapja írt egy hölgy, szeretné ezeket a rozsdás képeim felhasználni verseskötetek illusztrálására. Egy jelképes tiszteletdíjat is felajánlott - 50 EUR, amelyet néhány nap múlva meg is kaptam. Tanulmányozd a Creative Com- mons licenszet, mert pl. a Flickr képmegosztón csodálatos, kreatív fotókat találsz felhasználható megjelöléssel. http://www.flickr.com/crea- tivecommons/ A Flickr-hez nagyon sok alkalmazás létezik, itt találsz párat leírással: http://spottr.hu/2009/01/28/ker- essunk-a-flickren-maskepp/ http://www.airtightinteractive. com/projects/related_tag_brows- er/app/
  • 12. www.webdesigntanfolyam.com Képvásárlás A stock fotók előregyártott képek, amelyekre komoly iparág épült. Ezeket a képeket nem csak web- szájtokon, hanem reklámokban, újságokban, plakátokon, csomagolásokon és még milliónyi helyen fel- használják a világ minden táján. Nem csak fotók, hanem videók, animációk, hanganyagok és vektoros grafikák, instant arculati elemek is megvásárolhatóak. http://www.pixmac.hu http://www.dreamstime.com/res2124307-free-photos http://www.istockphoto.com A legismertebb kép piac. Nem olcsó - ha gyorsan kell, jó minőségű illusztráció minden pénzt megér, ha nem kell 2 napig keresgélned egy képet! Ne felejtsd el, az idő pénz! Én a képek 80%-át innen veszem, vagy hasonló oldalakról, mint a Crestock, vagy a Veer.
  • 13. www.webdesigntanfolyam.com Krediteket tudsz vásárolni - egy kép 1-7 kredit általában, webes méretben, felhasználásra. 1 kredit 1 dollár körül van, ami most 200 Ft, szóval azért nem vág a földhöz, és jogtiszta képed van az adott munkára. Fontos! A Royalty Free képek azt jelentik, hogy a felhaszná- lási jogot egy adott munkára vásárolod meg. Ha szeretnéd a képet máshol is felhasználni, arra is van mód a megfelelő összeget kiperkálva. Ha az istock-on vásárolsz kreditet, mindig nézz körül előbb a weben, hátha találsz használható kupon kódot, amivel több kreditet kapsz, vagy kevesebbet kell fizetned a vásárláskor. Keresési kulcszó: istock coupon code, vagy istock photo cred- it code, és hogy friss találatot kapj mellé írhatod az aktuális évet, hónapot pl. istock coupon code 2012 march TIPP! Képmutatónak tűnne, ha azt mondanám, hogy én mindig betartom a szabályokat. Képmutató... képzavar. Nagyon nem szeretem a szabályokat, de alkotóként tisztelem annyira a másik munkáját, hogy hivatkozom, megne-vezem a forrást. Már ha nem felejtem el... Sajnos dvd-számra állnak az évek során összegyűjtött képeim, amiket ezért nem tudok használni, ezért ha nem mented el mellé, hogy honnan, mikor szerezted be, mehet is a Lomtár ikonnal jelzett kis mappába, vagy a kukába. Miután már idehaza is van irodája a nagyobb képügynökségeknek, ahol azért fizetik Micikét, hogy a jogtalanul használt képekre vadásszon, könnyen járhatsz úgy, hogy kapsz a postán egy szép printscreent, és egy vastag számlát, visszamenőlegesen is. Ha az oldal tulajdonosa nem egyértelmű, a domain tulajdonosa viszont nyilvános, akkor az perkál, mondjuk Te a grafikusod képlopása okán - így fizettem én pár éve 3 db 180x120 képért kb. 60e Ft-ot. Minden esetben figyelj oda, milyen forrásból származik a felhasználandó kép, és nem sérted-e a szerző jogait! Más a magáncélú, és más a kereskedelmi célú felhasználás. Indulhat a képkeresés! Összegzés
  • 14. www.webdesigntanfolyam.com Feladatok Ne csak olvasd! Csináld! Amit a múlthéten kaptál feladatot - arculat színe és hozzá való betűtípus - most tovább fejlesztjük. Igen, kitaláltad, képekkel fogod kiegészíteni! A végeredményt úgy hívják - moodboard, vagyis hangulat tábla - de még nem értünk el a végére... Gyakorlatilag egy kollázs. Ha kapsz egy új kreatív feladatot, örvényleni kezdenek benned az ötletek, színek, hangulatok. Ez az a fázis, amikor valamiféle varázslat kezdődik benned. A teremtés energiái járják be a tested a fejed búbjától, a lábad ujjáig. Az ilyenkor felszabaduló energiák miatt csináljuk az egészet! Érzed már a bizsergést (vagyis a vágyat, hogy ezt érezd?) A moodbooard egy munkafázis. Segít rendezni a gondolatokat, kibogozni a szálakat, kialakítani egy irányt, és további inspirációkat ad! A marketing egyik alaptétele, hogy nem terméket, vagy szolgáltatást adunk el, hanem érzéseket, hangulatokat! Ezt kell leképezni, kifejezni színekkel, tipográfiával és képekkel - egyelőre... A hangulattábla nem csak téged segít, hogy csapást vágj ebben a dzsungelben, hanem magaddal viheted az ügyfeled, munkatársaid, grafikusod, fejlesztőd! A tábla segítségével alátámaszt- hatod a koncepciód, vagy akár tesztelhetsz több irányvonalat anélkül, hogy feleslegesen kellene dol- goznod. Ehhez hasonló inspirációs táblákat rengeteg kreatív szakmában használnak a divattervezéstől a lakberendezésig - és sokszor ezek a rokon területek is rengeteg ötletet adnak. Mi az a moodboard?
  • 15. www.webdesigntanfolyam.com Valaki mond egy szót, és te mondasz egy másikat, ami erről eszedbe jut! A moodboard elkészítéséhez pont ugyanezt kell tenned - a meglévő információk alapján - nyilván minél több van, annál nagyobb a mozgástered - össze kell szedned a szétszórt téglákat, amiből a várat feltudod építeni. Játszottál már valamilyen asszociációs játékot? “Egy drága francia étterem - “Le gourmandise” a neve” Ebben a rövid, egy soros leírásban is több információ rejlik, mint gondolod. francia, drága, étterem - ha még nem jártál ilyenben, akkor is felrémlenek a különböző filmekből, műsorokból a mikro adagok, furcsa nevű, és még furcsább hozzávalókból készülő ínyencségek. Mert a “gourmandise” szó ínyencséget jelent, a “Le gourmandise” kifejezés viszont falánkságot, és kapzsiságot is. A francia konyha híres, és puccos - Champaigne, Bordeaux, Béchamel, Croissants, Bor, mámor, Provance.. ami eszedbe jut, mind leírhatod. Gazdagság - arany, ezüst étkészlet, kristálypohár, damaszt terítő - A damasztvászon szövése a lentermelő országokban terjedt el - például Franciaországban a XIII. század közepe táján. (Terebess Lexikon) Ha több infód van, mondjuk, hogy mennyire drága a drága, klasszikus, vagy éppen ellenkezőleg nagyon is mai az étterem stílusa, máris tisztul a kép, vagy folytathatod az asszociációs elmélkedést. A tábla elkészítésére nincs szabály - vághatsz ki újságból cikkeket, akár ki is tépheted, szkennelhetsz hozzá gyűrött túrórudi papírt, vagy fotózhatsz dohos, öreg falat, de kutakodhatsz a weben, bőséges a képanyag, csak tudni kell megtalálni pont ugyanazt, vagy vmi hasonlót ami benned létrejött. A feladat: Készíts saját moodboardot! Megint 3 projektet kapsz, picit több infóval - keress színeket, betűtípusokat a felirathoz, és 2-3 képet, illusztrációt is, amely kapcsolódik, és jó alap lehet egy leendő megjelenéshez, weboldalhoz: 1. AngelAir, klímaberendezéseket forgalmazó we- báruház és szervíz. A fő célcsoportjuk az olcsó készülé-keket kereső, leginkább otthoni, kisirodai felhasználók. Mennyei árak - ez a szlogenjük. Ingyen szállíta-nak az ország bármely pontjára! 2. Pepetta. Ismét egy étterem. De most egy igazi mediterrán. Minőségi alapanyagkból dol- gozó, autentikus olasz konyha. A színek adottak, de kiegészítendők, kiegészíthetők. A logó egyébként innen származik - a lecke fakultatív része ennek az oldalnak a tanulmányozása. 3. Terra Agrár Kft. mezőgazdasági gépek, pontosabban fejőgépek forgalmazásával foglalkozik, piacvezető a térségben, komoly, az uniós pályázatok- hoz megfelelő arculatot szeretne. Az arculatban nem szeretné ha a tehén alak bármilyen módon megje- lenne. A sok duma helyett készítettem neked egy leírást, hogyan tudod összerakni a saját hangulat táblád. Ha követed a lépéseket, akkor is menni fog, ha még sosem használtad a Photoshop-ot!
  • 16. www.webdesigntanfolyam.com Irány a fotóbolt! Photoshopot, de honnan? Az Adobe Photoshop 30 napos próbaverziója letölthető az adobe.com-ról, aktuálisan a CS6 verzió. Letöltés Amennyiben rendelkezel Photoshop programmal, úgy bármely régebbi CS, azaz Creative Suit verzió megfelelő lesz a feladat elvégzésére! Ha Gimpet, vagy online fotószerkesztőt pl. pixlr.com szeretnél használni, azzal is kivitelezhető a feladat, kicsit másképp néz ki a felületük! Akkor vágjunk bele! 1. lépés Nyisd meg a feltelepített Photoshopot, és készíts egy új munkafájlt 800x600 méretben, File >> New a háttérszín legyen fehér (Background Content: White)
  • 17. www.webdesigntanfolyam.com 2. lépés A Swatches palettán nyomd meg ezt a kis fület, és a Load Swatches- re kattintva hívd be a letöltött .ase palettádat, amely így hozzáadódik az alap színeidhez. Ha csak a saját palettád akarod látni, akkor a Load Swatch- es helyett a Replace Swatchest válaszd. Milyen palettákról van szó? A Színek című lecke 2. feladatában gyűjtöttél ilyen színpalettákat - már ha megcsináltad :D Lapozz vissza, és szerezd be őket! 3. lépés Keresd meg az Eszköztáron az ecset ikont. Az Eszköztár ez a hosszú csík baloldalt - az ecset a 8. ikon lefelé. Ekkor a kurzorod átváltozik egy ecset formává, amelyet jobb klikkel tudsz meg- változtatni. Akkor előjön ez a kis tábla, ahol a forma, és a méret is változtatható. Ha a színek fölé viszed az egeret, egy kis pipettává változik, ezzel tudsz színt felvenni az ecsetedre. TIPP: A .pdf-ben használd a nagyítást! 150%-on jobban megtudod nézni a képeket!
  • 18. www.webdesigntanfolyam.com 4. lépés Készíts egy új réteget a Layers dobozban, ezzel a kis ikonnal tusz újabb és újabb rétegeket létrehozni. A rétegekre azért van szükség, hogy az egyes elemek külön-külön mozgathatóak, és szerkeszt- hetőek maradjanak. 5. lépés Erre az új rétegre vigyél fel az ecsetekkel színeket a palettádról. Másmilyen ecsetformát is választhatsz!
  • 19. www.webdesigntanfolyam.com 6. lépés Hozz létre egy újabb réteget, és válaszd ki az eszköztáron a T ikont, ezzel tudsz felira- tokat, szövegeket írni. Írd fel a feliratot az általad kiválasz- tott betűtípussal, és színnel. Ezeket a fent tudod variálgat- ni - pirossal bekereteztem. Most tartunk annál az állapotnál, ami a múltheti feladat volt - színeket és betűtípusokat rendeltünk össze! 7. lépés Hozz létre újabb és újabb szövegrétegeket, és írd a fe- lirat mellé azokat a kulcssza- vakat, fogalmakat, amelyek az asszociáció során eszedbe jutottak - 4-5 db... Közben ne felejtsd el el- menteni a munkád néha, ha elszáll a géped, kezdheted elölről - File >> Save >> moodboard. psd
  • 20. www.webdesigntanfolyam.com 8. lépés A File >> Open segítsé- gével hívd be a programba a kiválasztott fotókat. Úgyis megtudod ezt tenni, hogy egy másik, nyitott ablakból egyszerűen behúzgálod a Photoshopba. A megnyitott képeket pedig a már eddig elkészült mood- boardodra kell áthúznod, és máris új rétegként megjele- nik. A képet behúzni az Eszköz- tár első nyíl alakú ikonjával lehet, illetve ugyanezzel lehet mozgatni a rétegeken/ layereken lévő dolgokat. Ha azt szeretnéd, hogy a kép a szövegek alá kerüljön, akkor viszont magát a Layert kell a legalsó szintre húzni.
  • 21. www.webdesigntanfolyam.com Átméretezés: ha a képek túl nagyok, vedd kisebbre őket behúzás előtt az Image >> Image Size segítségével, vagy ha már áthúztad őket, a Ctrl+T gombok együttes lenyomásával egy átméretező keretet kapsz, amely csücskeit húzva kisebbre veheted a képré- teget. Ha arányosan akarsz méretezni, közben javaslom a Shift billentyű lenyomását is. Készen vagy? Ments el a munkád .psd formában ha eddig nem tet- ted, File >> Save >> moodboard.psd, majd készítsd el a webes .jpg válto- zatát a File >> Save for Web Devices >> moodboard.jpg A tömörítésnél használd a leckében tanultakat! Gratulálok, kész az első hangulat táblád!