Barion Pixel
Ez itt a lifelong learning

Sosem tudhatsz eleget!

Blog

Segédlet

A tökéletes színátmenet titka

2021. március 23. | Bognár Péter

# # # # # # # #

A gradient, avagy színátmenet minden számítógépes grafikus csodafegyvere mióta csak színes képernyőn láthatjuk a műveinket. Már a legősibb korszakokban is nagy kihívást jelentett a programozóknak szép, folytonos és mindenekfelett sima színátmenet létrehozása, és persze tátott szájjal bámultuk, ha szépen sikerült a mutatvány.

A Psygnosis Software logója (Commodore Amiga)

Valamivel később pedig a magukra valamit adó falra ragasztott A4-es lapok mind tartalmaztak valami ütős színátmenettel kidekorált Word Artot.

A gradientek, bár szerencsére már nem uralják annyira a grafikus design, mint néhány éve, ma is kiváló egészségnek örvendenek, és fontos részét képezik minden designer napi eszköztárának, legyen szó a Photoshopról, vektoros grafikákról vagy éppen egy weboldal megtervezéséről.

A weblapokon megjelenő színátmeneteket szerencsére nem kell raszteres grafikával beilleszteni, hiszen a CSS is képes az ilyesmit nagyon gyorsan megjeleníteni. De nem mindegy, hogy hogyan!

A gradient-generálás egyik bejáratott eszköze a Colorzilla Ultimate Gradient Generator, ebben a remek appban gyorsan, akár több lépcsős színátmeneteket is generálhatunk, a kész CSS kódot pedig már másolhatjuk is be a stíluslapra. Ez abszolút remekül működik, de mint mindent, ezt is lehet éppenséggel még jobban csinálni.

A két szín között generált fokozatos átmeneteknek van ugyanis egy jellemző tulajdonsága: gyakran áthaladnak egy mocsarasszürkébe hajló ún. holt zónán, ami a színkör (pontosabban egy térbeli kocka, ezen helyezi el magának az RGB színskála a színeket) közepe táján helyezkedik el. Mivel a számítás a két RGB szín közé húz egy egyenes vonalat, az szinte óhatatlanul áthalad a zavaros középső régión.

A Learn UI oldalán egyszerűen csak Erik névre hallgató programozó viszont úgy döntött, hogy minek elégedne meg ezzel a jól bejáratott megoldással, ha tudna szebbet is, és megalkotta a saját Gradient Generation Toolját, ami a megszokott egyenessel szemben egy váratlan huszárvágással görbe pályán számolja a színátmenetet, és így megmarad az RGB spektrum élénkebb oldalain.

A végeredmény valóban szemet gyönyörködtető, vessük csak össze a Colorzillával:

Colorzilla
Gradient Generation Tool

Erik programja a színátmeneteket három különböző módon is képes generálni, ezek mind árnyalatnyi különbséggel adják ki a színek egymásba fordulását.

Persze azért a Colorzillát még nem kell kidobni, ott például lehetséges több köztes színt is kijelölni (és persze ezzel a módszerrel manuálisan előállíthatjuk az újabb versenyző műveit is), no meg elképzelhető olyan helyzet, amikor éppenséggel zavaró vagy előnytelen az átmenet közepén megjelenő hívatlan harmadik szín.

Colorzilla
Gradient Generation Tool

Te melyikre szavazol?

Iratkozz fel YouTube csatornákra!

blog

Virtuális asszisztens legyél vagy webdesigner?

Virtuális asszisztens legyél vagy webdesigner?

2024. február 01.

Mindkettő fantasztikus lehetőség arra, hogy elhagyd a hagyományos kereteket, mint szoros, rugalmatlan munkaidő, helyhez kötöttség vagy akár a bérplafon. Egy ponton találkozik is a két munkakör, ahol a grafikai munka már az asszisztenciába hajlik – designerként is végezhetsz weboldal adminisztrációt, közösségi média tartalom készítést vagy felügyeletet és virtuális asszisztensként is sokszor találkozni már-már tervezői munkába […]

Tovább a cikkre
Secured By miniOrange