21
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

Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

Embed Size (px)

DESCRIPTION

Képek használata a weben

Citation preview

Page 1: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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épekhasználata

Page 2: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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

Page 3: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

KéptípusokA 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átumokpl. .BMP, .GIF, .PNG, .JPG, .ICO

K

Bittérképes, pixeles képekAz, 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.

JPGA .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.

Page 4: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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.

Page 5: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

GIFKihaló 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?

Page 6: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

PNGPá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, 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 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.

Page 7: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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), .SVGVektorgrafikákkal dolgozik a Flash is, valamint vektorosak az előző anyagban tárgyalt Opentype betű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á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ő.

Page 8: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

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ó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.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 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!

Page 9: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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 jogA 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!

Page 10: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

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ö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.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

Page 11: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

Creative CommonsEzzel 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/

Page 12: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

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 is megvásárolhatóak.

http://www.pixmac.huhttp://www.dreamstime.com/res2124307-free-photoshttp://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.

Page 13: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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

Page 14: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

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

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.

Mi az a moodboard?

Page 15: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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órtté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, mindleí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 - keress színeket, betűtípusokat a felirathoz, és2-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 hangulattáblád. Ha követed a lépéseket, akkor is menni fog, ha még sosem használtad a Photoshop-ot!

Page 16: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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ésNyisd 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)

Page 17: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

2. lépésA Swatches palettán nyomd meg ezt a kis fület, és a Load Swatches-re kattintva hívd be aletöltött .ase palettádat, amely így hozzáadódik az alap színeidhez. Ha csak a saját palettádakarod 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ésKeresd 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 améret is változtatható.

Ha a színek fölé viszed az egeret, egy kis pipettává változik, ezzel tudsz színt felvenni azecsetedre.

TIPP:A .pdf-ben használd a nagyítást! 150%-on jobban megtudod nézni a képeket!

Page 18: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

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é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ésErre az új rétegre vigyél fel az ecsetekkel színeket a palettádról. Másmilyen ecsetformát isválaszthatsz!

Page 19: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

6. lépésHozz 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ésHozz 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

Page 20: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

www.webdesigntanfolyam.com

8. lépésA 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 ugyanezzellehet 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 alegalsó szintre húzni.

Page 21: Online Webdesign Tanfolyam Alapozó leckék 3. rész - Képek

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ávalegy á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!