„Legyen esztétikus!”

„Klasszikus, arányos, méltóságteljes legyen!”

„Nézzen ki jól!”

Ismerős? Minden designernek napi szinten kell megbirkóznia ezekkel a precíznek kicsit sem mondható utasításokkal. Az ügyfél is érzi, mikor néz ki jól egy design, de pontosan körülírni persze nem mindig tudja. De tényleg, mitől lesz valami „arányos”, meg „esztétikus”?

Persze millió választ lehet adni erre a kérdésre, és végső soron a designer egyéni intuícióján, tapasztalatain és „szemén” fog múlni, hogy megtalálja azt a mágikus pontot, ahol egyszer csak klappolnak a dolgok.

Ugyanakkor megnyugtató a tudat, hogy ha véletlenül elbizonytalanodnánk, van egy „titkos fegyver”, ami már pár ezer éve a rendelkezésünkre áll – ez az aranymetszés. Olyan művekben lehet találkozni vele, mint az athéni Parthenón, a gízai nagy piramis, Michelangelo, Leonardo da Vinci vagy Botticelli festményei, de modernebb példaként felhozhatjuk az Eiffel-tornyot vagy éppen Darth Vader sisakját is.

„Több, mint fél, kevesebb, mint harmad, pont jó”

körülbelül így írhatjuk le dióhéjban ezt a misztikus arányt, de persze léteznek ennél jóval precízebb, avagy tudományosabb meghatározások is: a Wikipédia aranymetszésről szóló oldala szerint például

„két rész (a és b, a>b) az aranymetszés szerint aránylik egymáshoz, ha az egész (a+b) úgy aránylik a nagyobbik részhez (a), ahogy a nagyobbik rész (a) a kisebbik részhez (b)”

(a + b) / 2 = a / b

Avagy másképp ábrázolva:

Számszerűen ez a gyakorlatban 1:1,618-at jelent (persze a valódi szám irracionális, és kiszámolható sok-sok tizedesig, de ettől, ahogy a pi esetében is, nyugodtan eltekinthetünk). Az aranymetszés matematikai jele a görög φ (fí), amit mellesleg az antik görög szobrászat atyja, Pheidiász neve után kapott, aki persze szintén az aranymetszés nagy rajongója volt.

Az aranymetszés a matematikában szoros rokonságban áll a szintén nagy becsben tartott Fibonacci-sorozat számaival is, itt ugyanis a sorozat minden tagja megegyezik a megelőző két tag összegével: 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144 …, a Fibonacci-sorozat egymást követő tagjainak hányadosából képzett sorozat (1/1, 2/1, 3/2, 5/3, …) határértéke pedig éppen az aranymetszés aránya.

Ettől a leírástól persze a legtöbb embernek csak a feje fájdul meg, de ha grafikusan, olyan négyzetekkel rajzoljuk meg a sorozatot, ahol az első két azonos kis négyzet után a kettő közös, hosszú éle mellé rajzoljuk oda a következőt, majd tovább, egy újabb nagyobb négyzetet azok közös éle mellé, és így tovább, szépen sorjában, az alábbi ábrát kapjuk:

Ebbe pedig már nagyon könnyű belelátni egy szép, arányos csigavonalat is: ez a Fibonacci-spirál, egy olyan logaritmikus spirál, ami egy negyedfordulat alatt nő a φ-szeresére.

Ez a folyamatosan az aranymetszés szabályai szerint növekedő spirál pedig a természet egyik kedvenc rendezési módja, hiszen optimális egyensúlyt jelent a növekedés és a helykihasználás között. Megtaláljuk a csigaházakon kívül virágokban, fenyőtobozokban és ki tudja, még hol. Ez tehát az az arány, ami rengeteg természeti formában, így persze az emberi testben is fellelhető, és éppen ezért a szemlélő számára egyszerűen arányos, kellemes, kiegyensúlyozott érzetet kelt. A szimmetrikus kompozíciók súlyosságával és mesterségességével szemben, az aranymetszés természetesebb, elevenebb érzetet ébreszt a befogadóban.

Ezek után már persze kicsit sem meglepő, hogy az „isteni arányokat” a modern designban is szinte mindenki használja, remekül látható például a Google aktuális logójában, amit garázsstartupos gyökereit levetkőzve 2015-ben frissített fel utoljára.

Azonban nem csak a tipográfia, hanem például a mikrofon-ikon is ugyanúgy épül fel, sőt, ott lapul az aranymetszés a Google kezdőlap felépítésében is.

Persze nem csak a keresőóriás tervez ilyen ravaszul, a design mindentudó guruja, az Apple is természetesen alkalmazza az aranymetszést és a Fibonacci-sorozatot.

(Igazából arról, hogy az Apple-logó valóban az aranymetszés szabályait követve készült-e vagy sem, komoly vita alakult ki az interneten, ebben a témában egy későbbi cikkben alaposabban is el fogok majd elmélyedni.)

Mik tehát a fő kompozíciós elvek, amik az aranymetszéssel a kezünk alá játszanak?

Három fő rácstípussal találkozhatunk, az első az egyszerű aranymetszés-rács, itt minden oldaról kiindulva osztjuk meg a képet a φ vonalánál

a második a fentebb kitárgyalt Fibonacci-spirál,

a harmadik pedig az arany háromszög, ahol az egyik képátlóról a a másik két csúcspontra egy-egy merőlegest állítunk – ez is φ arányban osztja el az átló vonalát. (A matematika amúgy ismer egy másik arany háromszöget is, ez olyan egyenlő szárú háromszög, ahol az két szár hossza az 1,618-szorosa, és 72-72-36 fokos szögek alkotják. Az ötágú csillag szárai is arany háromszögek.)

Az utolsó hasznos kompozíciós elv pedig maga a Fibonacci számsor, ezt egymás mellé helyezett egységek arányainál érdemes alkalmazni.

De mit tudsz ezzel gyakorlatban is kezdeni? A designban két alapvető filózófiát találunk az aranymetszés kezeléséről:

• Tudatosan próbáld a fenti vezérelvek alapján felépíteni a műveidet, legyen az webdesign, logó, grafika, fotó, akármi – így biztosíthatod, hogy elegáns természetes és harmonikus benyomást keltsen a befogadóban.
• Egyátalán ne foglalkozz vele, csak arra törekedj, hogy jól, természetesen, harmonikusan nézzenek ki a műveid – az aranymetszés meg magától is meg fog jelenni 😊

Ha mégsem a második elvet akarod követni, a következőkben adok néhány tippet arra, hogyan lehet viszonylag egyszerűen gyakorlatban is támaszkodni az aranymetszésre.

Arányok

A φ leginkább magától értetődő használata a webdesignban a honlap elemeinek egymáshoz viszonyított méretének beállításakor kerül elő. Itt beszélhetünk képekről, grafikus elemek nagyságáról, de a hasáb- vagy rácsbeosztásnál is nagyon kellemes eredményeket kaphatunk, ha az egymáshoz tartozó elemek közé 1,618-szoros méretkülönbséget számolunk.
A térközök, margók beállításakor is érdemes odafigyelni: a layout beállításakor érdemes nagyobb, 8 vagy 13 egységnyi négyzetekben gondolkozni, míg a köztes terekre 1, 2 vagy 3 egység nagyságú négyzeteket használjunk.

Természetesen a tipográfiában is nagy hasznunkra válik ez az eszköz, többek között a folyószöveg és a címsorok méretkülönbségét is érdemes 1,618-ra becélozni.

Aranymetszés a teljes layoutban

Érdemes viszont a weboldal-tervünket egy kicsivel hátrébb lépve is megcsodálni, a fókuszpont elhelyezésében segíthet a Fibonacci-spirál vagy a Fibonacci négyzetrács. Jó néhány példát találhatunk ilyen honlap-elrendezésekre.

Grafikák

Grafikák, de főleg logók megtervezésében is gyakori eszköz az aranymetszés. A fő elemek egymáshoz képesti arányaiban hasznos lehet a klasszikus aranymetszés, és téglalap alakú kompozíciókban is a grafika belső arányait beoszthatjuk egy-két arany téglalap segítségével. A gömbölyödő logók esetében viszont a különböző ívek-hajlatok megtervezésére és elrendezésére kiválóan alkalmasak a Fibonacci körök: az ábra „tervrajzában” a sorozat egymáshoz közeli körei egymás mellé illesztve meghatározhatják a grafika külső-belső görbületeit, a körök egyes metszetei, cikkei is pontosíthatják egy-egy díszítő elem elhelyezését. A lenti ábrán több ilyen elrendezést is látni lehet.

Érdemes például a Twitter-logóban jobban elmélyedni, az első ránézésre totális káosznak tűnő karikahalmaz egyszerre csak érthetővé válik, és utána már egészen más szemmel nézed majd a látszólag egyszerű vidám kismadár rajzot.

Eszközök

Számos segédeszköz a rendelkezésünkre áll az aranymetszés gyakorlati alkalmazásához, nézzünk meg párat!

Talán még nem találkoztál vele, de az Adobe Photoshop alapból rejt magában egy aranymetszés-eszközt, bár, mint annyi más remek funkció, ez is alaposan el lett temetve a rengeteg kis kapcsoló között. A Crop Tool használatakor a felső soron található eszköztárban akad egy View feliratú kis menü, itt szerepel három geometrikus rács mellett az arany háromszög, az aranymetszés és a Fibonacci-spirál is, mint segédvonal. Fontos tudni, hogy a segédletet a Shift+O kombinációval el is forgathatjuk, hogy megtalálhassuk a nekünk legmegfelelőbb állását.

Az Adobe XD magában nem tartalmazza az aranymetszést, viszont persze erre is létezik egy remek, ráadásul vadonatúj plugin (most januárban került fel a listára), mégpedig Fibs néven. A Fibs gombnyomásra dob be a munkalapra négyzetekből felépített Fibonacci-téglalapokat, vagy ha éppen arra vágyunk, a spirált is rögtön belerajzolja. Arra érdemes figyelni, hogy a négyzeteket a plugin egymástól független objektumokként helyezi el a képen, így ha át szeretnénk méretezni őket, először érdemes groupolni az egész pakkot, ezután már együtt fognak növekedni, nem csak a közöttük levő távolság (lehet, hogy újra ki kell előbb választani a csoportot, hogy érvényesüljön a váloztatás). Az így kapott négyzeteket változatos módon használhatjuk a munkánkban, például építőkockaként rakosgathatjuk a formálódó terv mellé a belső arányok kiméréséhez vagy pontosításához. Ha körökre lenne szükség, a generált négyzetek méretével azonos köröket 1-2 klikkel könnyen készíthetünk (érdemes ezeket a segédformákat egy külön rétegen tárolni, hogy ne zavarják össze a fő designunkat vagy a rajzolgatást).

Az Adobe Illustrator ugyan szintén nem tartalmaz beépített aranymetszés-eszközt, de a fenti XD pluginnal generált négyzeteket például nagyon egyszerűen exportálhatjuk SVG formátumban – vagy mi magunk is pár perc alatt összedobhatunk egy Fibonacci spirált, például a lenti videó tanácsait követve.

Szép számmal akadnak külső eszközök is, amik egyszerűbbé teszik a munkát az aranymetszéssel.

Létezik például online aranymetszés kalkulátor is, ez egy egyszerű kis weblap, ami heves számológép-nyomogatás helyett egy-két lépéssel gyorsabban kiszámolja neked az arany arányt a rövid, a hosszú oldal vagy a teljes hosszúság beadásával is.

Ugyanitt egy arany téglalap kalkulátort is találhatsz, amivel értelemszerűen téglalapjaink méreteit számolhatod ki nagyon gyorsan. Figyelj oda ezeknél az eszközöknél, hogy azonos mértékegységben legyen az összes értékünk!

Létezik egy program PC-re és Macre is Phimatrix néven (aranyos módon a program fejlesztése megállt az 1.618-as verziószámnál), ez bárhová elég szabadon beállítható aranymetszés alapú grideket rajzol a képernyőnk fölé. Két hétig ingyenesen kipróbálható, és 30 napos pénzvisszafizetési garanciát is ígérnek.

Mindennek a tetejébe találhatunk valódi, kézzel fogható eszközöket is hasonló célokra.

Főleg fotósok számára ajánlják a kis, átlátszó plasztiklapra felrajzolt Fibonacci-téglalapot. Tíz dollárért árulják az interneten, és valóban nagyon jópofa eszköz, de azt gondolom, ha nem akarunk a házhoz szállításra várni, egy permanens filc segítségével elég gyorsan alkothat bárki egy hasonló lapot magának, ha szükségét érzi.

Grafikusok, szobrászok, és, meglepő (talán mostanra már nem annyira meglepő) módon kozmetikusok számára kifejlesztett eszköz az aranymetszés körző vagy mérce, ezt golden ratio caliper vagy gauge néven érdemes keresni az interneten, ha szeretnénk egyet az íróasztalon tudni.

A tudomány mai állása szerint az aranymetszés amúgy a szemöldökformálás egyik nagy titkos fegyvere is – ez a kis videó tömören bemutatja az ideális arányokat, amiket aztán a sminkesek is igyekeznek a kliens arcán megvalósítani.

Az aranymetszés témája kifogyhatatlan, ha az embert elkapja a gépszíj egy idő után azon kapja magát, hogy már mindenhol arany téglalapokat és Fibonacci-spirálokat kezd keresgélni. Mint minden szerkesztési elvet, természetesen érdemes ezt is némiképp lazábban alkalmazni, de fő szabályként mindenképpen tartsuk észben, sokat segíthet egy grafika, logó- vagy oldalterv kiegyensúlyozásában.