Webdesigner tanfolyam - Olvass bele a tananyagba!

1,915 views
1,773 views

Published on

www.webdesigntanfolyam.com

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,915
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Webdesigner tanfolyam - Olvass bele a tananyagba!

  1. 1. Színekwww.webdesigntanfolyam.com
  2. 2. “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ármindenki 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 kirakotthús, a paraj azonban feketének tűnt, a krumplik pedig pirosanvilágítottak.Mindenki meghökkent, de a vörös fény máris kékre váltott, s ettől apecsenyék mintha oszlófélben, a krumplik mintha rothadtak lettekvolna.A vendégek étvágya egyszeriben elment. Amikor erre még sárga fénykövetkezett, s a vörösbor olyan lett, mint a sötét olaj, az emberekpedig sárga félholtaknak látták a szomszédjukat, néhány érzékenyhölgy felállt és kisietett az ebédlőből. Senki sem volt képes enni, bára 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árahelyreállt a vidám hangulat az asztal körül.”Johannes Itten - A színek művészete
  3. 3. A színekAz, 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 egyiklegfontosabb eszközünk adta előnyökről. Ahhoz, hogy tisztában legyünk vele, hogymik 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 avizuá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 nemmindegy mit választunk.Ahogy mindenben itt is vannak hagyományok un. konvenciók az egyes területekenhasználandó színekben is.Például a vállalati honlapokon jellemzően az acélkék, fehér, és grafitszürke színeka jellemzőek, ezek stabilitást, megbízhatóságot, biztonságot, üzleti jellegetsugároznak.Egészséggel kapcsolatos weboldalak a természetesség, vitalitás jegyében sokzöldet, napsárgát, és égkéket alkalmaznak, míg az éttermek egyik kedvence abordó, 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évelkecsegtetnek.Még csak a színeknél tartunk, de máris üzeneteket közvetítünk egy non-verbáliscsatornán.
  4. 4. A színkörIsaac Newton termékeny ember volt, a dinamika, és a tehetetlenség törvényénekmegalkotá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.
  5. 5. A színek jelentése, hatásaiA színek mindig, mindenhol hatnak ránk - gondold csak végig, milyen színekethaszná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
  6. 6. Ezek a mi kultúránkra jellemzőek - ha esetleg más országokból is akadnakmegrendelőink, a tervezés során.Egy híres eset a McDonalds éttermek Japán piacra bevezetése. Ugyanis a híresRonald bohóc fehér arca az ő kultúrkörükben a halált jelképezi, ami egy egyébkéntsem 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 elfogadotttermészetességgel ellentétben a modern technológia, a high tech termékek színe.
  7. 7. Keltsd fel a figyelmet színekkel!Figyelemfelkeltés szempontjából a színek sorrendje narancssárga piros sárga zöld kék lilaAzonosíthatóságukat tekintve a színek sorrendje piros zöld sárga fehér kék lilaA figyelmet legjobban a tiszta színek vonják magukra, a kevertek kevésbé piros kék sárga
  8. 8. 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ésaz 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óddaltörténikpl. #RRGGBBEgy-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 FFFF 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 egykettő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épestnyomtatáskor más eredményt kapunk.Magyarul ami bemegy a számítógépbe (szkenner, digitális fényképezőgép stb.) azRGB, ami kijön belőle - nyomtatás, nyomdai kivitelezés - az CMYK.
  9. 9. 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 internetenpedig 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 ahexaszí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 munkalegnagyobb 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úlsok szín használata zavaros, a szemnek fárasztó eredményre vezet. Árnyalato-kat természetesen használhatunk.
  10. 10. 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 mindenmegjelenítő eszközön ugyanazt a színt mutatják. Sajnos ez meglehetősen szűkösskála, mindössze 216 színről tudjuk elmondani, hogy ugyanúgy fog megjelenniminden monitoron, minden böngészőn - főleg, úgy, hogy ezek egyébként több mint16 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, mintaz 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 mamár - az Adobe sajátja a Kuler
  11. 11. 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ála legjobban. Csak kiválasztom, hogy Search Palettes, és esetleg beírok egykulcsszót pl. happy, és máris egy csomó vidám színpalettával kezdhetem agondolkodást, tervezgetést. Nálam mindig ez az első lépés. Lementem a legjobbantetsző palettákat, úgy egy tucatot, amelyek között már ott van az, ami végül anyerő 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? - ésa válaszból a másik tudta hogy dumcsi, sírás, vagy ereszdel a hajam lesz az estiprogram. Sokáig azt gondoltam, hogy mindenki tud színekben, színpalettákbangondolkodni, de idővel rákellett jönnöm, hogy ez is olyan, mint az abszolút zeneihallás. Fogalmakhoz, hangulatokhoz tudok azonnal színkombinációkat gyártani, deegy megasztár hanggal lehet jobban jártam volna.
  12. 12. Nincs ilyen képességed?Cseppet se bánkódj! Ahogy az énekhang, úgy a színérzékenység is fejleszthető, ésfejlesztened 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 Designera legjobb választás.http://colorschemedesigner.comHasználata pofonegyszerű - a már ismert színkörből választja ki a kívántpalettá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, aszínek egymástól egyenlő távolságra vannak a színkörön, így hideg és meleg színekegyaránt vannak a palettán.
  13. 13. Ö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, azaza domináns színek a színkör ellentétes tartományából - a hideg ill. melegtartomá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 akékkel. A színek beszélnek, semmi extra. Egyszerű ez ugye?A Color Scheme Designer további funkcióit is érdemes felfedezni - a Randomfülecske véletlenszerű megoldásokat kínál, a Colorspace fülön pedig Web Colors-rais á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.
  14. 14. 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 genetikaiokokra vezethető vissza, de előfordulhat szem-, ideg- vagy agykárosodás során ésvegyi 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úlvilá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 nincsmegá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 abarlangban éjjel).
  15. 15. SzínkorlátEbbe előbb-utóbb bele kell törődünk, hogy a munkánk nem mindenhol ugyanolyannagyszerű megjelenéssel bír, és sajnos nem ez az egyetlen korlát, a betűtípusokkalugyanez lesz pepitában...Ami azonban nehézkesebb sokszor, elmagyarázni a megrendelőnek, miért néz kimá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élesebbspektumú Adobe RGB. Ezek azok a színprofilok, amelyeket a legtöbb monitoronhaszná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 - azegyiken 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 monitorkalibrá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=88488Termé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 acikkeket:http://www.geeks.hu/tippektrukkok/080507_tft_monitor_kalibralasa_hazilag 2. részben következik: Színek a webdesignban

×