webdesigner tanfolyam - olvass bele a tananyagba!

15
Színek www.webdesigntanfolyam.com

Upload: zsuzsanna-toth

Post on 22-May-2015

1.413 views

Category:

Technology


1 download

DESCRIPTION

www.webdesigntanfolyam.com

TRANSCRIPT

Page 1: Webdesigner tanfolyam - Olvass bele a tananyagba!

Színek

www.webdesigntanfolyam.com

Page 2: Webdesigner tanfolyam - Olvass bele a tananyagba!

“Egy nagyiparos társaságot hívott meg magához vacsorára. Az érkező hölgyeket és urakat finom konyhai illatok fogadták, s már mindenki előre örült az ínyenc falatoknak. Amikor a vidám társaság körülülte a nagyszerűen elkészített ételekkel rakott asztalt, a házigazda vörös fényt kapcsolt be. Szép pirosra színeződött, és frissnek hatott a tányérokra kirakott hús, a paraj azonban feketének tűnt, a krumplik pedig pirosan világítottak. Mindenki meghökkent, de a vörös fény máris kékre váltott, s ettől a pecsenyék mintha oszlófélben, a krumplik mintha rothadtak lettek volna. A vendégek étvágya egyszeriben elment. Amikor erre még sárga fény következett, s a vörösbor olyan lett, mint a sötét olaj, az emberek pedig sárga félholtaknak látták a szomszédjukat, néhány érzékeny hölgy felállt és kisietett az ebédlőből. Senki sem volt képes enni, bár a jelenlévők mind tudták, hogy csak a megvilágítás színének változá-sai okozzák e különös érzéseket. Nevetve kapcsolta be a házigazda a fehér fényt, és nemsokára helyreállt a vidám hangulat az asztal körül.”

Johannes Itten - A színek művészete

Page 3: Webdesigner tanfolyam - Olvass bele a tananyagba!

Az, hogy milyen alapon választunk színeket egy munkához elsősorban a saját ill. a megrendelő döntéshozóinak ízlésvilágától fog függeni. Többnyire ez a jellemző (sajnos).Ez nem túl megalapozott választás, így már a kezdet kezdetén lemondunk az egyik legfontosabb eszközünk adta előnyökről. Ahhoz, hogy tisztában legyünk vele, hogy mik ezek, és esetleg érvelni is tudjunk miért ezeket választjuk, érdemes megvizs-gálni a színeket közelebbről.

A színekről egy egész tudományág szól - a színtan, ill. színdinamika, amely min-den területen megvizsgálja a színek szerepét, és hatását az életünkre. A színek a vizuális kommunikáció alapkövei, amelyek rendkívüli módon hatnak az érzékekre.

Mi köze ennek a weboldalakhoz?Nagyon is sok.

Ha egy színt bármely oknál fogva kiválasztunk, ahhoz különböző értéket, jelentést, kiváltott érzelmeket is kapunk egy csomagban, úgyhogy egyáltalán nem mindegy mit választunk. Ahogy mindenben itt is vannak hagyományok un. konvenciók az egyes területeken használandó színekben is.

Például a vállalati honlapokon jellemzően az acélkék, fehér, és grafitszürke színek a jellemzőek, ezek stabilitást, megbízhatóságot, biztonságot, üzleti jelleget sugároznak.Egészséggel kapcsolatos weboldalak a természetesség, vitalitás jegyében sok zöldet, napsárgát, és égkéket alkalmaznak, míg az éttermek egyik kedvence a bordó, mélyvörös, csokoládébarna, és fekete - ezeken jól mutatnak az ételfotók, kellemes, meleg, barátságos környezettel, és a jóllakottság érzésével kecsegtetnek.

Még csak a színeknél tartunk, de máris üzeneteket közvetítünk egy non-verbális csatornán.

A színek

Page 4: Webdesigner tanfolyam - Olvass bele a tananyagba!

A színkörIsaac Newton termékeny ember volt, a dinamika, és a tehetetlenség törvényének megalkotása mellett a fény tulajdonságait is vizsgálta, és még arra is volt ideje, hogy 1666-ben elkészítse a színkört, amelyet azóta is használunk, és persze kidol-gozza a hozzá tartozó színelméletet.

A színeket ez alapján 3 csoportba osztjuk: elsődleges, másodlagos, és harmadlagos színek.A három elsődleges szín a vörös, a kék és a sárga. Ezek az alapszínek, az összes többi szín ezek keveréséből jön létre. Ha ezekből bármely kettőt összekeverjük, létrejönnek a másodlagos színek, mint a zöld, a lila, és a narancs.A harmadlagos színek pedig az elsődleges és má-sodlagos színek keverékei.

A színkör egymással szemben álló színei (piros-zöld, sárga-kék, lilásvörös-sárgászöld, narancs-vörös-kékeszöld, sárgásnarancs-liláskék) a komplementer színek, amelyek nagyon jól kie-gészítik egymást. Kontrasztjuk akkor érvényesül igazán, ha az egyik túlsúlyba kerül - kiemelésekhez használjuk őket.

Az egymáshoz közel álló, hasonló színek színpárokat alkotnak.

Page 5: Webdesigner tanfolyam - Olvass bele a tananyagba!

A színek jelentése, hatásaiA színek mindig, mindenhol hatnak ránk - gondold csak végig, milyen színeket használnak egy orvosi rendelő várójában, és milyeneket egy bevásárlóközpontban? A színek fokozhatnak, vagy akár csillapíthatnak is érzéseket, mint éhség, vágy, feszültség, nyugalom. A színek oly mértékben befolyásolják érzelmeinket, hangu-latunkat, hogy gyógyításra, kedélyállapot-javítására is használják őket.

» A meleg színek - a színkör egyik felén - a sárgától a liláig találhatóak - pl. vörös, barna, rózsaszín...

» A hideg színek a kör másik fele - kék, zöld, cián, sötétlila stb. » A fehér, szürke és fekete pedig semleges színek.

Az egyes színekhez különböző érzeteket, fogalmakat társítunk:

FEHÉR - egyszerű, tiszta, érintetlenFEKETE - súlyos, nehéz, sötét, titkos, elegáns, drága, halálPIROS - szerelem, szenvedély, veszély, figyelmeztetés, izgalom, az élelmiszer-, impulzus, akció, kalandKÉK - megbízhatóság, siker, komolyság, nyugalom, erő, szakszerűség, hatalomSÁRGA - a kíváncsiság, játékosság, vidámság, szórakozás, irigységLILA - igazságosság, luxus, fantázia, álmok, kétértelműség, bizonytalanság, öreg-ség, vagyonZÖLD - pénz, a természet, állatok, egészségügy, gyógyítás, élet, harmónia, friss-eségRÓZSASZÍN - lágyság, édesség, ártatlanság, fiatalság, gyengédségNARANCS - erő, energia, dominancia, boldogság, kényelem, kreativitás, ünneplés, szórakozás, ifjúság, melegségSZÜRKE - általánosság, közönyösség, fenntartás, visszafogottság, unalomBARNA - föld, természet, lágyság, termékenység, kényelem, stabilitás

Page 6: Webdesigner tanfolyam - Olvass bele a tananyagba!

Ezek a mi kultúránkra jellemzőek - ha esetleg más országokból is akadnak megrendelőink, a tervezés során. Egy híres eset a McDonalds éttermek Japán piacra bevezetése. Ugyanis a híres Ronald bohóc fehér arca az ő kultúrkörükben a halált jelképezi, ami egy egyébként sem az egészségről elhíresült étteremláncnak hatalmas baklövés.Sőt a zöld szín is egészen furcsa jelentéssel bír náluk - a nálunk elfogadott természetességgel ellentétben a modern technológia, a high tech termékek színe.

Page 7: Webdesigner tanfolyam - Olvass bele a tananyagba!

Keltsd fel a figyelmet színekkel!Figyelemfelkeltés szempontjából a színek sorrendje

narancssárga

piros

sárga

zöld

kék

lila

Azonosíthatóságukat tekintve a színek sorrendje

piros

zöld

sárga

fehér

kék

lila

A figyelmet legjobban a tiszta színek vonják magukra, a kevertek kevésbé

piros

kék

sárga

Page 8: Webdesigner tanfolyam - Olvass bele a tananyagba!

Színmódok - RGB, CMYK, és társaikA különböző eszközökhöz különböző színrendszerek tartoznak - a webes tervezés az RGB, vagyis a Red, Green, Blue rendszerre épül, mert a monitor a megjelenő képet ebből a 3 színből rakja össze - un. additív összeadásos móddal.

Az RGB rendszerben a színek meghatározása egy un. hexadecimális kóddal történik pl. #RRGGBB Egy-egy alapszínnek 256 féle árnyalatot adhatunk, így összesen ca. 16,7 millió színárnyalattal gazdálkodhatunk.A színek meghatározása két karakterrel és 16-os, azaz hexadecimális számrend-szerben történik úgy, hogy egy karakter 0 – 9-ig illetve A – F-ig között vehet fel értéket. így alapszínenként a két karakterrel kijön a 256 színárnyalat. A 0 a legsö-tétebb, az F a legvilágosabb árnyalatot jelöli. A 00 00 00 tehát a feketét, az FF FF FF a fehéret és például az FF 00 00 a vöröset jelöli.A HTML kódban a hexadecimális színmeghatározások elé mindig egy kettőskereszt # kerül.A kék színünk tehát így fog kinézni: “#0000FF”

Webes tervezés esetén csak az RGB színmóddal dolgozunk, de jó ha tudsz róla, hogy létezik másmilyen is. A CMYK - vagyis Cian+Magenta+Yellow+blacK a nyom-tatásban használt 4 alapszínre bontást jelenti - un. szubszaktrív kivonásos. En-nek következtében fordulhat elő, hogy a monitoron megjelenített képhez képest nyomtatáskor más eredményt kapunk.Magyarul ami bemegy a számítógépbe (szkenner, digitális fényképezőgép stb.) az RGB, ami kijön belőle - nyomtatás, nyomdai kivitelezés - az CMYK.

Page 9: Webdesigner tanfolyam - Olvass bele a tananyagba!

Te jó ég! Hogy fogom én ezeket megjegyezni?

Először is, nem kell megjegyezned - a gyakran használtak úgyis rögzülnek - de az összes grafikai programban megnézhető az adott szín hexa kódja. Az interneten pedig csillió helyen, a legkülönfélébb táblázatokban lehet megtekinteni őket.Pl: a Wikipédia szócikkében is, ahol további infókat olvashatsz még a témáról,

Színpaletták, színprofilokA webdesigner egyik legjobb barátja a színpaletta, amelyeket ezekből a hexaszínekből állíthatunk össze. A színpaletta határozza meg a megtervezendő munka - legyen az logó, weboldal, vagy bármi más alapszíneit.Ha egy projekthez megtaláltuk a megfelelő színpalettát - kis túlzással a munka legnagyobb részét már elvégeztük, mert erre az alapra már-már magától épül fel.

Egy átlagos paletta 3-6 színből áll. Ennél több színnel ne tervezzünk, mert a túl sok szín használata zavaros, a szemnek fárasztó eredményre vezet. Árnyalato-kat természetesen használhatunk.

Page 10: Webdesigner tanfolyam - Olvass bele a tananyagba!

Míg a print designerek a méregdrága Pantone skálával rohangálnak, a webdesigner-eknek csak egy WebSafe paletta jutott.

Web safe, azaz webbiztos színeknek azokat a színeket nevezzük, amelyek minden megjelenítő eszközön ugyanazt a színt mutatják. Sajnos ez meglehetősen szűkös skála, mindössze 216 színről tudjuk elmondani, hogy ugyanúgy fog megjelenni minden monitoron, minden böngészőn - főleg, úgy, hogy ezek egyébként több mint 16 millió színárnyalat megjelenítésére képesek.

Most akkor csak a WebSafe paletta színei használhatóak?

Csúnya lenne, ha így lenne. Az említett 16 millió szín mind a rendelkezésünkre áll, hallgatólagos beleegyezéssel az iránt, hogy nem lesz mindenhol egyformán szép, de ugyebár a szépségért sok áldozatot meghozunk.

Színpalettákat tartalmaznak a képszerkesztő, és egyéb grafikus szoftverek is, mint az Adobe Photoshop. Munka közben ezekből válogathatunk, de a sztenderd palet-ták mellett saját, egyénileg összeállított palettákból is dolgozhatunk.

Rengeteg színpaletta készítő, generáló, pakolgató weboldal, szoftver létezik ma már - az Adobe sajátja a Kuler

Page 11: Webdesigner tanfolyam - Olvass bele a tananyagba!

Az elkészített palettákat letölthetjük, és beimportálhatjuk a szoftvereikbe. A mások által már létrehozott paletták között is rengeteg szép kollekciót találni.Én személy szerint a Kuler helyet a ColourLovers weboldalát használom, ez inspirál a legjobban. Csak kiválasztom, hogy Search Palettes, és esetleg beírok egy kulcsszót pl. happy, és máris egy csomó vidám színpalettával kezdhetem a gondolkodást, tervezgetést. Nálam mindig ez az első lépés. Lementem a legjobban tetsző palettákat, úgy egy tucatot, amelyek között már ott van az, ami végül a nyerő kombináció lesz.

Ez a kevésbé megalapozott, intuitív módszer - mert tisztában vagyok a színérzékenységemmel.

Egy régi barátnőmmel volt egy játékunk - Milyen színű a hangulatod ma? - és a válaszból a másik tudta hogy dumcsi, sírás, vagy ereszdel a hajam lesz az esti program. Sokáig azt gondoltam, hogy mindenki tud színekben, színpalettákban gondolkodni, de idővel rákellett jönnöm, hogy ez is olyan, mint az abszolút zenei hallás. Fogalmakhoz, hangulatokhoz tudok azonnal színkombinációkat gyártani, de egy megasztár hanggal lehet jobban jártam volna.

Page 12: Webdesigner tanfolyam - Olvass bele a tananyagba!

Nincs ilyen képességed?

Cseppet se bánkódj! Ahogy az énekhang, úgy a színérzékenység is fejleszthető, és fejlesztened is kell!Ha nem akarod magad a még esetleg nem kifejlődött színérzékedre bízni, akkor “tudományos alapokon” is választhatsz színeket. Ehhez a Color Scheme Designer a legjobb választás.

http://colorschemedesigner.com

Használata pofonegyszerű - a már ismert színkörből választja ki a kívánt palettákat - csak jelöld be, hogy Mono, azaz monokróm - egy szín több árnyalata - vagy esetleg Complement, azaz komplementer - egymásnak szemben álló, kontrasztos palettában gondolkodsz például.A Triad - Tetrad beállítások pedig harmadolós/negyedelős színsémát jelentenek, a színek egymástól egyenlő távolságra vannak a színkörön, így hideg és meleg színek egyaránt vannak a palettán.

Page 13: Webdesigner tanfolyam - Olvass bele a tananyagba!

Összkép szempontjából nagyon fontos tényező: a kontraszt.

A színeket úgy érdemes összeválogatni, hogy erős kontrasztot hozzanak létre, azaz a domináns színek a színkör ellentétes tartományából - a hideg ill. meleg tartományból kerüljenek ki.

Ez az oldal jó példa a komplementer színek egyszerű használatára. Felhívja a figyelmet a narancs színnel, és egyben bizalmat, együttérzést ébreszt a kékkel. A színek beszélnek, semmi extra. Egyszerű ez ugye?

A Color Scheme Designer további funkcióit is érdemes felfedezni - a Random fülecske véletlenszerű megoldásokat kínál, a Colorspace fülön pedig Web Colors-ra is átállíthatjuk, így a már említett webbiztos színekből generál csak színeket. A további Pantone, ill. Ral beállítások webes szempontból nem érdekesek - nyom-tatásba szánt dolgoknál használják őket.Ami még érdekes viszont a Colorblind fülecske, amely a különböző színtlátási za-varokra ajánl palettákat.

Page 14: Webdesigner tanfolyam - Olvass bele a tananyagba!

A színvakság és a színtévesztés a színlátás zavara az emberi szervezetben. A színvakok és színtévesztők nem tudnak különbséget tenni olyan színek között, amelyeket az egészséges emberek eltérőként érzékelnek. Jellemzően genetikai okokra vezethető vissza, de előfordulhat szem-, ideg- vagy agykárosodás során és vegyi hatásra is - írja a Wikipédia.

Drágám, melyik függönyt válasszuk a cikláment, vagy a püspöklilát? Esetleg a lime? Nem túl világos?

Hö? A lime az egy gyümölcs, a zöld meg egy szín! - mondja erre a férfi. Jellemzően a férfiak “fogyatékossága” ez, amellyel egyébként akkor is rendelkeznek, ha nincs megállapítva róluk, hogy színvakok.Egyszerűen kívül esik az érdeklődési területükön, hogy ilyesmivel foglalkozzanak - ez talán ősemberes hozomány is - a vadászathoz nincs szükség a színek ilyen fokú megkülönböztetésére, míg a bogyószedéshez elkél (a sötétpiros ehető, a narancssárgától viszont baromi büdös lesz a barlangban éjjel).

Page 15: Webdesigner tanfolyam - Olvass bele a tananyagba!

Színkorlát

Ebbe előbb-utóbb bele kell törődünk, hogy a munkánk nem mindenhol ugyanolyan nagyszerű megjelenéssel bír, és sajnos nem ez az egyetlen korlát, a betűtípusokkal ugyanez lesz pepitában...Ami azonban nehézkesebb sokszor, elmagyarázni a megrendelőnek, miért néz ki másképp az irodai és az otthoni gépén az oldala...

Miért is?

Az internet színmegjelenítésének szabványa az sRGB, esetleg a szélesebb spektumú Adobe RGB. Ezek azok a színprofilok, amelyeket a legtöbb monitoron használnak, de a dologba belekavar a a monitorhoz gyárilag készített színkezelő profil, sőt az egyes böngészők színkezelése, a felhasználói egyéni beállítások stb. úgyhogy egy kordinálatlan katyvasz az egész.

Próbáld ki, hogy egy fotót küldj el másoknak, és nézd meg a barátaid gépén is - az egyiken fakó lesz, a másikon szürkés, a harmadikon sötét...

Hogy megfelelő monitorbeállításaink legyenek (legalább nekünk), a monitor kalibrálására van szükség, méghozzá a webes környezethez alkalmazkodva.Miután egy ilyen kalibrációs eszköz pár-sok-százezer forintocska, egy kalibrációs ábra is megteszi - kövesd a rajta lévő utasításokat.

Sosem látott részleteket fedezhetsz fel :)http://fotozz.hu/fotot_megmutat?Foto_ID=88488

Természetesen ez még nem a tökéletes megoldás.

Ha bővebben érdekelnek a színprofilok, a monitor kalibráció, olvasd el ezeket a cikkeket:http://www.geeks.hu/tippektrukkok/080507_tft_monitor_kalibralasa_hazilag

2. részben következik: Színek a webdesignban