Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Rychlý tip - jak vyřešit plynulé přechody u webdesignu

28. 2. 2012 v 1:40 19 Rychlý tip - jak vyřešit plynulé přechody u webdesignu

Plynulé přecházení barev u jemných přechodů, kde máte velmi podobné barvy, je za normálních okolností prakticky nemožné. Váš monitor způsobí, že se vám vytvoří řada nepěkných zubů, namísto plynulého přechodu. Jak z toho ven?

ZMĚNA: Objevil jsem web, který tento problém řeší jedinou rychlou akcí, takže vám doporučím spíš tohle řešení než to, které v článku zmiňuju. Je očividně překonané.

Pokud jste někdy vytvářeli design, kde jste na pozadí používali přechody s podobnými barvami, jistě jste se se zuby již setkali. Pokud nemáte opravdu kvalitní monitor (a to nemá většina, takže jde o řešení, kde potřeby mnoha převáží potřeby pár :), zobrazí vám jen omezené množství barev (menší než barevný profil vašeho dokumentu), z čehož pak vznikají ony nekompletní přechody, takže je třeba použít metodu rozkladu barev, která se nazývá dithering. Existuje několik metod jak toho dosáhnout, a donedávna jsem nevěděl o žádné skutečně účinné.

Můžete využít možnost Rozklad barev u klasického nástroje přechod, tu možnost ale nemáte u stylů vrstev, takže jste hodně omezení. Pak je tu možnost použít filtr šum, ale výsledky jsou dost hrozné. Buď použijete velmi nízké hodnoty a efekt prakticky nebude vidět, nebo se odvážete trochu víc a gradient dostane nechtěnou texturu, která navíc příliš nepomáhá. Nakonec ti nejzoufalejší mohou zkoušet rozostření, s pochybnými výsledky.

Naštěstí přichází spasení ve formě filtru Postřik, který najdete přes hlavním menu v záložce Filtr -> Tahy štětce -> Postřik. Filtr má pouze dvě hodnoty, které můžete nastavovat, Poloměr spreje a Hladkost, a pro správnou funkčnost je nutné nastavit Hladkost na 1. Jak si určíte Poloměr spreje je už na vás, vyšší hodnoty znamenají silnější efekt, což může znamenat méně znatelné zuby, ale také silnější šum, takže se zařiďte podle situace. Za optimální hodnotu považuji 5.

Ukázka

Pokud máte jako já ve většině případů přechody nastavené přes styly vrstev, udělejte z vrstvy chytrý objekt (čímž zachováte všechny styly, ale z vrstvy vytvoříte samostatný objekt) a až potom aplikujte filtr. Jinak by se nic nestalo, protože filtr působí na vrstvu samotnou a ne na přidané styly.

Původní zdroj ze kterého jsem čerpal, web Louie Mantia, vizuálního designéra z Kalifornie. Přišlo mi lepší ho mírně rozšířit, než na něj prostě odkázat v krátkých zprávách - díky tomu se o tomto triku dozví víc lidí a také navštíví web původního autora.

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #19
  • Jakub Šimůnek o.O
  • 11. February 2013 | 16:29
  • Skupina: Neregistrovaní

Super akce. Ve čtvrtém odstavci nefunguje link na "rozostření".

  • #18
  • lefiath
  • 9. November 2012 | 18:36
  • Skupina: Správci

Bohužel se v tisku nevyznám, takže v tomhle případě ti neporadím. Měl jsem za to, že vytisknout vektorový přechod by neměl být problém.

  • #17
  • fluke
  • 3. November 2012 | 14:38
  • Skupina: Neregistrovaní

hmm zajimave, tento problem nevznika pouze u webdesignu, se stejnou veci se lze setkat pri tisku, s tim ze pri tisku hrajou roli nejvice 3 klicove veci: forma podkladovych dat, zpusob exportu, zpusob naripovani (v pripade ofsetoveho tisku, o cakacce se nabavim to je kategorie sama pro sebe, kde je chyba az ve vystupnim zarizeni)

forma podkladovych dat: prechody jsem vzdy rozsumoval = nemate zkusenosti jak vyse v tutorialu postup je efektni pri tisku na ofsetu? to by me opravdu zajimalo

zpusob exportu: zip komprese je sichr - ktera mnohonasobne muze zvetsit velikost vystupniho formatu (v pripade jpg komprese pri exportu doporucuji max qal. to ovsem plati ze v celem procesu mate data nekomprimovana, v pripade ze by nekoho napadlo nalinkovat JPGcmyky a exportovat je tak to je k prdu :-D

nastaveni ripu: nejvetsi kvalitu v prechodech, ale nejsem operator ripu, nejsem si jist zdali tyto metody maji co docineni se soucasnejma aplikacema pro ovladani ripu.

  • #16
  • Neregistrovaný kolemjdoucí
  • 3. October 2012 | 11:20
  • Skupina: Neregistrovaní

Vďaka moc moc moc.
Už som myslel, že sa toho nezbavím.

  • #15
  • pampac
  • 27. May 2012 | 21:33
  • Skupina: Neregistrovaní

Nazdárek, můžete mi prosím poradit, jak můžu tuto techniku aplikovat na vrstvu, kde mám jen průhledný přechod? Bohužel položky Filtr -> Tahy štětce mám zašedlou. Zkoušel jsem vrstvu převést na inteligentní objekt, ale stále zůstává zašedlá.... :-( Děkuji. <3 :-)

  • #14
  • Pato8
  • 23. March 2012 | 17:59
  • Skupina: Registrovaní Uživatelé

V PS CS6 je možnosť ditheringu pri layer effects :)

  • #13
  • lefiath
  • 1. March 2012 | 13:33
  • Skupina: Správci

Ano a já v článku píšu, že to se dá uplatnit pouze u nástroje Přechod, ne u přechodů ve stylech vrstev. U webdesignu je obvykle žádoucí používat na většinu jednoduché grafiky vektory, často se věci mírně mění.

  • #12
  • J. Bereza
  • 29. February 2012 | 22:02
  • Skupina: Registrovaní Uživatelé

Proti tomuto nežádoucímu efektu má PS už zabudovanou funkci...
ukázka zde: http://sklad.bereza.cz/00-jarda/cokoliv/rozklad.png

  • #11
  • Grone
  • 28. February 2012 | 16:32
  • Skupina: Registrovaní Uživatelé

Už ma to trápilo dlho a som rád, že konečne viem ako na to. Díky :)

  • #10
  • House23
  • 28. February 2012 | 14:44
  • Skupina: Registrovaní Uživatelé

Super ! Díky moc

  • #9
  • Lostindream
  • 28. February 2012 | 13:09
  • Skupina: Registrovaní Uživatelé

Díky, Petře! Už jsem párkrát hledal a několikrát se to už hodilo. :-)

  • #8
  • Ticor
  • 28. February 2012 | 12:26
  • Skupina: Registrovaní Uživatelé

Tak s timhle sem si lámal hlavu dlouho. dík

  • #7
  • nightm4re
  • 28. February 2012 | 11:44
  • Skupina: Registrovaní Uživatelé

Výborný tip, bude se to hodně hodit, díky :)

  • #6
  • lefiath
  • 28. February 2012 | 11:35
  • Skupina: Správci

Díky za vysvětlení, přepíšu to. Zrovna já nemám nijak kvalitní monitor, ostatně na design ho ani nepotřebuju, to je spíš na škodu, když člověk vidí něco co většina ne.

  • #5
  • Ythren
  • 28. February 2012 | 11:28
  • Skupina: Autoři / Redaktoři

Abych to uspokojil i s technického hlediska, tak těch barev tam není málo, jen monitory to často nezvládájí zobrazit (navýšení barevné hloubky nepomůže). Ano částečně za to může i komprese, ale obyčejné levné monitory s technologii TN protstě nedokáží nezobrazit tolik barev aby vzniknul souvislý barevný přechod, často zvládají jenom bitovou hloubku 6bitů na kanál místo 8. Tudíž je nutné vzždycky myslet i na ty co mají monitory za pár šupů, ikdyž Vy jako websegneři máte kvalitní monitory a proužky skoro nevidíte. Tohle zašumění je dobrá volba. U některých monitorů je dokonce i HW zabudovaný dihidering, což částečně maskuje tenhle problém neschopnosti zobrazit dostatečné množství barev.

  • #4
  • lefiath
  • 28. February 2012 | 11:15
  • Skupina: Správci

@BiG_m0m0: Například? Chvíli jsem si vyhledával a nic kromě šumu nebo rozostření na mě nevyskočilo. I když to může být zdlouhavější jak říkáš, zajímá mě co existuje za alternativy. Pošli sem něco pro srovnání.

  • #3
  • hunt
  • 28. February 2012 | 11:10
  • Skupina: Registrovaní Uživatelé

Díky za skvělou radu! Velmi se to hodí! :-)

  • #2
  • BiG_m0m0
  • 28. February 2012 | 08:30
  • Skupina: Registrovaní Uživatelé

taktiež veľmi užitočné aj keď je mnoho iných spôsobov ako sa toho zbaviť avšak sú zdlhavé :)

  • #1
  • PiP3R
  • 28. February 2012 | 08:01
  • Skupina: Moderátoři

spáása ;-) velmi užitečná rada

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi