7 tipp, hogy olvasható legyen a háttérképre helyezett felirat
Manapság sok weboldalon találkozhatunk azzal a megoldással, hogy egy-egy feliratot a mondanivalóhoz kapcsolódó háttérképre helyeznek. Ez nem véletlen, hisz ez a megjelenés sokat hozzá tud tenni a felhasználói élményhez. Fontos azonban, hogy az így elhelyezett szöveg is olvasható maradjon. Ennek megvalósításához következik most pár praktika.
Miről olvashatsz?
1. Simán csak ráhelyezzük a szöveget a képre
Ez a módszer akkor működik jól, ha a fotó viszonylag sötét és homogén, nem nagyon vannak rajta kontrasztos részletek. Általában a fehér betűszín a legjobb választás, viszont ha esetleg világosabb képterületre kerül a szöveg, már nem lesz olyan jól olvasható.
A felhasználási terület viszonylag korlátozott, hiszen az eredmény csak akkor lesz megfelelő, ha a kép és a felirat is állandó, illetve a szöveg helye sem változik meg. Ez utóbbi a különböző kijelző méreteknél jelentkezhet problémaként.
2. Árnyékot adunk a betűknek
Az előző megoldást továbbfejleszthetjük azzal, hogy a betűknek árnyékot adunk, így ha esetleg világosabb háttérre kerül egy szövegrészlet, akkor is olvasható marad.
3. Áttetsző réteg a felirat alatt
Kontrasztos képnél az előző megoldások nem jók, a szöveg nem lesz jól olvasható. Erre egy egyszerű megoldás, ha a felirat alá áttetsző fekete téglalapot rakunk, a betűk pedig fehérek lesznek. Így a szöveg is olvasható lesz és az alatta lévő képrészlet is felsejlik. Ez az átlátszó réteg akár soronként változó méretű is lehet, alkalmazkodva az adott sor hosszához.
A fekete színhez és a fehér betűkhöz nem kell feltétlenül ragaszkodni, lehet például áttetsző fehér alapon sötét betű, vagy egyéb kontrasztos megoldás. (De csak óvatosan a színekkel, ne feledjük, hogy az egyszerűbb nagyszerűbb!)
4. Áttetsző réteg az egész képen
Ha nem elég sötét a háttérkép, jó módszer lehet, hogy teszünk rá egy fekete vagy színes átlátszó réteget.
A következő példán láthatjuk, hogy az eredeti fotó néhol világos, néhol sötét. Ha ráhelyezünk egy fekete, illetve kék átlátszó réteget, a felirat is jobban olvasható lesz.
5. „Fagyott üveg” a szöveg alatt
Választhatjuk azt is, hogy a szövegterület alá egy homályos, elmosódott réteget teszünk, aminek olyan hatása van, mintha fagyott üveg lenne. Ez lehet színtelen, de akár színes is.
6. Fokozatosan a képbe olvadó háttér a felirat alatt
Elképzelhető, hogy a képnek nem pusztán díszítő, háttérkép jellegű szerepe van, hanem fontos, hogy lássuk is, mi van rajta. Ez előfordulhat például egy webáruház termékfotói esetében vagy akár profilképeknél.
Ennél a megoldásnál a fehér szöveget a kép aljára tesszük, alá egy színátmenetes réteg kerül, ami a kép alján fekete (vagy áttetsző fekete) és fokozatosan átmegy teljesen átlátszóba. A betűkre akár árnyékot is tehetünk a még könnyebb olvashatóság érdekében. Ez a megoldás természetes hatású, mert olyan, mintha fölülről jönne a fény, akár a valóságban. Ha nagyon finoman alkalmazzák, gyakran nem is lehet észrevenni.
7. Ovális átmenet a szöveg alatt
Az előző módszerhez hasonló ez a megoldás, de itt a felirat alá nem lineáris, hanem sugaras színátmenetes réteg kerül, aminek a közepe sötétebb. Jó megoldás lehet, ha a háttérképünk nem állandó és nem tudjuk garantálni, hogy mindig ugyanolyan sötét vagy világos képterületre esik a szöveg.
Az alábbi képen a felirat alá tett ovális, átmenetes réteget láthatjuk, a végeredmény pedig a jobb alsó kép.
Ha velünk készítteted el a weboldalad, nem lesz ilyen problémád, mindig mindent jól el lehet majd olvasni!
A cikk elkészítésében forrásként használtam Erik D. Kennedy Learn UI Design című kurzusát. A fotók lelőhelye: Unsplash.
* * * * * * * *
Legyen még szuperebb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!