Hogyan kerülhet szöveget fotók tippek és trükkök

Igazgatója a társaság tábla Technology Jonathan Katrell tanult példák sikeres elrendezése szöveg fölött fotók és tette öt ajánlást tervezők.

Digital-piros nyakörv ügynökség készített kategória „interfész” fordítás megjegyzi Shoafa.

Minta, ha a szöveg tetején helyezik el a háttérképet, évek óta népszerű. Ebből származik a hosszú megjelenése előtt a web design - szöveg fölött képeket képes a nagyobb emocionális és tágabb összefüggésben. Egészen a közelmúltig, a képek, hogy kisebb miatt lassú az internetkapcsolat. Ahogy növekedés és a gyors növekedés felbontás vannak lehetőségek arra, hogy nagy képeket a design.

Fontos, hogy alaposan fontolja meg a tervezési megoldások, amelyek ebben a mintát. Nem lehet csak a szöveget át minden képet, és elvárják, hogy mindig jól néz ki.

Ebben a cikkben fogjuk megvitatni az öt fő szempont az elrendezése a szöveg a kép fölött, amely segít, hogy megfelelően kombinálni szöveget és képeket.

1. Kontraszt segítségével szín és fényerő

Ügyeljen arra, hogy a képeket, amelyek jelentős ellentétben a szöveget. Különösen a használatát sötét képek a világos szöveg vagy sötétítő szűrők vagy overlay lehet hatékony módja annak, hogy elegendő kontrasztot.

Néhány tipp, hogy elérjék a kívánt kontraszt:

  • Ha csak nem tudja kivenni a betűket, a kontraszt - szemetet.
  • Kontraszt nem mindig jelenti a kontraszt a sötét és világos, komplementer színek is tud biztosítani a természetes kontraszt.
  • Ha a kép összetett, és teljesen életlen, használata overlay vagy képszerkesztő lesz a leghatékonyabb megoldásokat.

Ebben a példában használjuk WebKit-szűrőket, hogy ellenőrizzék a kontrasztot és a fényerőt a kép, mi meg egy opcionális tag. A szűrő úgy néz ki, nincs előtag: szűrő: fényerő (40%) szemben (70%).

Olvassa sokkal könnyebb; Ez megköveteli a CSS-szűrő

ayr.com

geckoboard.com

anodpixels.com

obakkifoundation.org

2. Contrast a mérete és elhelyezkedése

Szín - nem az egyetlen módja annak, hogy működjön együtt a kép kontrasztját kapcsolatban a szövegben. A méret a szöveg és annak helyét képest a központi képelemek nagy jelentősége van, mivel ez közvetlenül befolyásolja a szöveg érthetőségét.

Ebben a példában válasszon ki egy képet nagy és viszonylag egyenletes ég területen. Ez egy kiváló hely a szöveget. Összehasonlításképpen, a kevésbé népszerű cím szállás - kellős közepén a kép, ahol a horizontot.

Rossz példa - gyenge kontrasztot, helytelen a szöveg helyzete

Jó szemben, a legjobb helyen

themostnorthernplace.com

eup.volkswagen.no

3. Felbontás keresztül mélyreható

Válassza ki a képet, amelynek mélysége készítmény. Ez adja a szöveget egy sima háttér, ami növeli az olvashatóságot. Helyezzük a szöveget az indiszponált kép területet, és biztosítják, hogy a szín a szöveg megfelelő kontrasztot a fő szín indiszponált területen.

Ez könnyen elvégezhető egyszerű elrendezése a szöveg területeken kevesebb figyelmet, mint ebben a példában.

une.ch

gloriasrestaurants.com

atelier-serge-thoraval.com/a>

purplerockscissors.com

4. Válogatás képek az objektum

A szöveg a kép csak akkor hatásos, ha az állítólagos kombináció jól megy egymással. Például, ne válassza általánosítva a képet, ha van egy kép, hogy pontosabban továbbítja az üzenetet. Amikor kiválaszt egy képet, úgy az érzelmi és szó kontextusban, különösen, hogy hogyan viszonyulnak a hang az üzenet, amely továbbítja a szöveget.

  • Válassza ki a képet, bemutatva egy teljes mondatot. A felhasználónak meg kell világosan látni a képet tárgy és megérteni az intézkedés, hogy elfogták, a kép, ha egyáltalán van.
  • Ne válassza ki a képet a gyenge fókuszpontok.
  • Tartsa a jelentése a „tisztaság” a kép a fejemben. Ha a kép többé-kevésbé okoz olyan érzést közvetíti és tárgyakat, impozáns nehéz vagy szűrőket lehet alkalmazni anélkül, hogy elveszítené kép hatékonyságát.

blood-and-water.animalplanet.com

pixelgrade.com

formula1data.com

5. A chip egy háromdimenziós

Ökölszabály: minél kisebb a szöveg, annál valószínűbb, hogy lesz a Z-pozícióba.

danielladraper.com

lobagola.com

vivaco.com

Kapcsolódó cikkek