ingyenes alapoz leckk

Kpek hasznlata
Pixelgyr Kft. 2012 - Minden jog fenntartva!

ingyenes alapoz leckk 3. rsz

Pixelgyr Kft. 2012 - Minden jog fenntartva!

Egy fnykpet nzni s ltni kt kln dolog. (...) Fnykpet nzni brki tud, de egy fnykpet ltni azt jelenti, hogy az ember olvasni tud a kprl. Egyfell adottak az emberek a maguk kulturlis vvmnyaival, msfell pedig a termszet. A fk, a tavak, a felhs g a fnykpeken ltalnos, mindenki szmra rthet nyelven beszlnek. Valamifle idtlen nyelven, ha szabad gy mondani. Az emberek, az ptmnyek, az utak s a kvsdobozok ellenben csak egy adott kontextusban, az adott idben olvashatk. Bernlef

www.webdesigntanfolyam.com

Kptpusok
A kp az kp. Vagy mgsem?

tfle kptpust klnbztetnk meg - az egyik a pixelekbl ll bittrkpes, vagy msnven raszteres forma, amelyben a kp rszletei ezekbl a pixelkockkbl plnek fel. Ezek nagyrszt fnykpek, ahol a mret a lnyeg. Vagyis a minsg egyenesen arnyos mind a pixel, mind a MB-ban mrhet fjlmrettel. Lehetnek azonban olyan grafikk is, amelyek kpszerkeszt programban kszlnek, mint a Photoshop. Klnbz raszteres fjlformtumok pl. .BMP, .GIF, .PNG, .JPG, .ICO

Bittrkpes, pixeles kpek

Az, hogy egy kpet milyen formtumban mentnk el, leginkbb a ksbbi felhasznls vlhet mdjtl fgg. Egy fnykpezgprl bevitt kpet, amennyiben nyomdai, vagy fotkidolgozsra sznjuk, igyeksznk eredeti formjban megtartani, azaz minl kevesebb rszletet elveszteni. Ha azonban az internetre sznjuk, elssorban a fjlmret dominl, ne tartson tl sokig betltenie a bngsznek, de felismerhet, lvezhet maradjon.

JPG
A .jpg formtummal tallkozhatsz a legtbbet fknt fotknl. A .jpg, .jpeg egy n. vesztesgesen tmrtett kpformtum. Azaz a tmrts mrtkvel cskken a fjlmret, de a kpen lv informci is, ilyenkor lesz pixeles a kp.

www.webdesigntanfolyam.com

A kpen lthat, hogy az eredeti 2,76 MB-os kp (amit a netrl szedtem, teht mr tmrtett) - 60 quality, vagyis 60%-os tmrts mellett mr csak 130,5 Kb, s mg egszen j kpminsget ad vissza. A 30%-os mr itt-ott foltos, az 1%-os pedig nagyon pixeles, s teljesen eltntek olyan rszletgazdag terletek, mint a szirmok.

Ha krvonalas kpet, apr rszleteket akarsz megmutatni, s mindezt kis mretben, akkor nem a legjobb vlaszts - az als kt kpen mr erteljesen izzad a maci. Azt is vedd figyelembe, hogy ha egy kpet jra, s jra megnyitsz, s elmentesz .jpg-be, akkor jra s jra tmrtessz mg rajta, teht fokozatosan romlik a minsge.

www.webdesigntanfolyam.com

GIF
Kihal flben lv formtum - mr nincs szksg arra a fjlmret/svszlessg sprolsra, amirt annyira kedvelt volt, a .jpg-hez kpest - vesztesgmentesen tmrt. 8 bit sznmlysg (256 szn), teht nem tl rszletgazdag, viszont mivel nem tmrti agyon az adatokat, egyszer vonalas brk, finom rnyalatok, rnykok nlkli sznezsekkel megoldott grafikkhoz most is tkletes. Az n. clipartok idejn volt npszer. Az idegest animgifeket mindenki ismeri, mg ha nem is tud rla. Prg postalda, villog email, s csillog Hello Kitty az internet hskorszakt idzik vissza.

a GIF ma

lt itt a m Ez

az animgif maga a tkletes platformkzi mdiaformtum.

hirbehoz/Webisztn

Ma az animgif egy meglltott id. A ktes minsg grafikkat felvltottk a brutlis megapixelek, a HD minsg videbl kivett kpkockk. A technolgia fejldsvel a vizulis kommunikci is fejldtt, s mindenki kezben ott az eszkz az ilyen szp megoldsok megvalstsra, munkra vagy szrakozsknt. Pr link animgifekkel: iPad felhasznlk Cuki fik s az epersr Hogyan kszts Te is?

www.webdesigntanfolyam.com

PNG
Pr ve lett npszer ez a formtum. Eltte kevsb hasznltk mert az IE6 verzi nem tmogatta az tltsz htter .png kpeket. Egybknt a .gif-nek meg lejrt licence. Merthogy ilyet is lehet. Mr a .gif-eknl is volt tltsz httr, de maga az objektum szle szakszval: rohadt, azaz nem simult a krnyezetbe. 24 bit sznmlysg (16,7 milli szn), azaz rendkvl rszletgazdag - van 8 bites mentsre is lehetsg. A .png kifejezetten kpernyre tervezett kpformtum, gy a nyomdai CYMK sznmdot nem tmogatja. Webdesign tervezs sorn ikonok, ikonkszletek, s rszletgazdag fotk feldolgozsakor tallkozunk vele, illetve j alternatva magra a webtervezsre is, mert a Photoshopban keletkez tervek mrete sokszor annyira gigszi, hogy kezelhetetlenek, mg a .png-vel dolgoz Fireworks negyedakkora fjlmretet eredmnyez. Webdesign sorn ezt a hrom pixeles fjlformtumot alkalmazzuk leggyakrabban. Ktfle kptpusrl beszltem, de ez csak egy volt. Jjjenek a vektorok!

Vektoros kpek, vektorgrafika

Mi az a vektor?
Egy fggvny. Vagyis a kpinformcik ez esetben nem adatknt a pixelekben troldnak, hanem egy matematikai kplet rja le ket. Bonyi? Az. Matematikai rdekldseknek ajnlom a technolgia rszletes tanulmnyozst mindenki msnak - a vektoros rajzok egyenesekbl, grbkbl, s az azokat sszekt pontokbl llnak, ezeket nevezik Bazier grbnek.

www.webdesigntanfolyam.com

Ez az ltalam rajzolt vektor lnyka ennyi pontbl s grbbl ll - valaha pedig egy papr szln, egy odavetett firkaknt szletett, egy zsirf trsasgban. A vektorgrafikkat elssorban a rajzol programokban ksztik - Adobe Illustrator, Inkscape stb.

Vektoros fjlformtumok:
.AI (Illustrator), .EPS, .PDF-ben is lehet menteni, valamint egyes .PNG formkban, .CDR (CorelDraw), .SVG Vektorgrafikkkal dolgozik a Flash is, valamint vektorosak az elz anyagban trgyalt Opentype bettpsuok is.

Pixel vs Vektor
A pixeles, vagy raszteres kpek minsge a nagytssal romlik, mg egy vektoros kp korltlanul nagythat - pl. logknl nagyon fontos, hogy egy 5x9 cm-s nvjegykrtyn, s egy 15 emeletes hzra felhzott molinn is megfelel minsg legyen A pixeles kphez viszonytva a vektoros fjlmret elenysz, viszont ha tl sok pontbl ll, a kirajzols a processzort, memrit terheli nagyon A pixeles fjlmret fgg a sznmlysgtl, begyazott sznprofiloktl, tmrtsi mdtl, a vektoros esetn ezek nem befolysoljk a mretet. A pixeles kp egysges egsz, mg a vektorgrafika elemekrem, elem csoportokra bonthat pl. egy sszetett grafika minden eleme kln mozgathat A vektoros kpbl brmikor kszthetsz pixeleset, azonban a pixelesl vektorosat csak nehzkesen. Az egyszer rajzok, vonalas brk knnyebben vektorizlhatak - un. trace talaktssal, de fotkat, rszletes kpeket nem lehet gy jl tltetni, csak trajzolni. Ez minden esetben a kp rszletessgtl fgg.

www.webdesigntanfolyam.com

Kpek a webre
Az egyik legfontosabb szempont a mai napig a fjlmret.
Nem csak nem illik risi, tbb megs kpeket letltetni senkivel, aki nem akarja - svszlessg... hanem nincs is semmi rtelme, egy akkora kp bngszben kezelhetetlen s lvezhetetlen. Ily mdon vagy a mrett cskkentjk pixelben - 1600x1200 helyett 800x600, vagy a tmrtst 70%-os .jpg, vagy mindkettt. Mennyi ideig tlttted ezt a kpet? http://farm3.static.flickr.com/2401/2045014005_dd60043073_o.jpg Vigyzat 4,9 MB, s 9600x7200!! Ha ilyen brutlnagy fjlra hivatkozol, mindig jelezd!

Hasznld a megfelel formtumot!

Egyszer brkhoz j lehet a .gif is, sznes, rszletgazdag kpekhez magas minsg .jpg, vagy .png lltsd mrlegre a kis fjlmretet, s az elvrt kpminsget, s vlaszd az ahhoz leginkbb passzol formt!

A webre sznt kpeket ments a webre!

A fotszerkesztkben pl. Photoshop van egy ilyen funkci - Save as Web. Ez megfelelen optimalizlja a tmrtsi, s sznkezelsi belltsokat, kifejezetten az interneten val megjelensre, de tallunk mdot ezek finomtsra is!

Hasznlj kpeket btran!

A kpes tartalmakat tbben nzik meg, a jl megvlasztott kp segt beazonostani a vrhat tartalmat, st akr olvass utn visszatrve is knnyebben rtallnak, ha a cmre nem is emlkeznek. A kpek rdekesek, tartalmasak - de csak kivl minsg fotanyaggal dolgozz - ha csak nem dokumentlsz - esemnyekrl a mobilos fot is megfelel, a lnyeg ott is, hogy legyen!

www.webdesigntanfolyam.com

Kpet, de honnan?
A legkzenfekvbb megoldsnak a Google kpkeresje tnik, de ez egyben a legrosszabb is. A kpeket, fotkat, grafikkat, illusztrcikat, ikonokat stb. valakik ksztik, s a szerz jogn megilleti ket a dnts, hogy hol, hogyan s mennyirt hasznljk az ltaluk ksztett alkotst. Az alkots jelen esetben nem mvszi rtkkel br kpeket jelent, hanem brmilyen kpet, amelyet ksztettl, s az nem srti esetleg mr nmagban ms szerzk jogait. A Google kpkeresjben a legtbb kp viszont ilyen jogvdelem alatt ll, hiszen azt mr valamilyen oldal felhasznlta, vagy sajt maga ksztette, vagy esetleg megvsrolta. Mg akkor sem hasznlhat, ha egybknt ingyenes kp, ha nem ismered az eredeti forrst. Ms dolog a letlthet, s ms a felhasznlhat kp.

Szerzi jog
A szerzi jog a 1999. vi LXXVI. trvnyben kerlt rgztsre, amely rendelkezik arrl, hogy mi esik jogvdelem al, s mi nem - egy tletet pldul nem lehet ilyen mdon megvdeni. http://www.artisjus.hu/opencms/export/download/aszerzoijogrol/szerzoi_jogi_torveny.pdf

Fontos tudni, hogy a szerzi jogokrl nem lehet lemondani!

truhzhatak a mhz kapcsold vagyoni jogok - ezt teszed, amikor a szerzds trgyt, jelen esetben egy grafikt, logt, vagy webdesignt tadsz a megrendelnek, vagy vsrolsz megrendelknt - azonban a kszts jogrl, s a kszt feltntetsnek jogrl nem lehet lemondani. Ha egy logt tervezel pldul, s a felhasznlsi krkben nem szerepel mondjuk a lokalizls ms nyelvekre, akkor elvileg az engedlyed nlkl ez nem lehetsges, s tovbbi szerzi jogdjat kellene kapnod. Ugyangy nem lehet tdolgozni sem - egy ilyen eset a Homron kttt ki pr ve http://homar.blog.hu/2007/06/15/logolopassal_nyitott_az_anyucika Tanulsgos!

www.webdesigntanfolyam.com

Kpkeresk
A Flickr-en kvl tbb szz kpkeres, kpmegoszt ltezik, ahonnan szabadon, vagy a fenti korltozsokkal letlthetsz kpeket, grafikkat. Minden esetben olvasd el az oldal feltteleit, vagy a fot melletti lerst, mert rendkvl vltozatosak

Csak nhny:
http://sxc.hu (magyar fejleszts, kb. 350.000 kpbl vlogathatsz) 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 prhuzamosan ltezik egy msik, a szerzi jog al es mvek felhasznlsra ltrehozott szervezet, s megjells - ez a Creative Commons. Jval tgabb felhasznlsi formkat, vltozatos licenceket hoztak ltre az ersen klnbz jogvdett tartalomak jellsre. A jelrendszer ma mr nemzetkzileg teljesen elfogadott, s rthet - Ne add el! Nevezd meg! vagy Ne vltoztasd! http://hu.wikipedia.org/wiki/Creative_Commons Visszatrve a kpekre - azon kpek felhasznlsa ahol All rights reserved Copyright vagy ehhez hasonl feliratok vannak, csak a szerz engedlyvel hasznlhatak fel. Ha nagyon ragaszkodsz egy kphez, s utolrhet a szerz, egybknt lehet, hogy hozzjrul, ha megmondod hol szeretnd hasznlni a kpet! Nekem pr hnapja rt egy hlgy, szeretn ezeket a rozsds kpeim felhasznlni versesktetek illusztrlsra. Egy jelkpes tiszteletdjat is felajnlott - 50 EUR, amelyet nhny nap mlva meg is kaptam.

Tanulmnyozd a Creative Commons licenszet, mert pl. a Flickr kpmegosztn csodlatos, kreatv fotkat tallsz felhasznlhat megjellssel. http://www.flickr.com/creativecommons/ A Flickr-hez nagyon sok alkalmazs ltezik, itt tallsz prat lerssal: http://spottr.hu/2009/01/28/keressunk-a-flickren-maskepp/ http://www.airtightinteractive. com/projects/related_tag_browser/app/

www.webdesigntanfolyam.com

Kpvsrls
A stock fotk elregyrtott kpek, amelyekre komoly iparg plt. Ezeket a kpeket nem csak webszjtokon, hanem reklmokban, jsgokban, plaktokon, csomagolsokon s mg millinyi helyen felhasznljk a vilg minden tjn. Nem csak fotk, hanem videk, animcik, hanganyagok s vektoros grafikk, instant arculati elemek is megvsrolhatak. http://www.pixmac.hu http://www.dreamstime.com/res2124307-free-photos http://www.istockphoto.com A legismertebb kp piac. Nem olcs - ha gyorsan kell, j minsg illusztrci minden pnzt megr, ha nem kell 2 napig keresglned egy kpet! Ne felejtsd el, az id pnz! n a kpek 80%-t innen veszem, vagy hasonl oldalakrl, mint a Crestock, vagy a Veer.

www.webdesigntanfolyam.com

Krediteket tudsz vsrolni - egy kp 1-7 kredit ltalban, webes mretben, felhasznlsra. 1 kredit 1 dollr krl van, ami most 200 Ft, szval azrt nem vg a fldhz, s jogtiszta kped van az adott munkra. Fontos! A Royalty Free kpek azt jelentik, hogy a felhasznlsi jogot egy adott munkra vsrolod meg. Ha szeretnd a kpet mshol is felhasznlni, arra is van md a megfelel sszeget kiperklva.

TIPP!

Ha az istock-on vsrolsz kreditet, mindig nzz krl elbb a weben, htha tallsz hasznlhat kupon kdot, amivel tbb kreditet kapsz, vagy kevesebbet kell fizetned a vsrlskor. Keressi kulcsz: istock coupon code, vagy istock photo credit code, s hogy friss tallatot kapj mell rhatod az aktulis vet, hnapot pl. istock coupon code 2012 march

Kpmutatnak tnne, ha azt mondanm, hogy n mindig betartom a szablyokat. Kpmutat... kpzavar. Nagyon nem szeretem a szablyokat, de alkotknt tisztelem annyira a msik munkjt, hogy hivatkozom, megne-vezem a forrst. Mr ha nem felejtem el... Sajnos dvd-szmra llnak az vek sorn sszegyjttt kpeim, amiket ezrt nem tudok hasznlni, ezrt ha nem mented el mell, hogy honnan, mikor szerezted be, mehet is a Lomtr ikonnal jelzett kis mappba, vagy a kukba. Miutn mr idehaza is van irodja a nagyobb kpgynksgeknek, ahol azrt fizetik Micikt, hogy a jogtalanul hasznlt kpekre vadsszon, knnyen jrhatsz gy, hogy kapsz a postn egy szp printscreent, s egy vastag szmlt, visszamenlegesen is. Ha az oldal tulajdonosa nem egyrtelm, a domain tulajdonosa viszont nyilvnos, akkor az perkl, mondjuk Te a grafikusod kplopsa okn - gy fizettem n pr ve 3 db 180x120 kprt kb. 60e Ft-ot.

sszegzs
Minden esetben figyelj oda, milyen forrsbl szrmazik a felhasznland kp, s nem srted-e a szerz jogait! Ms a magncl, s ms a kereskedelmi cl felhasznls. Indulhat a kpkeress!

www.webdesigntanfolyam.com

Feladatok
Ne csak olvasd! Csinld!
Amit a mlthten kaptl feladatot - arculat szne s hozz val bettpus - most tovbb fejlesztjk. Igen, kitalltad, kpekkel fogod kiegszteni! A vgeredmnyt gy hvjk - moodboard, vagyis hangulat tbla - de mg nem rtnk el a vgre...

Mi az a moodboard?
Gyakorlatilag egy kollzs. Ha kapsz egy j kreatv feladatot, rvnyleni kezdenek benned az tletek, sznek, hangulatok. Ez az a fzis, amikor valamifle varzslat kezddik benned. A teremts energii jrjk be a tested a fejed bbjtl, a lbad ujjig. Az ilyenkor felszabadul energik miatt csinljuk az egszet! rzed mr a bizsergst (vagyis a vgyat, hogy ezt rezd?) A moodbooard egy munkafzis. Segt rendezni a gondolatokat, kibogozni a szlakat, kialaktani egy irnyt, s tovbbi inspircikat ad! A marketing egyik alapttele, hogy nem termket, vagy szolgltatst adunk el, hanem rzseket, hangulatokat! Ezt kell lekpezni, kifejezni sznekkel, tipogrfival s kpekkel - egyelre... A hangulattbla nem csak tged segt, hogy csapst vgj ebben a dzsungelben, hanem magaddal viheted az gyfeled, munkatrsaid, grafikusod, fejlesztd! A tbla segtsgvel altmaszthatod a koncepcid, vagy akr tesztelhetsz tbb irnyvonalat anlkl, hogy feleslegesen kellene dolgoznod. Ehhez hasonl inspircis tblkat rengeteg kreatv szakmban hasznlnak a divattervezstl a lakberendezsig - s sokszor ezek a rokon terletek is rengeteg tletet adnak.

www.webdesigntanfolyam.com

Jtszottl mr valamilyen asszocicis jtkot?

Valaki mond egy szt, s te mondasz egy msikat, ami errl eszedbe jut! A moodboard elksztshez pont ugyanezt kell tenned - a meglv informcik alapjn - nyilvn minl tbb van, annl nagyobb a mozgstered - ssze kell szedned a sztszrt tglkat, amibl a vrat feltudod pteni.
Egy drga francia tterem - Le gourmandise a neve Ebben a rvid, egy soros lersban is tbb informci rejlik, mint gondolod. francia, drga, tterem - ha mg nem jrtl ilyenben, akkor is felrmlenek a klnbz filmekbl, msorokbl a mikro adagok, furcsa nev, s mg furcsbb hozzvalkbl kszl nyencsgek. Mert a gourmandise sz nyencsget jelent, a Le gourmandise kifejezs viszont falnksgot, s kapzsisgot is. A francia konyha hres, s puccos - Champaigne, Bordeaux, Bchamel, Croissants, Bor, mmor, Provance.. ami eszedbe jut, mind lerhatod. Gazdagsg - arany, ezst tkszlet, kristlypohr, damaszt tert - A damasztvszon szvse a lentermel orszgokban terjedt el - pldul Franciaorszgban a XIII. szzad kzepe tjn. (Terebess Lexikon) Ha tbb infd van, mondjuk, hogy mennyire drga a drga, klasszikus, vagy ppen ellenkezleg nagyon is mai az tterem stlusa, mris tisztul a kp, vagy folytathatod az asszocicis elmlkedst.

A tbla elksztsre nincs szably - vghatsz ki jsgbl cikkeket, akr ki is tpheted, szkennelhetsz hozz gyrtt trrudi paprt, vagy fotzhatsz dohos, reg falat, de kutakodhatsz a weben, bsges a kpanyag, csak tudni kell megtallni pont ugyanazt, vagy vmi hasonlt ami benned ltrejtt.

A feladat: Kszts sajt moodboardot!

Megint 3 projektet kapsz, picit tbb infval keress szneket, bettpusokat a felirathoz, s 2-3 kpet, illusztrcit is, amely kapcsoldik, s j alap lehet egy leend megjelenshez, weboldalhoz: 1. AngelAir, klmaberendezseket forgalmaz webruhz s szervz. A f clcsoportjuk az olcs kszl-keket keres, leginkbb otthoni, kisirodai felhasznlk. Mennyei rak - ez a szlogenjk. Ingyen szllta-nak az orszg brmely pontjra!

2. Pepetta. Ismt egy tterem. De most egy igazi mediterrn. Minsgi alapanyagkbl dolgoz, autentikus olasz konyha. A sznek adottak, de kiegsztendk, kiegszthetk. A log egybknt innen szrmazik - a lecke fakultatv rsze ennek az oldalnak a tanulmnyozsa.

3. Terra Agrr Kft. mezgazdasgi gpek, pontosabban fejgpek forgalmazsval foglalkozik, piacvezet a trsgben, komoly, az unis plyzatokhoz megfelel arculatot szeretne. Az arculatban nem szeretn ha a tehn alak brmilyen mdon megjelenne. A sok duma helyett ksztettem neked egy lerst, hogyan tudod sszerakni a sajt hangulat tbld. Ha kveted a lpseket, akkor is menni fog, ha mg sosem hasznltad a Photoshop-ot!

www.webdesigntanfolyam.com

Irny a fotbolt!
Photoshopot, de honnan?
Az Adobe Photoshop 30 napos prbaverzija letlthet az adobe.com-rl, aktulisan a CS6 verzi. Letlts Amennyiben rendelkezel Photoshop programmal, gy brmely rgebbi CS, azaz Creative Suit verzi megfelel lesz a feladat elvgzsre! Ha Gimpet, vagy online fotszerkesztt pl. pixlr.com szeretnl hasznlni, azzal is kivitelezhet a feladat, kicsit mskpp nz ki a felletk!

Akkor vgjunk bele!

1. lps
Nyisd meg a felteleptett Photoshopot, s kszts egy j munkafjlt 800x600 mretben, File >> New a httrszn legyen fehr (Background Content: White)

www.webdesigntanfolyam.com

2. lps
A Swatches palettn nyomd meg ezt a kis flet, s a Load Swatchesre kattintva hvd be a letlttt .ase palettdat, amely gy hozzaddik az alap szneidhez. Ha csak a sajt palettd akarod ltni, akkor a Load Swatches helyett a Replace Swatchest vlaszd. Milyen palettkrl van sz? A Sznek cm lecke 2. feladatban gyjtttl ilyen sznpalettkat mr ha megcsinltad :D Lapozz vissza, s szerezd be ket!

3. lps
Keresd meg az Eszkztron az ecset ikont. Az Eszkztr ez a hossz csk baloldalt - az ecset a 8. ikon lefel. Ekkor a kurzorod tvltozik egy ecset formv, amelyet jobb klikkel tudsz megvltoztatni. Akkor eljn ez a kis tbla, ahol a forma, s a mret is vltoztathat. Ha a sznek fl viszed az egeret, egy kis pipettv vltozik, ezzel tudsz sznt felvenni az ecsetedre.

TIPP:

A .pdf-ben hasznld a nagytst! 150%-on jobban megtudod nzni a kpeket!

www.webdesigntanfolyam.com

4. lps
Kszts egy j rteget a Layers dobozban, ezzel a kis ikonnal tusz jabb s jabb rtegeket ltrehozni. A rtegekre azrt van szksg, hogy az egyes elemek kln-kln mozgathatak, s szerkeszthetek maradjanak.

5. lps
Erre az j rtegre vigyl fel az ecsetekkel szneket a palettdrl. Msmilyen ecsetformt is vlaszthatsz!

www.webdesigntanfolyam.com

6. lps
Hozz ltre egy jabb rteget, s vlaszd ki az eszkztron a T ikont, ezzel tudsz feliratokat, szvegeket rni. rd fel a feliratot az ltalad kivlasztott bettpussal, s sznnel. Ezeket a fent tudod varilgatni - pirossal bekereteztem. Most tartunk annl az llapotnl, ami a mltheti feladat volt - szneket s bettpusokat rendeltnk ssze!

7. lps
Hozz ltre jabb s jabb szvegrtegeket, s rd a felirat mell azokat a kulcsszavakat, fogalmakat, amelyek az asszocici sorn eszedbe jutottak - 4-5 db... Kzben ne felejtsd el elmenteni a munkd nha, ha elszll a gped, kezdheted ellrl File >> Save >> moodboard. psd

www.webdesigntanfolyam.com

8. lps
A File >> Open segtsgvel hvd be a programba a kivlasztott fotkat. gyis megtudod ezt tenni, hogy egy msik, nyitott ablakbl egyszeren behzglod a Photoshopba. A megnyitott kpeket pedig a mr eddig elkszlt moodboardodra kell thznod, s mris j rtegknt megjelenik. A kpet behzni az Eszkztr els nyl alak ikonjval lehet, illetve ugyanezzel lehet mozgatni a rtegeken/ layereken lv dolgokat. Ha azt szeretnd, hogy a kp a szvegek al kerljn, akkor viszont magt a Layert kell a legals szintre hzni.

www.webdesigntanfolyam.com

tmretezs: ha a kpek tl nagyok, vedd kisebbre ket behzs eltt az Image >> Image Size segtsgvel, vagy ha mr thztad ket, a Ctrl+T gombok egyttes lenyomsval egy tmretez keretet kapsz, amely cscskeit hzva kisebbre veheted a kprteget. Ha arnyosan akarsz mretezni, kzben javaslom a Shift billenty lenyomst is.

Kszen vagy?
Ments el a munkd .psd formban ha eddig nem tetted, File >> Save >> moodboard.psd, majd ksztsd el a webes .jpg vltozatt a File >> Save for Web Devices >> moodboard.jpg A tmrtsnl hasznld a leckben tanultakat! Gratullok, ksz az els hangulat tbld!

www.webdesigntanfolyam.com