Tips om u te helpen tekst op de juiste manier te vermengen met beelden

Het patroon van het gebruik van tekst bovenop achtergrondafbeeldingen is al jaren populair. De tekst op een afbeelding is ruim voor het webontwerp ontstaan en biedt een emotioneel boeiender en contextueeler rijke ervaring. Vóór de huidige dag moesten de afbeeldingen veel kleiner zijn om significant tragere bandbreedte mogelijk te maken. Omdat verbindingssnelheden en schermdichtheden snel toenemen, zijn we open voor het gebruik van veel grotere afbeeldingen in onze ontwerpen.

Ontwerpbeslissingen met betrekking tot deze techniek zijn ongelooflijk belangrijk om te overwegen, en het ontwikkelen van best practices om deze praktijk te beheersen, is noodzakelijk om een kwalitatief hoogstaand ontwerp te behouden. Je kunt niet simpelweg tekst over een afbeelding plaatsen en verwachten dat deze er goed uitziet.

In dit artikel bespreken we vijf verschillende aspecten van het plaatsen van tekst over afbeeldingen die u helpen bij het correct mixen van kopieën en afbeeldingen.

Notitie: overal in het artikel zijn dezelfde principes van toepassing bij het kiezen van video- en tekstcombinaties.

1. Contrast door kleur en helderheid

Het is absoluut noodzakelijk om afbeeldingen te gebruiken die een groot contrast met de tekst hebben. In het bijzonder kan het gebruik van donkere afbeeldingen met lichtere tekst of donkere afbeeldingen met filters of een overlay-element een effectieve manier zijn om ervoor te zorgen dat u voldoende contrast gebruikt.

Enkele tips om het juiste contrast in kleur en helderheid te bereiken:

Als je de lettervormen niet meteen kunt zien, is je contrast uitgeschakeld.
Contrast betekent niet altijd donker versus licht; complementaire kleuren bieden ook een natuurlijk contrast.
Als de afbeelding complex en volledig scherp is, is het gebruik van een overlay of het bewerken van de afbeelding waarschijnlijk de meest effectieve optie.

In dit voorbeeld gebruiken we WebKit-filters om het contrast en de helderheid van een afbeelding te manipuleren, die we plaatsen en manipuleren met een extra

. Het filter ziet er als volgt uit: filter: helderheid (40%) contrast (70%);

Moeilijk om te lezen; geen focus op tekst of afbeelding

Veel gemakkelijker te lezen; vereist CSS-filters

Bekijk de demo.

Meer voorbeelden

https://ayr.com/

https://www.geckoboard.com/

http://anodpixels.com/

https://obakkifoundation.org/

2. Contrast door middel van dimensionering en positionering

Kleur is niet de enige manier om het contrast van een afbeelding te verbeteren in relatie tot overlappende tekst. Het kiezen van de tekstgrootte en positie ten opzichte van de gefocuste elementen van de afbeelding is essentieel, omdat dit betrekking heeft op de leesbaarheid van de tekst zelf.

In dit voorbeeld hebben we gekozen voor een afbeelding met een groot, relatief homogeen luchtruim. Dit is een perfect gebied om tekst te plaatsen. Een veel minder leesbare positionering van de tekst zou daarentegen direct in het midden van het beeld zijn, waar de skyline verschijnt.

Slecht voorbeeld; Slecht contrast, slechte plaatsing.

Goed contrast, betere plaatsing.

Bekijk de demo.

Verdere voorbeelden

http://www.themostnorthernplace.com/

http://eup.volkswagen.no/

http://www.dtelepathy.com/

3. Leesbaarheid door diepte

Kies een afbeelding die de scherptediepte gebruikt. Dit zorgt voor een vloeiendere achtergrond voor tekst, wat de leesbaarheid zal vergroten. Plaats uw tekst op het onscherpe deel van de afbeelding en zorg ervoor dat de tekstkleur in contrast staat met de primaire kleur van het gebied dat niet is scherpgesteld.

We kunnen dit eenvoudig doen door tekst te plaatsen in gebieden met een lagere focus, zoals in dit voorbeeld.

Bekijk de demo.

Verdere voorbeelden

http://une.ch/creation/home

http://www.gloriasrestaurants.com/

http://www.atelier-serge-thoraval.com/en/

http://purplerockscissors.com/

4. Keuze van beeldonderwerp

Tekst over beeld is alleen zo effectief als de afgeleide vergadering van de combinatie. Kies bijvoorbeeld geen generieke beelden als meer specifieke beelden beter communiceren. Houd bij het kiezen van afbeeldingen rekening met de emotionele evocatie en letterlijke context van het beeld, vooral omdat het betrekking heeft op de toon van de boodschap die het exemplaar moet overbrengen.

Een aantal tips:

Kies afbeeldingen met een volledige zin; de gebruiker moet het onderwerp van de afbeelding duidelijk zien en begrijpen welke actie wordt ondernomen in de afbeelding, indien aanwezig.
Kies geen afbeeldingen met een zwak focuspunt.
Houd rekening met het belang van duidelijkheid in het beeld. Als de afbeelding min of meer het gevoel en minder details oproept, kunnen zware overlays of filters worden toegepast zonder de effectiviteit van de afbeelding te verliezen..

Voorbeelden

http://blood-and-water.animalplanet.com/

http://pixelgrade.com/demos/rosa/

http://formula1data.com/

5. Driedimensionaal bewustzijn

Bedenk waar de tekst verschijnt in relatie tot het focusniveau van de verschillende elementen in de afbeelding. Lijkt de tekst achterover te leunen, of komt hij op de voorgrond? Past de tekst erin of behoudt deze een eigen unieke positie in z-space? Hoe verhoudt de tekst zich tot de gerichte elementen van het beeld, het meest specifiek?

Een vuistregel: hoe kleiner de tekst, hoe verder de tekst in Z-ruimte lijkt te verschijnen.

In dit voorbeeld gebruiken we voorgrondtekst die veel dichter bij ons lijkt te zijn dan de struiken op de achtergrond. Ondanks het hoge detailniveau op de achtergrond, identificeren onze ogen natuurlijk de langere lijnen en grotere vormen van de tekst, waardoor de tekst veel eenvoudiger wordt geïnterpreteerd dan het slechte voorbeeld. In het slechte voorbeeld lijken de vormen van de tekens de tekst op ongeveer dezelfde z-positie te plaatsen als de bladeren op de achtergrond.

Bekijk de demo.

Meer voorbeelden

http://danielladraper.com/

http://www.lobagola.com/

http://vivaco.com/demo/ventcamp/index-photo.html

Komt binnenkort

Welnu, dat wikkelt onze discussie over esthetiek in. In het volgende artikel zullen we verschillende manieren bespreken om deze technieken te combineren met zweefinteracties en -animatie.

Web ontwerp

Tips om uw workflow voor afbeeldingsverwerking in Lightroom te versnellen

Tips om de feed van uw blog aan te passen en te optimaliseren