Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Online Webdesign Tanfolyam 3. Képek

1,356 views

Published on

4 részes alapozó lecke, 3. rész

  • Be the first to comment

  • Be the first to like this

Online Webdesign Tanfolyam 3. Képek

  1. 1. ingyenes alapozó leckékKépek használata Pixelgyár Kft. 2012 - Minden jog fenntartva!ingyenes alapozó leckék 3. rész Pixelgyár Kft. 2012 - Minden jog fenntartva!
  2. 2. “Egy fényképet nézni és látni két különdolog. (...)Fényképet nézni bárki tud, de egy fény-képet látni azt jelenti, hogy az emberolvasni tud a képről.Egyfelől adottak az emberek a magukkulturális vívmányaival, másfelől pediga természet. A fák, a tavak, a felhőség a fényképeken általános, mindenkiszá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, azadott időben olvashatók.”Bernlef www.webdesigntanfolyam.com
  3. 3. KéptípusokA kép az kép. Vagy mégsem?K étféle képtípust különböztetünk meg - az egyik a pixelekből álló bittérképes, vagy másnéven 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átumokpl. .BMP, .GIF, .PNG, .JPG, .ICOBitté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
  4. 4. A képen látható, hogy az eredeti 2,76 MB-os kép (amita 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, ésmég egészen jó képminőséget ad vissza.A 30%-os már itt-ott foltos, az 1%-os pedig nagyonpixeles, és teljesen eltüntek olyan részletgazdag terül-etek, mint a szirmok.Ha körvonalas képet, apró részleteket akarszmegmutatni, és mindezt kis méretben, akkornem a legjobb választás - az alsó két képen márerő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
  5. 5. GIFKihaló félben lévő formátum - már nincs szükségarra a fájlméret/sávszélesség spórolásra, amiértannyira 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úlrészletgazdag, viszont mivel nem tömöríti agyonaz adatokat, egyszerű vonalas ábrák, finom árnya-latok, árnyékok nélküli színezésekkel megoldottgrafikákhoz most is tökéletes. Az ún. clipartok ide-jén volt népszerű.Az idegesítő animgifeket mindenki ismeri, még hanem is tud róla.Pörgő postaláda, villogó email, és csillogó HelloKitty az internet hőskorszakát idézik vissza. últ Ez itt a m Ma az animgif egy megállított idő. A kétesa GIF ma 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.“az animgif maga a tökéletes platformközi A technológia fejlődésével a vizuális kommu-médiaformátum.” 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, hirbehozó/Webisztán 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
  6. 6. PNG 24 bit színmélységű (16,7 millió szín),Pár éve lett népszerű ez a formátum. azaz rendkívül részletgazdag - van 8 bitesElőtte kevésbé használták mert az IE6 verzió nem mentésre is lehetőség. A .png kifejezettentámogatta az átlátszó hátterű .png képeket. képernyőre tervezett képformátum, ígyEgyébként a .gif-nek meg lejárt licence. Merthogy a nyomdai CYMK színmódot nem támo-ilyet is lehet. gatja.Már a .gif-eknél is volt átlátszó háttér, de maga Webdesign tervezés során ikonok,az objektum széle “szakszóval: rohadt”, azaz nem ikonkészletek, és részletgazdag fotóksimult a környezetébe. 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, vektorgrafikaMi az a vektor?Egy függvény. Vagyis a képinformációk ez esetben nem adatként a pixelekben tárolódnak, hanem egymatematikai 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
  7. 7. Ez az általam rajzolt vektor lányka ennyi pontból és görbéből áll - valaha pedig egy papír szélén, egyodavetett 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),.SVGVektorgrafikákkal dolgozik a Flash is, valamint vektorosak az előző anyagban tárgyalt Opentypebetűtípsuok is.Pixel vs VektorA 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ű legyenA pixeles képhez viszonyítva a vektoros fájlméret elenyésző, viszont ha túl sok pontból áll, a kirajzolása processzort, memóriát terheli nagyonA 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őlfüggő. www.webdesigntanfolyam.com
  8. 8. Képek a webreAz 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ódonvagy a méretét csökkentjük pixelben - 1600x1200 helyett 800x600, vagy a tömörítését 70%-os .jpg, vagymindkettőt.Mennyi ideig töltötted ezt a képet?http://farm3.static.flickr.com/2401/2045014005_dd60043073_o.jpgVigyá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 atömörítési, és színkezelési beállításokat, kifejezetten az interneten való megjelenésre, de találunk módotezek 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
  9. 9. Képet, de honnan?A legkézenfekvőbb megoldásnak a Googleképkeresője tűnik, de ez egyben a legrosszabb is.A képeket, fotókat, grafikákat, illusztrációkat, ikonokatstb. valakik készítik, és a szerző jogán megilleti őket adö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, amelyetkészítettél, és az nem sérti esetleg már önmagábanmás szerzők jogait.A Google képkeresőjében a legtöbb kép viszont ilyenjogvédelem alatt áll, hiszen azt már valamilyen oldalfelhasználta, vagy saját maga készítette, vagy esetlegmegvásárolta.Még akkor sem használható, ha egyébként ingyeneskép, ha nem ismered az eredeti forrást.Más dolog a letölthető, és más a felhasználható kép.Szerzői jogA szerzői jog a 1999. évi LXXVI. törvényben került rögzítésre, amely rendelkezik arról, hogy mi esikjogvé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.pdfFontos 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ásnyelvekre, akkor elvileg az engedélyed nélkül ez nem lehetséges, és további szerzői jogdíjat kellenekapnod.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_anyucikaTanulságos! www.webdesigntanfolyam.com
  10. 10. KépkeresőkA Flickr-en kívül több száz képkereső, képmegosztó létezik,ahonnan szabadon, vagy a fenti korlátozásokkal letölthetszképeket, grafikákat. Minden esetben olvasd el az oldal felté-teleit, vagy a fotó melletti leírást, mert rendkívül változatosakCsak néhány:http://sxc.hu(magyar fejlesztés, kb. 350.000 képből válogathatsz)http://www.morguefile.comhttp://www.freedigitalphotos.nethttp://www.stockvault.nethttp://www.freephotosbank.comhttp://www.everystockphoto.comhttp://www.woophy.comhttp://finallycreative.com/gallery/http://www.deviantart.comhttp://www.vecteezy.comhttp://www.brusheezy.comhttp://openphoto.nethttp://www.photorogue.comhttp://freerangestock.com www.webdesigntanfolyam.com
  11. 11. 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 Flickrképmegosztón csodálatos, kreatívfotókat találsz felhasználhatómegjelöléssel.http://www.flickr.com/crea-tivecommons/A Flickr-hez nagyon sok alkalmazáslé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
  12. 12. KépvásárlásA 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 ismegvásárolhatóak.http://www.pixmac.huhttp://www.dreamstime.com/res2124307-free-photoshttp://www.istockphoto.comA legismertebb kép piac. Nem olcsó - ha gyorsan kell, jó minőségű illusztráció minden pénzt megér, hanem 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
  13. 13. 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 TIPP! 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 marchKé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ásikmunká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 nemtudok 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, aholazért fizetik Micikét, hogy a jogtalanul használt képekre vadásszon, könnyenjá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 éve3 db 180x120 képért kb. 60e Ft-ot.ÖsszegzésMinden esetben figyelj oda, milyen forrásból származik a felhasználandó kép, ésnem 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! www.webdesigntanfolyam.com
  14. 14. FeladatokNe csak olvasd! Csináld!Amit a múlthéten kaptál feladatot - arculat színe és hozzá való betűtípus - most továbbfejlesztjü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 avégére...Mi az a moodboard?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ésenergiái járják be a tested a fejed búbjától, a lábad ujjáig. Az ilyenkor felszabaduló energiákmiatt 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ábbiinspirá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, hanemmagaddal 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őla lakberendezésig - és sokszor ezek a rokon területek is rengeteg ötletet adnak. www.webdesigntanfolyam.com
  15. 15. Játszottál már valamilyen asszociációs játékot?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órttéglákat, amiből a várat feltudod építeni. “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, dekutakodhatsz a weben, bőséges a képanyag, csak tudni kell megtalálni pont ugyanazt, vagyvmi hasonlót ami benned létrejött.A feladat: Készíts saját moodboardot!Megint 3 projektet kapsz, picit több infóval - 1. AngelAir, klímaberendezéseket forgalmazó we-keress színeket, betűtípusokat a felirathoz, és báruház és szervíz. A fő célcsoportjuk az olcsó2-3 képet, illusztrációt is, amely kapcsolódik, készülé-keket kereső, leginkább otthoni, kisirodaiés jó alap lehet egy leendő megjelenéshez, felhasználók. Mennyei árak - ez a szlogenjük. Ingyenweboldalhoz: szállíta-nak az ország bármely pontjára! 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.2. Pepetta. Ismét egy étterem. De most egyigazi mediterrán. Minőségi alapanyagkból dol- A sok duma helyett készítettem neked egy leírást,gozó, autentikus olasz konyha. hogyan tudod összerakni a saját hangulatA színek adottak, de kiegészítendők, táblád. Ha követed a lépéseket, akkor is menni fog,kiegészíthetők. A logó egyébként innen ha még sosem használtad a Photoshop-ot!származik - a lecke fakultatív része ennek azoldalnak a tanulmányozása. www.webdesigntanfolyam.com
  16. 16. 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ésNyisd meg a feltelepítettPhotoshopot, és készíts egy újmunkafájlt 800x600 méretben,File >> Newa háttérszín legyen fehér(Background Content: White) www.webdesigntanfolyam.com
  17. 17. 2. lépésA Swatches palettán nyomd megezt a kis fület, és a Load Swatches-re kattintva hívd be aletöltött .ase palettádat, amely ígyhozzáadódik az alap színeidhez. Hacsak a saját palettádakarod látni, akkor a Load Swatch-es helyett a Replace Swatchestválaszd.Milyen palettákról van szó?A Színek című lecke 2. feladatábangyűjtöttél ilyen színpalettákat -már ha megcsináltad :DLapozz vissza, és szerezd be őket! TIPP:3. lépés A .pdf-ben használd a nagyítást! 150%-on jobbanKeresd meg az Eszköztáron az megtudod nézni a képeket!ecset ikont.Az Eszköztár ez a hosszú csíkbaloldalt - az ecset a 8. ikon lefelé.Ekkor a kurzorod átváltozik egyecset formává,amelyet jobb klikkel tudsz meg-változtatni. Akkor előjön ez a kistábla, ahol a forma, és améret is változtatható.Ha a színek fölé viszed az egeret,egy kis pipettává változik, ezzeltudsz színt felvenni azecsetedre. www.webdesigntanfolyam.com
  18. 18. 4. lépésKészíts egy új réteget a Layersdobozban, ezzel a kis ikonnal tusz újabb ésújabb rétegeket létrehozni. A rétegekreazért van szükség, hogy az egyes elemekkü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
  19. 19. 6. lépésHozz létre egy újabb réteget,és válaszd ki az eszköztárona T ikont, ezzel tudsz felira-tokat, szövegeket írni. Írd fela 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últhetifeladat volt - színeket ésbetűtípusokat rendeltünkössze!7. lépésHozz létre újabb és újabbszövegrétegeket, és írd a fe-lirat mellé azokat a kulcssza-vakat, fogalmakat, amelyekaz asszociáció során eszedbejutottak - 4-5 db...Közben ne felejtsd el el-menteni a munkád néha, haelszáll a géped, kezdhetedelölről -File >> Save >> moodboard.psd www.webdesigntanfolyam.com
  20. 20. 8. lépésA File >> Open segítsé-gével hívd be a programbaa kiválasztott fotókat. Úgyismegtudod ezt tenni, hogyegy másik, nyitott ablakbólegyszerűen behúzgálod aPhotoshopba.A megnyitott képeket pediga már eddig elkészült mood-boardodra kell áthúznod, ésmáris új rétegként megjele-nik.A képet behúzni az Eszköz-tár első nyíl alakú ikonjávallehet, illetve ugyanezzellehet mozgatni a rétegeken/layereken lévő dolgokat.Ha azt szeretnéd, hogy a képa szövegek alá kerüljön, akkorviszont magát a Layert kell alegalsó szintre húzni. www.webdesigntanfolyam.com
  21. 21. Átméretezés: ha a képektú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ütteslenyomásávalegy átméretező keretetkapsz, amely csücskeit húzvakisebbre veheted a képré-teget. Ha arányosan akarszméretezni, közben javasloma Shift billentyű lenyomásátis.Készen vagy?Ments el a munkád .psdformában ha eddig nem tet-ted, File >> Save >>moodboard.psd, majdkészítsd el a webes .jpg válto-zatát a File >> Save for WebDevices >>moodboard.jpgA tömörítésnél használd aleckében tanultakat!Gratulálok, kész az elsőhangulat táblád! www.webdesigntanfolyam.com

×