websta.pl

Projektując strony internetowe zgodne z obecnymi trendami, często stosuje się subtelne przejścia tonalne, delikatne cienie lub rozjaśnienia tła. Niestety zwykle zamiast gładkiego gradientu pojawiają się dość mocno widoczne pasy (szczególnie przy zapisie do .jpg). Jak na złość, im delikatniejszego efektu oczekujesz, tym bardziej jest to widoczne. Spróbujmy temu zaradzić.

Kiedy gradient się rozwarstwia?

Gdy starasz się zachować jak największą możliwość edycji grafiki, z pewnością stosujesz półprzezroczyste czarne i białe gradienty lub/i różne tryby mieszania, które miksujesz na warstwach z płaskimi kolorami. Jeśli dodatkowo używasz na tych przejściach efektów rozmycia, to zły efekt murowany. Możliwe, że ten problem pojawia się również z powodu algorytmu Photoshopa. Jednak na pewno ma na to wpływ niedoskonałość monitorów LCD w odzwierciedlaniu Adobe RGB.

Jako grafik dysponuję całkiem dobrym monitorem i ten niepożądany efekt jest mało widoczny. Jednak projektując layout, musisz się liczyć z tym, że gotową stronę będą odwiedzać użytkownicy dysponujący o wiele gorszym sprzętem, a co za tym idzie zobaczą te rozwarstwione gradienty.  Możesz zobaczyć ten problem, jeśli masz pod ręką jakiegoś laptopa z Biedronki lub gdy spojrzysz na monitor pod dużym kątem od dołu.

Do dzieła

Na początek chcę zaznaczyć, że na potrzeby tego tutoriala mocno przerysowałem nasz przykład. Problem wygląda tak:

Na tym rysunku obrysowałem dodatkowo poszczególne barwy:

Taki paskudny efekt pojawił się, gdy użyłem na nowej warstwie gradientu biały>przezroczysty i dodatkowo obniżyłem krycie tej warstwy do kilku procent.

Czytałem kiedyś o rozwiązaniu tego problemu przez używanie 32bitów na kanał. Oprócz tego, że wtedy nie działa większość filtrów, to ten sposób wcale nie pomaga. Dlatego zrobimy to inaczej.

Wybierz Kroplomierz (I), kliknij na górze, żeby pobrać początkowy kolor gradientu. Następnie kliknij na końcu gradientu, przytrzymując klawisz ALT. W ten sposób mamy początkowy kolor jako kolor narzędzia i końcowy jako kolor tła.

Utwórz nową warstwę, wybierz narzędzie Gradient, typ gradientu "Kolor narzędzia do koloru tła" (pierwszy w palecie) i narysuj nowy gradient, który będzie się kończyć tam, gdzie nieudany poprzednik.

To tyle, na koniec zobacz porównanie:

Zdaję sobie sprawę, że to rozwiązanie nie jest lekiem na całe zło i trudno je zastosować do złożonych przejść. Jednak jak dotąd nie udało mi się znaleźć prostszego i bardziej uniwersalnego rozwiązania.

Jeśli znasz jakieś alternatywne i działające rozwiązanie, podziel się nim w komentarzach.

Lubisz czytać mojego bloga? To nie zapomnij zasubskrybować Kanału RSS, żeby zawsze być na bieżąco.

Tagi: gradient, kolor, photoshop, tło, webdesign