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!