Autor Zpráva
xxxObiWan
Profil
(rychlíci nechť si přečtou jen tučné)

Dobrý den,
chtěl bych se živit tvorbou webu, a protože moje grafické cítění značně pokulhává (s kódováním ani programováním problém nemám), snažím se to aspoň trochu dohnat studiem teorie.

Co se týče barev, na webu je spousta rad ve stylu "vybírejte barvy tak, ať je text na pozadí dobře čitelný". Kvalitnější články pak píšou i o Color Wheel, nebo o vybírání barev z fotek. Znám taky weby jako colourlovers.com. A přesto mám s aplikací barev na web problémy.

Jde o to, že když už si například na colourlovers.com vyberu nějakou barevnou paletu, která vypadá na pohled krásně, jakmile ty barvy použiju na web (na nadpisy, oddělovací čáry, pozadí headeru apod.), vypadá to... no, hnusně :-)
Tuším, že jádro problému je v tom, že některé barvy se hodí na barvu klasického textu, jiné zase na barvu nadpisů (kde je font větší a tak i s jinou barvou hezčí) a že klíč je ve způsobu, které barvy vybrat pro které prvky stránky.
Mohli byste mě prosím nasměrovat na nějakou literaturu, web, nebo stránku, která se přímo tímto zabývá, nebo mě popostrčit správným směrem? Prostá teorie o Color Wheel je v tomto nedostačující...

Děkuji za rady

P.S. Teď mi nejde o to, naučit se dělat kdovíjak šíleně grafické weby. Ale jako programátor a kodér chci umět vytvořit aspoň hezkou barevnou typografii webu (barvy nadpisů, fonty, barva pozadí apod.)
NouF
Profil
+1 stejný problém :)
Petr ZZZ
Profil
Reaguji na xxxObiWana:
...a že klíč je ve způsobu, které barvy vybrat pro které prvky stránky.

Řekl bych, že uvažuješ správným směrem, teď ještě uvést tu myšlenku do praxe. Možná tě popostrčí dopředu, když si uvědomíš, že vyšší kontrast je kvůli čitelnosti zapotřebí u dvojice písmo-pozadí, zatímco dvě pozadí dvou sousedících bloků, pokud vůbec mají mít různé barvy, se od sebe vzájemně moc lišit nemusí (nebo dokonce nemají), a zrovna tak barva nadpisů se může jen decentně lišit od barvy písma běžného textu. A obecně bych řekl, že u barev "méně bývá více", takže nepřeplácávat (čímž ovšem není řečeno, že monochromatická řešení jsou ta jediná správná).
xxxObiWan
Profil
Petr ZZZ:
Možná tě popostrčí dopředu, když si uvědomíš, že vyšší kontrast ...
Takže když už mám vybrané barvy, které jsou k sobě svým barevným tónem sladěné (ono "Hue" z HSL modelu), stačí upravovat kontrast (pomocí sytosti a jasu jednotlivých barev)? Takže postup by mohl být až takhle jednoduchý?
1) Vyberu si paletku z colourlovers.com
2) Barvy z ní použiju na web (na nadpisy, pozadí apod.)
3) Upravuju kontrast jednotlivých barev (pomocí jasu a sytosti), dokud to nevypadá hezky?

A obecně bych řekl, že u barev "méně bývá více", takže nepřeplácávat
No, ono když už si vyberu nějakou paletu z colourlovers.com, tak tenhle problém odpadá, počet barev je tam jasně daný (u některých palet 3, u některých i 5 barev). A tyhle barvy jsou už mezi sebou dobře sladěné. Nebo se mám snažit některé barvy z palety vyřadit? Pokud ano tak proč, a které barvy? :-) Ale tohle je jen vedlejší otázka.
Petr ZZZ
Profil
Reaguji na xxxObiWana:

1) Zkus to a uvidíš. :)

2) Obecná rada: Cit je jedna věc, něco se našprtat je... něco jiného? Ani ne. V konečném důsledku jsou to jen zdánlivě dvě různé věci, nebo spolu přinejmenším úzce souvisí. Poučky v oblasti kompozice i barevného vnímání vyplývají totiž z praxe, z pozorování skutečnosti. Jinak tomu ani být nemůže, protože mají-li mít poučky smysl, musí mít praktické využití. Potíž "citu" je v tom, že není jen tak beze všeho snadné ho definovat. On tedy definovat, popsat do jisté míry jde, ale to už jsme právě u těch pouček.

Moje rada zní: Nastuduj si teorii, tupě se ji našprtej – co jsou teplé a studené barvy, doplňkové barvy, barevná perspektiva a tak dále; a možná nehledej ani tak webdesign, jako spíš teorii obrazové kompozice (fotografické nebo malířské, to je celkem jedno). Vybaven příslušnými teoretickými znalostmi vydej se studovat úspěšné weby (nebo obrazy, fotografie...) a snaž se konfrontovat našprtané vědění s tím, co kolem sebe vidíš. Časem získáš schopnost rozlišovat dobrá řešení od špatných a taky schopnost sám dobrá řešení navrhovat.

Nečekej rychlé úspěchy – práce s barvou je umění jako každé jiné a je třeba si je osvojovat trpělivě a houževnatě, podobně jako hru na housle nebo jakoukoli jinou dovednost. Poučky ti umožní proces učení podstatně zkrátit – ale učit se musíš sám, to za tebe nikdo neudělá.

Možná ještě jedna rada – vůbec není řečeno, že musíš za všech okolností pracovat v souladu s nějakými principy kompozice. V každém případě je ale musíš znát a pokud použiješ řešení "proti pravidlům", nesmí to být náhodou, z neznalosti, nýbrž musíš přesně vědět, co je na tebou zvoleném postupu neobvyklé a proč ses v konkrétní situaci takto rozhodl. Abys byl takového přístupu schopen, musíš teorii ovládat.

Chceš-li vědět, zda o principech kompozice (ke kterým práce s barvou patří) něco víš, zkus se zamyslet, čím je třeba tento Lantingův snímek (zdroj: MPRnews) výjimečný, které kompoziční principy jsou zde uplatněny.

— Řešení (obarvi myší):
1. Symetrie
2. Rytmus: střídání černých a bílých pruhů
3. Kontrast: a) ostrý hlavní motiv, neostré všechno ostatní b) bílá-černá.
4. Naprostá absence jakýchkoli rušivých prvků
5. Doplňkové barvy: modrá a žlutá
:)
xxxObiWan
Profil
Petr ZZZ:
co jsou teplé a studené barvy, doplňkové barvy
To už nastudované mám :-)

barevná perspektiva a tak dále; a možná nehledej ani tak webdesign, jako spíš teorii obrazové kompozice (fotografické nebo malířské, to je celkem jedno)
Díky, přesně tohle jsem potřeboval. Poradit, co ještě bych měl nastudovat, abych se posunul dál ;-) Takže teorii obrazové kompozice říkáš? Ok, jdu na to.

Jinak, pokud by někdo měl přímo tipy na odkazy, kde je o tom něco dobře napsaného, bránit se nebudu :-P Jinak budu googlit.

Ještě jednou díky ;-)
panther
Profil
Petr ZZZ:
Časem získáš schopnost rozlišovat dobrá řešení od špatných a taky schopnost sám dobrá řešení navrhovat.
já s tebou v tomto nesouhlasím. Dobré a špatné řšení rozeznám, rozeznám je dobře, často i grafikovi přímo řeknu, co chci kde (a jak) vylepšit. Určitě z tohoto nevyplývá to, že bych měl být (a jsem) schopný grafické řešení navrhnout (=nakreslit) sám. Taktéž, poznám dobrou a špatnou hudbu, ale nutně to neznamená, že umím na něco hrát nebo zpívat.

xxxObiWan:
je chválihodné, že se pokoušíš o rozvoj svých vědomostí do končin, kde si třeba nejsi zatím tak jistý. Nechci tě zrazovat, ale i zde platí, že méně může být více. Nikdo (firma, kde by ses mohl jako profesionál uživit) nebude hledat grafika, kodéra a programátora v jedné osobě - bude hledat tři různé lidi, tři profesionály, tři osobnosti.

Pokud se chceš naučit tvořit grafiku (nejsem si jist, že se dá naučit graficky cítit), věz, že to není jen o barvách (přestože barvy jsou hodně podstatné). Můžeš mít krásné barvy, ale když nemáš nápad... Takže, ano, zkoušej, hraj si, ale když se ti výsledek nebude líbit, nezoufej.
xxxObiWan
Profil
panther:
Jenže ty mluvíš o rozpoznávání typu "Tady ten nadpis se mi zdá málo výrazný", Petr ZZZ o rozpoznávání typu "Barvu tohohle nadpisu by to chtělo dát udělat o něco sytější a font o 2px větší". První způsob si zřejmě neuděláš sám, protože nevíš, jak máš onen nadpis správně zvýraznit. Druhý už ale ano, protože máš dostatek zkušeností a víš přesně, jak to zvýraznění chceš provést. Toto je jenom drobnost, ale obdobně to pak bude fungovat i u navrhování (a tvorby) celé grafiky. Pokud máš cit / anebo dostatek zkušeností (klidně i načtených z teorie), klidně tu grafiku vytvoříš sám.

Offtopic: Sám už jsem takovým způsobem překonal jeden svůj "antitalent" a naučil se tančit :-D S dostatečně dobře podanými informacemi to opravdu jde (učil mě profesionál) ;-)
Taurus
Profil
Souhlasím s pantherem, ale částečně i s Petrem ZZZ.

Rozpoznávat a tvořit je celkem slušný rozdíl. Rozpoznávání, pokud zná člověk správné zásady a má i cit, je celkem jednoduché. Mnoho z nás pak může říct, že to není ono. Jak to ale nápaditě navrhnout líp, to může být oříšek. A aby byl výsledek zajímavý, k poučkám je zapotřebí cit a kreativita. Jinak to bude jen "jeden z mnohých", učený průměr. Záleží, co komu stačí, ale o vysoké kvalitě pak mluvit tolik nelze.

Že je člověk tvořivě nadaný se pozná jednoduše už od malička v drobnostech – má hezké sešity, pěkné písmo, rád kreslí, vytváří, dbá na estetiku, má rád umělečno a to vše převyšuje logické, matematické myšlení člověka, který koupí bonboniéru k narozeninám namísto kresby portrétu...

Učené cítění vs. přirozené je v těch vyšších úrovních zkrátka poznat.
xxxObiWan
Profil
Taurus:
A aby byl výsledek zajímavý, k poučkám je zapotřebí cit a kreativita. Jinak to bude jen "jeden z mnohých", učený průměr.
Supr, a mě jako programátorovi stačí dostat se na ten průměr, který aspoň "nějak" vypadá :-) Takže pokud máte nějaké další tipy, co by mi v tom mohlo pomoct, sem s tím :-)

Díky ;-)

P.S. Už jsem to psal v prvním příspěvku, ale napíšu to ještě jednou. Mým cílem není naučit se vytvářet "uměleckou webovou grafiku" (příklad 1, příklad 2, příklad 3), ale aspoň grafiku "použitelnou" (příklad 1, příklad 2, příklad 3)
Plaváček
Profil
xxxObiWan:

Pěkný úvod do teorie s praktickými ukázkami najdeš zde http://webdesign.tutsplus.com/articles/design-theory/an-introduction-to-color-theory-for-web-designers/ (anglicky) a třeba tady http://webdesign.tutsplus.com/articles/design-theory/understanding-visual-hierarchy-in-web-design/ (také anglicky). V češtině, pokud vím, žádný skvělý zdroj neexistuje.
xxxObiWan
Profil
Nevadí, angličtinu přechroustám ;-) Díky
Petr ZZZ
Profil
Reaguji na Taura a panthera:
Ano, nepřesně jsem se vyjádřil, mezi schopností poznat dobré řešení a sám dobré řešení navrhnout samozřejmě rozdíl je (divadelní kritik nemusí být schopen napsat kus). Chtěl jsem říct, že pokud člověk nějaký talent má, studiem teorie si může podstatně zkrátit proces učení, protože si v mnoha ohledech ušetří objevování již objeveného.
Ugo
Profil
Další rozdíl je návrh vymyslet a udělat, já mám v hlavě vždy pěkný design, ale udělat ho prostě nedokážu - nejsou obrázky, neumím udělat to co chci. Nejvíc dá samotná tvorba dle hotového designu, tam je navíc vždy třeba něco dodělávat vlastnoručně protože grafik pošle 1/10 toho co je třeba. Další dobré je vzít jiný web a hodně se jím inspirovat (čti téměř obšlehnout :)), vše je o citu který člověk časem získá a o tom jestli to umí udělat. Další důležitá věc co platí je, že bez obrázků si nahraný a sehnat obrázky je to nejtěžší. Dělal jsem dost designů, všechny až na jeden vypadají příšerně, jediný čím se liší ten jeden je, že má obrázky z fotobanky (i když free) a i když to není žádná sláva, tak to je použitelný.

Barvy mají ještě jeden zásadní problém - monitor, poslední stránky co jsem dělal vypadaly na všech testovacíh monitorech docela rozumně (asi 4 kousky) a pak sem si je otevřel v práci a málem spadnul ze židle jak to je odporný.

Vždy platí, že lepší než teorie je praxe, najdi si hezké weby a snaž se udělat to samé jen bez použití jejich stylopisů a obrázků.
xxxObiWan
Profil
Ugo:
co platí je, že bez obrázků si nahraný
Tak v tom s tebou nesouhlasím. Například můj vzor v tvorbě webů je firma Medio. Podívej se na jejich web - prakticky žádné obrázky a přesto to působí designově hezky. To je přesně ten styl grafiky, který se snažím naučit ;-) Takže pokud máte nějaké tipy na zdroje, kde se o tomhle něco píše, sem s nimi :-) Thx

Vaše odpověď

Mohlo by se hodit

  • Pokud přikládáte obrázkové ukázky, dbejte prosím na jejich přijatelnou (datovou) velikost.
  • Uvádějte v titulku grafický program, na který se ptáte.

Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: