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 1. Színek

3,483 views

Published on

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

Published in: Design
  • Be the first to comment

Online Webdesign Tanfolyam 1. Színek

  1. 1. Színek alkalmazásaingyenes alapozó leckék 1. rész Pixelgyár Kft. 2012 - Minden jog fenntartva!
  2. 2. “Egy nagyiparos társaságot hívott megmagához vacsorára.Az érkező hölgyeket és urakat finomkonyhai illatok fogadták, s már mindenkielőre örült az ínyenc falatoknak. Amikora vidám társaság körülülte a nagyszerűenelkészített ételekkel rakott asztalt, aházigazda vörös fényt kapcsolt be. Széppirosra színeződött, és frissnek hatott atányérokra kirakott hús, a paraj azonbanfeketének tűnt, a krumplik pedig pirosanvilágítottak.Mindenki meghökkent, de a vörös fénymáris kékre váltott, s ettől a pecsenyékmintha oszlófélben, a krumplik mintharothadtak lettek volna. A vendégek ét-vágya egyszeriben elment. Amikor erremég sárga fény következett, s a vörösborolyan lett, mint a sötét olaj, az emberekpedig sárga félholtaknak látták a szom-szédjukat, néhány érzékeny hölgy felálltés kisietett az ebédlőből. Senki sem voltképes enni, bár a jelenlévők mind tud-ták, hogy csak a megvilágítás színénekváltozásai okozzák e különös érzéseket.Nevetve kapcsolta be a házigazda a fehérfényt, és nemsokára helyreállt a vidámhangulat az asztal körül.”Johannes Itten - A színek művészete www.webdesigntanfolyam.com
  3. 3. A színekMilyen módon válasszunk színeket a logónkhoz,honlapunkhoz?L egtöbben a saját ízlésük alapján hozzák meg ezt a fontos döntést, 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 megvizsgá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 minden területen megvizsgáljaa színek szerepét, és hatását az életünkre. A színek avizuális kommunikáció alapkövei, amelyek rendkívülimódon hatnak az érzékekre.Ha egy színt bármely oknál fogva kiválasztunk, ahhozkülönböző értéket, jelentést, kiváltott érzelmeket iskapunk egy csomagban, úgyhogy egyáltalán nem mind-egy 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, ezekstabilitást, megbízhatóságot, biztonságot, üzleti jel-leget sugároznak.Egészséggel kapcsolatos weboldalak a természetesség,vitalitás jegyében sok zöldet, napsárgát, és égkéketalkalmaznak, míg az éttermek egyik kedvence a bordó,mélyvörös, csokoládébarna, és fekete - ezeken jólmutatnak az ételfotók, kellemes, meleg, barátságoskörnyezettel, és a jóllakottság érzésével kecsegtetnek.Még csak a színeknél tartunk, de máris üzeneteketközvetítünk egy non-verbális csatornán. www.webdesigntanfolyam.com
  4. 4. A színkörI saac 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 kidolgozza a hozzá tartozó színelméletet.Alapszínek A színeket ez alapján 3 csoportba osztjuk: elsődleges, másodlagos, és har- madlagos 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.Komplementer színek 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, narancsvörös-kékeszöld, sárgásnarancs-liláskék) a komplementer színek, amelyek nagyon jól kiegészítik egymást. Kontrasztjuk akkor érvényesül igazán, ha az egyik túlsúlyba kerül - kiemelésekhez használjuk őket.Színpárok Az egymáshoz közel álló, hasonló színek színpárokat alkotnak. www.webdesigntanfolyam.com
  5. 5. A színek 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, nyuga- lom. A színek oly mértékben befolyásolják érzelmeinket, hangulatunkat, 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áigtalálhatóak - pl. vörös, barna, rózsaszín... Ezek a mi kultúránkra jellemzőek - haA hideg színek a kör másik fele - kék, zöld, cián, sötétlila esetleg más országokból is akadnak akadnak ügyfeleink, érdemes odafi-stb. gyelni, milyen jelentéssel bír egy-egyA fehér, szürke és fekete pedig semleges színek. szín.Az egyes színekhez különböző érzeteket, fogalmakat Egy híres eset a McDonalds éttermektársítunk: Japán piacra bevezetése. Ugyanis a híres Ronald bohóc fehér arca az őFEHÉR - egyszerű, tiszta, érintetlen kultúrkörükben a halált jelképezi, ami egy egyébként sem az egészségrőlFEKETE - súlyos, nehéz, sötét, titkos, elegáns, drága, elhíresült étteremláncnak hatalmashalál baklövés.PIROS - szerelem, szenvedély, veszély, figyelmeztetés,izgalom, az élelmiszer, impulzus, akció, kaland Sőt a zöld szín is egészen furcsaKÉK - megbízhatóság, siker, komolyság, nyugalom, erő, jelentéssel bír náluk - a nálunk elfoga-szakszerűség, hatalom dott természetességgel ellentétbenSÁRGA - a kíváncsiság, játékosság, vidámság, a modern technológia, a high tech termékek színe.szórakozás, irigységLILA - igazságosság, luxus, fantázia, álmok,kétértelműség, bizonytalanság, öregség, vagyonZÖLD - pénz, a természet, állatok, egészségügy,gyógyítás, élet, harmónia, frissesé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, A színek jelentésétmelegségSZÜRKE - általánosság, közönyösség, fenntartás, gyakran szokásaink,visszafogottság, unalom társadalmi, vallásiBARNA - föld, természet, lágyság, termékenység,kényelem, stabilitás tényezők befolyásolják! www.webdesigntanfolyam.com
  6. 6. A fókuszFigyelemfelkeltésszempontjából aszínek sorrendje: 1. 3. 5. 2. 4. 6.Azonosíthatóságukattekintve a színek sor-rendje: 1. 3. 5. 2. 4. 6.A figyelmet legjobbana tiszta színek vonjákmagukra, 1. 2. 3.a kevertek kevésbé: www.webdesigntanfolyam.com
  7. 7. SzínmódokRGB, vagy CMYK? eszik azt, vagy isszák?A 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, Te jó ég! mert a monitor a megjelenő képet ebből a 3színből rakja össze - un. additív összeadásos móddal. Hogy fogomAz RGB rendszerben a színek meghatározása egy un. ezeket megjegyezni?hexadecimális kóddal történikpl. #RRGGBBEgy-egy alapszínnek 256 féle árnyalatot adhatunk,így összesen ca. 16,7millió színárnyalattalgazdálkodhatunk.A színek meghatározása Először is, nem kell meg-két karakterrel és 16- jegyezned - a gyakranos, azaz hexadecimális használtak úgyis rögzülnekszámrend- szerben - de az összes grafikai pro-történik úgy, hogy egy gramban megnézhető azkarakter 0 – 9-ig illetve adott szín hexa kódja. AzA – F-ig között vehet fel interneten pedig csillió he-értéket. így alapszínenként a két karakterrel kijön a 256 lyen, a legkülönfélébb táblázatokban le-színárnyalat. A 0 a legsö- tétebb, az F a legvilágosabb het megtekinteni őket. Pl: a Wikipédiaárnyalatot jelöli. A 00 00 00 tehát a feketét, az FF FF FF szócikkében is, ahol további infókata fehéret és például az FF 00 00 a vöröset jelöli. olvashatsz még a témáról.A HTML kódban a hexadecimális színmeghatározásokelé 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 dol-gozunk, de jó ha tudsz róla, hogy létezik másmilyenis. A CMYK - vagyis Cian+Magenta+Yellow+blacK anyomtatásban használt 4 alapszínre bontást jelenti - un.szubszaktrív kivonásos. Ennek következtében fordul-hat 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.) az RGB, ami kijön belőle -nyomtatás, nyomdai kivitelezés - az CMYK. www.webdesigntanfolyam.com
  8. 8. SzínpalettákA tervező legjobb barátja a színpaletta!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ín-palettát - kis túlzással a munka legnagyobb részét márelvégeztük, mert erre az alapra már-már magától épülfel.Egy átlagos paletta 3-6 színből áll. Ennél több színnelne tervezzünk, mert a túl sok szín használata zavaros,a szemnek fárasztó eredményre vezet. Árnyalatokattermészetesen használhatunk. http://kuler.adobe.comMíg a print designerek a méregdrága Pantone skálávalrohangálnak, a webdesignereknek csak egy WebSafe Az elkészített palettákat letölthetjük, és beimpor-paletta jutott. tálhatjuk a szoftvereikbe. A mások által már létrehozott paletták között isWeb safe, azaz webbiztos színeknek azokat a színeket rengeteg szép kollekciót találni.nevezzük, amelyek minden megjelenítő eszközönugyanazt a színt mutatják. Sajnos ez meglehetősen Én személy szerint a Kuler helyet a ColourLoversszűkös skála, mindössze 216 színről tudjuk elmondani, weboldalát használom, ez inspirál a legjobban.hogy ugyanúgy fog megjelenni minden monitoron, Csak kiválasztom, hogy Search Palettes, és eset-minden böngészőn - főleg úgy, hogy ezek egyébként leg beírok egy kulcsszót pl. happy, és máris egy csomó vidámMost akkor csak 216 színt színpalettával kezdhetem a gondolkodást,használhatsz? tervezgetést. Nálam mindig ez az első lépés. Lementem a legjobban tetsző palettákat, úgy egyCsúnya lenne, ha így lenne. Az említett 16 millió szín tucatot, amelyek között már ott van az, ami végülmind a rendelkezésünkre áll, hallgatólagos beleegyezés- a nyerő kombináció lesz.sel 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ébgrafikus szoftverek is, mint az Adobe Photoshop. Mun-ka közben ezekből válogathatunk, de a sztenderd palet-ták mellett saját, egyénileg összeállított palettákból isdolgozhatunk.Rengeteg színpaletta készítő, generáló, pakolgatóweboldal, szoftver létezik ma már - az Adobe sajátja a http://www.colourlovers.com/palettes/Kuler search?query=happy www.webdesigntanfolyam.com
  9. 9. SzínérzékenységAz meg mi? Nézzük!T inilányként a barátnőimmel 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 ereszd el 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ön-nöm, hogy ez is olyan, mint az abszolút zenei hallás.Fogalmakhoz, hangulatokhoz tudok azonnal színkom-binációkat gyártani, de egy megasztár hanggal lehetjobban jártam volna.Nincs ilyen képességed?Cseppet se bánkódj! Ahogy az énekhang, úgy aszínérzékenység is fejleszthető, és fejlesztened is kell!Ha nem akarod magad a még esetleg nem kifejlődöttszínérzékedre bízni, akkor “tudományos alapokon” isválaszthatsz színeket. Ehhez a Color Scheme Designera legjobb választás.Használata pofonegyszerű - a már ismert színkörbőlválasztja ki a kívánt palettákat - csak jelöld be, hogyMono, azaz monokróm - egy szín több árnyalata - vagyesetleg Complement, azaz komplementer - egymásnakszemben álló, kontrasztos palettában gondolkodsz pé-ldául. A Triad - Tetrad beállítások pedig harmadolós/ http://colorschemedesigner.com/negyedelős színsémát jelentenek, a színek egymástólegyenlő távolságra vannak a színkörön, így hideg és me-leg színek egyaránt vannak a palettán.A Color Scheme Designer további funkcióit is érdemesfelfedezni - a Random füle e véletlenszerű megoldáso-kat kínál, a Colorspace fülön pedig Web Colorsra is átál-líthatjuk, így a már említett webbiztos színekből generálcsak színeket.Ami még érdekes viszont a Colorblind fülecske, amely akülönböző színtlátási zavarokra ajánl palettákat. www.webdesigntanfolyam.com
  10. 10. A fókuszA színekkel terelt figyelemÖ sszkép szempontjából nagyon fontos tényező: a kontraszt. A színeket úgy érdemes összeválogatni, hogyerős kontrasztot hozzanak létre, azaz a domináns színeka 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 bizal-mat, együttérzést ébreszt a kékkel. A színek beszélnek,semmi extra. Egyszerű ez ugye? tt. k közö a pöttyö ll látnod s meg-A kontraszt megragadja a figyelmet, és oda tereli, á mot ke r é rdeme Egy sz l, akko m vagy -eahová csak szeretnéd, ha jól használod. Ez a fókusz - isme red fe tve ne Ha nem , ille esztő! látásod színtévvagyis a figyelem középpontja. atni a vizsgált A színtévesz- tés tesztelését egy mobil al- kalmazással is elvégezheted! Androidra is láttam, keresd a Marketben!A színvakság és a színtévesztés a színlátás zavara az em-beri szervezetben.A színvakok és színtévesztők nem tudnak különbségettenni olyan színek között, amelyeket az egészségesemberek eltérőként érzékelnek. Jellemzően genetikaiokokra vezethető vissza, de előfordulhat szem-, ideg-vagy agykárosodás során és vegyi hatásra is - írja aWikipédia. www.webdesigntanfolyam.com
  11. 11. Most kajárólbeszél? 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? Ööööö... A lime az egy gyümölcs, a zöld meg egy szín! - mondja erre a férfi. Jellemzően a férfiak “fog- yatékossága” ez, amellyel egyéb- ké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 foglal- kozzanak - ez talán ősemberes ho- zomány is - a vadászathoz nincs szükség a színek ilyen fokú megkülön- böztetésére, míg a bogyószedéshez elkél - a sötétpiros ehető, a narancs- sárgától viszont baromi büdös lesz a barlangban éjjel!http://parka.deviantart.com www.webdesigntanfolyam.com
  12. 12. KalibrációDolgozzunk jól beállított eszközökkel!SzínkorlátE bbe 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 kor- lát, a betűtípusokkalugyanez van pepitában...Miért is?Az internet színmegjelenítésének szabványa az sRGB,esetleg a szélesebb spektumú Adobe RGB. Ezek azok aszínprofilok, amelyeket a legtöbb monitoron használnak,de a dologba belekavar a a monitorhoz gyárilag készítettszí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 egykordinálatlan katyvasz az egész.Próbáld ki, hogy egy fotót küldj el másoknak, és nézdmeg a barátaid gépén is - az egyiken fakó lesz, a másikonszürkés, a harmadikon sötét...Hogy megfelelő monitorbeállításaink legyenek (legalábbnekünk), a monitor kalibrálására van szükség, méghozzá awebes környezethez alkalmazkodva.Miután egy ilyen kalibrációs eszköz pár-sok-százezer fo-rintocska, egy kalibrációs ábra is megteszi kezdetnek -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 kali-bráció, olvasd el ezeket a cikkeket:http://www.geeks.hu/tippektrukkok/080507_tft_moni-tor_kalibralasa_hazilag www.webdesigntanfolyam.com
  13. 13. SzínösszeállításokSzínek a webdesignbanM ár egy csomó mindent tudsz a színekről, és még mindig semmit sem tudsz a színekről? Bizonyos esetekben már eltudod dönteni, hogy egy szín odavaló-e vagy sem, hisz megismerkedtél a színekkel, azok jelentésével, tudod melyek azok amelyekkel a figyelem felkelthető.Vannak kialakult színkezelési, tervezési szokások, amelyeket előbb ismerj meg, mielőtt úgy döntesz, hogyfelrúgod!FEHÉRA legtöbb oldalnak fehér az alapszíne, en-nek két alapvető oka van - egyrészt alegolvashatóbb a fehér alapon feketeszöveg, főleg ha hosszú szövegről van szó -pl. cikkekA fehér alappal rendelkező oldalon a képekis megfelelő, kiemelő hátteret kapnak, sőtaz egyes képformátumok okozta problémák- cakkos szélek - is kiküszöbölhetőek vele.A fehér minden más színnel működik, egyesszíneket kiemel, másokat tompít.A webdesign stílusok közül a minimal na-gyon népszerű, ezen oldalak legtöbbszörfehér vagy fekete alappal, sok kontraszttal,és a nevéből is adódóan minimális grafikaielemmel, egyszerűen, mégis harmónikusanjelenítik meg a kívánt tartalmat.A szabadon hagyott fehér felületeknekráadásul van egy olyan tulajdonságuk, hogyodavonzzák a szemet.Ez az un. white space.Sokan szeretik kitöltetni az egész felületet,pedig az okosan használt “üres” részek Jellemzően fehér oldalak:tartják egyensúlyban az összképet, és veze-tik a látogató figyelmét, és a tartalomra hírportálok - index.hu, hvg.hu, origo.hu, nytimes.comösszpontosítanak. márkaoldalak - apple.com egészségügyi oldalak, orvosok honlapjai www.webdesigntanfolyam.com
  14. 14. FEKETEEgy fekete alapra már néhány elemmel isvizuális csodát lehet művelni, de pont ezértnagyon nehéz elkészíteni, megtalálni azt,hogy mi az ami még nem túl sok, és nem istúl kevés.Az egyik legnehezebb 3 vonalból, és kétképből olyan egységet létrehozni, mintpéldául a luxusmárkák oldalai, amelyekelőszeretettel használják a sötét tónusokat,mint az elegancia, és a drága, minőségi hol-mik jelképe.Fekete alapon a fehér ill. a sárgás szövegolvasható a legjobban, de fekete alapracsak rövid szövegeket tegyünk - fárasztjaa szemet, rontja a koncentrációt, ellenbengyönyörűen kiemeli a fotókat.Jellemzően fekete oldalak: luxusmárkák, sportmárkák fotósok portfoliói üzleti oldalakARANY ÉS EZÜSTA monitoron nincs ezüst, vagy arany szín(csak fényképen) -csak valami hasonló árnyalat - de a Photo-shop segítségével létrehozhatunk fémes ha-tású designokat. Ezekkel azonban érdemescsínján bánni, mert az exkluzívnek szántmegjelenés könnyebben válhat gagyivá,erőltetetté, mint más esetben.Ahogy az ékszereket, úgy ezeket a színeketis leginkább kiegészítőként használjuk -gombok, kiemelések, ikonok, ill. háttérele-mekként, és főleg a semleges alapokon- tehát fehéren, feketén, és szürkén mutat-nak jól. www.webdesigntanfolyam.com
  15. 15. PIROSA legerősebb szín, kevesen mernek pirosweboldalt készíttetni, még akkor sem, ha azarculat fontos eleme ez a szín. És valóbannagy merészség kell hozzá, de aki mer, azmég nyerhet is.A piros élettel tölti meg a felületeket, din-amizmust, melegséget sugároz, felhívja afigyelmet.Erre a színre különösen odafigyelünk, ígypiros jelzésekkel úgy végigvezethetjük azoldalon a látogatót, hogy észre sem veszi,hogy már pakolja is a kosarát.Érvek és ellenérvek: • a látogató garantáltan emlékezni fog rá, szinte beleég a memóriájába kontra bár az oldalra emlékszik, annak tartalmára nem • a vörös szín gyorsan hat az érzékekre, vérnyomás emelkedést, izgalmat okoz, de kiválthat dühöt is, zavarodottá, zaklatottá tehet • a piros elemek az oldalon odavonzzák a tekintetet, kiemelik amit ki akarunk emelni - azonban előfordulhat - a túl sok piros “kiégeti” azaz fárasztja a szemetA piros jelzés Jellemzően piros/bordó oldalak: • Bármilyen weboldalon a piros jelölés élelmiszerekkel kapcsolatos honlapok gyakran jelent tiltást, törlést, vagy figyel- éttermek, bárok meztetést, hibaüzenetet, ezek helyes színházak, zenészek használatára mindenképpen figyeljünk erotikus oldalak, szexshopok oda! www.webdesigntanfolyam.com
  16. 16. NARANCSA piros és a sárga keveréke, azok tulajdon-ságait örökölte. Ez a szín pont olyan, mint agyümölcs, amelyről a nevét kapta. Vidám,napsütötte, egészséges, játékos, élénk. Apirosnál kevésbé durva, nem csap arcon, demég mindig eléggé figyelemfelkeltő.A narancsszín nagyon jól működik szürké-vel, kiegészíti a zöldet vagy a kéket, és talánsosem gondolnád, de a pinkkel is jó párostalkot.A következő oldal jó példa arra, hogy olyannincs, hogy nem illenek össze bizonyosszínek - maximum nem azt a hatást keltik,amit várunk :DA suhanó autók képe fokozza a színek dina-mizmusát, az elrendezés nem mindenna-pos, trendi, fiatalos.Jellemzően narancssárga oldalak: webáruházak szeretik alkalmazni kiegészítőszínként, elvezeti a felhasználót a kosárig reklámügynökségek események, rendezvények (nyári/őszi)SÁRGANehéz eset, ezért igen ritka is a sárga színre épülő weboldal. Szürkével, és feketével erős kontrasztot alkot,ami annyira világít, hogy gyakran használják ezt a kombinációt építőiparban, biztonságtechnikai cégeknél,ill. figyelmeztetésekhez!Fehérrel pedig olyan fényes, akár a napsugár. Életerős, vidám szín, mégis kevesen szeretik, főleg a világosváltozatait. Irigységet, féltékenységet, komolytalanságot is sugallhat.A sárga hat ránk fizikailag is - türelmetlenné tesz, azt mondják egy sárga szobában többet sírnak acsecsemők. Hogy ez igaz-e vagy sem, azt nem tudom, nálunk nem sárgák a falak, mégis sírtak - de a túl soksárga nem túl barátságos, ezért érdemes más színekkel tompítani ezt a hatását.Pirossal, naranccsal, barnával meleg, mediterrán, kellemes vizuális környezetet lehet létrehozni, míg a vilá-gossárga zölddel, kékkel naturális, természetközeli, friss hatást kelt. www.webdesigntanfolyam.com
  17. 17. www.webdesigntanfolyam.com
  18. 18. RÓZSASZÍNA pink árnyalatok a csajoknak és ababáknak lettek leosztva. Lehet halvány,szűziesen ártatlan, édibédi, cukormázas,érintetlen, éretlen, nőies, csajos, de dögösis, és közben végtelenül elcsépelt.Azért van néhány cég, amely arculatának isezt a színcsaládod választotta -a Telekom/T-com/T-Mobile egyenesenmegvett, azaz levédetett egy színárnyala-tot a magentából - szóval ne próbálj megmég hasonló árnyalattal sem telekommu-nikációs céget indítani, mert lekapnak atízkörmödről rögtön - de ne is tervezz ilyencégnek ilyen arculatot, mert a kukában, és abíróságon végzi.A Telekom weboldalak kitűnő állator-vosi lovak, úgyhogy még fogsz velük nemkövetendő példaként találkozni.Ezt a színt lehet utálni, lehet szeretni, egyetnem lehet - nem odafigyelni rá. Tehát eza sötétrózsaszín nem csak babás, hanemrendkívül erős márkaépítő hatású.Hihetetlen jó páros szürke/fekete árnyala-tokkal. Jellemzően rózsaszín oldalak: nőknek szóló tartalmak kisbabákkal kapcsolatos tartalmak, webáruházak, fórumok női divat, trend blogok party, rendezvény site-ok www.webdesigntanfolyam.com
  19. 19. KÉKThis is a business.A kék klasszikus üzleti szín. Ha megfigyeled,rengeteg pénzügyi, informatikaimammutvállalat valamilyen fáradtkék szín-nel pozicionálja magát - bizalom, meg-bízhatóság, biztonság, hatalom, erő, pénz,innováció, modern, professzionális, high-tech...Világosabb árnyalatai, pasztell környezet-ben szintén kedveltek a gyerekeknek,gyerekekről szóló oldalak esetén - a tisz-taságot, az új életet, a természetességetsugallva - gyógyszertárak, magánklinikákhonlapjain is találkozni a “megnyugtató”kórházkékkel és zölddel. Jellemzően kék oldalak: férfiaknak szóló tartalmak - üzlet, sport ügyvédek, jogászok informatikai vállalatok orvosok, kórházak, egészségmegőrzés www.webdesigntanfolyam.com
  20. 20. ZÖLDZöld, mint a föld. Vagyis a fű.Mindenképpen vissza a természetbe.A zöld szín frissességet, újat, harmóniát,békét, természetességet tükröz. Jellemzően zöld oldalak: egészség, egészségvédelem, ter- mészetgyógyászat környezetvédelem, zöld beszerzések, megújuló energia biogazdaság, bioételek mezőgazdaság, agrár póker, szerencsejáték oldalak - feke- tével, pirossal karöltve www.webdesigntanfolyam.com
  21. 21. LILAKeveset használt szín, az emberek többségenem is nagyon szereti. Van aki nem is tekintiszínnek - kéknek vagy rózsaszínnek nézik,árnyalattól függően.Igényfelméréskor - tehát amikor egyeztetszaz ügyféllel, mit szeretne - gyakran megkér-dezem, milyen színt preferálnak az oldalon,és melyiket ne alkalmazzuk semmiképpen.Az utóbbira legtöbbször a lila a válasz.Mert olyan furcsa szín. Titokzatos,megnevezhetetlen, egészen egyedi, bujalégkört teremt egy lila szoba.Sötétebb árnyalatait a luxuscikkek pl.parfümök között találod, világosabbakpedig egyéb kozmetikai termékek arculatátadják.Kreativitás, misztikum, intuíció, vágy,vallás, bölcsesség - mind egy-egy árnyalat alila palettán.Mi szeretjük :)Jellemzően lila oldalak: pszichológiával, lélekgyógyászattal foglalkozóoldalak spirituális, ezoterikus témák erotikus témák szépségápolás szórakozóhelyek, klubok, bárok www.webdesigntanfolyam.com
  22. 22. BARNAFöldszín - termékenység, gondoskodás,melegség, stabilitás, kitartás, egyszerűség,férfiasság.A természetes anyagokkal, tevékenységek-kel jól társítható - pl. fa - fát megmunkálószakmák, fából készült tárgyakat forgalmazóboltokKis manufaktúrák, egyedi, kézi készítésű ter-mékek, földműveléssel, mezőgazdasággal -zölddel, és kékkel alkalmazva.Az otthon, melegséget, nyugalmat szim-bolizálja kávézók, éttermek, beülős,beszélgetős klubok esetében.Jellemzően barna oldalak: földművelés, agrár témák kézművesség, fafeldolgozás, mesterek, szakem-berek szállodák, lakberendezés, otthonteremtés kávézók, bárok, mediterrán, családias éttermek férfias témákhoz, sportokhoz - horgászat,vadászat. www.webdesigntanfolyam.com
  23. 23. SZÍNES OLDALAKJó persze a legtöbb design nem egy színreépül, mégis vannak az un. full color, vagycolorful webgrafikák, amelyet két területenhasználnak rendszeresen.1. a kisgyerekeknek szóló oldalakA kisgyerekek nagyon szeretik a feltűnő,tiszta színeket - piros, kék, zöld, sárga.2. reklámcégek, ügynökségek, stúdiók olda-laiA színorgia a sokszínűséget, a kreativitásthivatott ez esetben jelképezni.Egy nagyon színes oldal gyorsan rögzül, saj-nos a tartalma már kevésbé.Jó, de mégis akkor hogyan válasszak színeket?Mostmár egy csomó dolgot tudsz a színekről, már ezek alapján is össze lehetállítani a palettákat, azonban még nem vettél számításba pár nagyon fontos dolgot. Nézzük az összesszempontot.Színválasztáskor vedd figyelembe: • a használni kívánt színek egymáshoz való viszonyát - ebben segít a színkör • a színek jelentését, pszichológiai, élettani hatásait • a konvenciókat, vagyis a hagyományos felhasználási módokat, területeket • a meglévő arculatot (ha van ilyen) • a megrendelő igényeit - előfordul, hogy kategorikusan kikötik a használható színeket • a versenytársak, konkurens cégek arculatát - bármit is tervezel - logó, arculat, weboldal - azt egy közegbe fogod belehelyezni, amelyben már mások is tartózkodnak. • a marketing célokat - vagyis az üzenetet, amelyet a megtervezendő dologgal közvetíteni kívánnak majd. Ha ilyen szavakat hallassz, hogy modern, elegáns, letisztult, harmónikus, fiatalos stb. akkor tudd 1. minden ügyfél szinte szóról szóra ugyanezt fogja mondani 2. neked kell rávezetni őket, hogy mit is akarnak üzenni valójában www.webdesigntanfolyam.com
  24. 24. FüggelékOlvasni, és néznivalóB ajban vagyok, mert ezek a könyvek jelenleg nem kaphatóak, talán fellelhetőek antikváriumban, vagy néha a Vaterán, de ha bővebben akarsz a színekkel, és a színtudománnyal foglalkozni, akkor érdemes vadászni rájuk. A színtan egy tudományág, tehát itt átadni nem lehet, és tapasztalati úton rögzül, nem lehet bemagolni. • Johanness Itten - A színek művészete • Színharmónia a gyakorlatban (Scolar kiadás)LinkajánlóFöldvári Melinda a színelmélet doktora, minden ami a színekkel kapcsolatban fontos, említésre kerül az olda-lán -http://www.szintan.hu “A kaleidoszkóp egyszerű és bámulatos. Elég, ha tíz különböző alakú, más-más szí­ űre festett üvegdarabkát helyezünk n el benne, mielőtt lezárnánk. A tükörrend- szer elvégzi a dolgát. Aztán megrázhatjuk tíz­ zer, tízezerszer, és soha többé nem s fogjuk látni ugyanazt a mintázatot. Az ember nem egyszerű, de bámulatos. Őbenne nem tíz, nem is tízezer, és nemc- sak más-más alakú és színű üvegdarabka van elhelyezve. Különben is, az ember nem lezárható, mint egy kaleidoszkóp, ezért foly­ on-folyvást belékerül valami t új, és mégis van egy ismeretlen pillanat, amikor végérvényesen rögzülnek benne a tükrök. (...) Minden embernek megvan a maga tükörrendszere, ami csak a sajátja.” Ancsel Éva www.webdesigntanfolyam.com
  25. 25. FeladatokNe csak olvasd! Csináld!Megismerkedtél a színek különböző tulajdonságaival, használatával.Ezek egyrészét talán eddig is tudtad, esetleg nem is tudtál, hogy tudsz róla.De más dolog olvasni a boldogságról, és más annak érezni magad - így most a gyakorlatban kiderül, hogymennyire ívódtak beléd a színek!1. FeladatKeress példákat (3-3 db-ot) monokróm, és komplementer színpalettát használóweboldalra! Hogyan készíts screenshotot? Print Screen gomb a billentyűzeten - Ctrl+V valamilyen képszerkesztőbe, Mentés Szoftverrel - http://www.techsmith.com/jing/ Weboldalakról legegyszerűbben böngésző plug-in segítségével - Chrome - https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnj cddpki?hl=hu Firefox - https://addons.mozilla.org/en-US/firefox/addon/1146/2. FeladatKészíts valamelyik alkalmazással (Kuler, Color Scheme Designer stb.) különböző palettákat, és a legjobbansikerülteket - amelyik neked leginkább tetszett valamiért - mentsd Adobe Swatch Exchange palettaként(.ase). 10-12 db ilyen palettád legyen. Ezeket oda mented ahová gondolod - csak legyen mihez nyúlni, hafeladat van! Mivel a Color Scheme Designer pl. mypalette.ase néven menti őket, érdemes valami sajátkreálmányú elnevezést adni a későbbi felhasználás érdekében.Mondjuk malnafagyi.ase, vagy fagyostelikutyagumi.aseA hülyenevek segítenek emlékezni 2 hét múlva is, az ékezet nélküliséget pedig nem csak itt ajánlom, ha-nem mindenhol máshol is, ha informatikai elnevezéseket adsz. A programok érzékenyek az ékezetekre,vagyis nem tudnak velük mit kezdeni, köszönhetően az egyedi karakterkészletünknek, amelyekkel a burz-suj világ nem számol, hiszen nem vagyunk komoly piac.Egyszer órákat töltöttem azzal, hogy rájöjjek miért nem működik egy flashanimációm. A gyökérkönyvtár!!! ékezetes elnevezésű volt. Talán ez ma már nem okozna gondot, de jobba békesség!Informatika = ékezet mérsékelten használandó. www.webdesigntanfolyam.com
  26. 26. Ha már szeretnél velük garázdálkodni a Photoshopban akkor a letöltött .ase fájlokat dobáld a Photoshopprogramod megfelelő mappájábaPresetsColor Swatchespl. C:Program FilesAdobeAdobe Photoshop CS4PresetsColor Swatches A programot elindítva pedig a Color Swatches színes kockás táblácska jobboldali csücskiben megbúvó nyilacskát megnyomván - a Load Swatches paranccsal hozzáadjuk a jelenlegi táblához, a Replace Swatches-el pedig kicseréljük a mostanit az újra. Az eredeti állapot a Reset Swatchessel állítható vissza.3. FeladatA következő oldalon http://labs.ideeinc.com/multicolr/ színek alapján listázhatsz ki fotókat, képeket,amiket a Flickr nevű képmegosztóra töltöttek fel az emberek a Creative Commons felhasználói licenszalapján.Ez röviden itt olvasható - http://www.flickr.com/creativecommons/Szóval a feladat: keress képeket ezekhez a kifejezésekhez, fogalmakhoz,mindegyikhez 2-2 db-ot * tisztaság * gazdagság * természetesség * varázslat * hagyomány * mértékletesség * diszharmóniaKészíts róluk screenshotot!Ezek ilyen többségében fejben gyakorlós, nézelődős, vagy egyszerűfeladatok - ennek ellenére kérlek vedd őket komolyan, mert az alapok nagyon fontosak!Jó munkát kívánok! www.webdesigntanfolyam.com

×