7 tipp, hogy olvasható legyen a háttérképre helyezett felirat

Szemüveg letéve egy asztalra

Másnak is megmutatnád? Oszd meg!

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.

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!)

Szöveg elhelyezése képen
Szöveg elhelyezése képen

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.

Hegyek, az előtérben patakkal
Az eredeti kép kontrasztos és viszonylag nagy világos területei is vannak

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.

Kutyák felirat

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.

Másnak is megmutatnád? Oszd meg!

* * * * * * * *

Legyen még jobb a weboldalad! Hasonló bejegyzéseket a Blogban találsz!