Gradienttäckning: tona foton utan att dölja dem

En gradienttäckning är ett färglager som tonar ut över ett foto, lagt ovanpå för att tona det, ge en uppsättning bilder en enhetlig look eller göra en rubrik läsbar. Knepet är att den tonar ut: en del av fotot berörs kraftigt, resten knappt alls. Därför ser en gradienttäckning genomtänkt ut medan en platt svart ruta på 50 procent ser ut som en nödlösning. Du väljer var färgen landar, hur stark den blir och hur den blandas med bilden under.

Fyra sorters gradienttäckning

Nästan varje täckning du ser på en webbplats, affisch eller ett inlägg är en av fyra typer. Att veta vilken du behöver sparar mycket pillande med opacitetsreglage.

Mörkläggningen: en täckning för text

En mörkläggning är arbetshästen. Den börjar helt genomskinlig och mörknar mot den kant där dina ord sitter, oftast nederkanten eller vänster. Fotot förblir orört där motivet är, och texten får ett lugnt, mörkt golv. Använd en mörk ton från själva fotot i stället för rent svart: en djup brun över en varm interiör, en marinblå över ett havsmotiv. Rent svart ser ut som en fläck.

De översta 40 procenten av mörkläggningen nedtill är helt klara, vilket håller ansikten och produkter ljusa. Mörkret byggs upp genom nedre halvan och når sin topp vid själva kanten, precis där en bildtext sitter. För fler sätt att hålla ord läsbara på bilder, läs läsbar text på foton.

Färgtoningar och blandningslägen

En färggradient är hur varumärken får stockfoton, mobilbilder och eventbilder att se ut som en familj. Lägg en gradient av två varumärkesfärger över fotot och ändra dess blandningsläge. Blandningsläget avgör hur färgen blandas med bilden, och det spelar större roll än färgerna.

Så lägger du en gradienttäckning på ett foto

1. 1

   Bestäm vad täckningen är till för

   Text, stämning eller enhetlighet. En mörkläggning för text, en gradient för stämning och enhetlighet. Om du inte kan säga vilket behöver du förmodligen ingen.

2. 2

   Plocka en mörk ton ur fotot

   Välj den djupaste färgen som redan finns i bilden för en mörkläggning, eller två varumärkesfärger för en gradient.

3. 3

   Rita gradienten över det område som behöver den

   Börja klar över motivet och bygg upp mot den kant där orden är. Håll tonavklingningen lång så att ingen linje syns.

4. 4

   Välj ett blandningsläge

   Normal för mörkläggningar, multiply för ljusa foton, screen för mörka och color för en enda ton.

5. 5

   Sänk opaciteten tills den nästan försvinner

   Höj den sedan ett steg igen. De bästa täckningarna märks bara när du stänger av dem.

6. 6

   Kontrollera texten i mobilstorlek

   Krymp designen till den storlek den ses i och läs varje ord. Kontrast som fungerar på en bildskärm kan fallera på en mobil, och färgkontrast har målen att sikta mot.

Hur mörk en gradienttäckning ska vara

Som arbetsgräns gäller: om den mörkaste kanten på en mörkläggning måste passera ungefär 80 procent innan texten går att läsa är fotot för stökigt för den platsen. Flytta orden, beskär annorlunda eller välj en lugnare bild. En gradient över hela bilden behöver mycket mindre, annars slutar fotot se ut som ett foto.

Gradienttäckningar på en webbplats

På webben kan du lägga täckningen och fotot i en enda deklaration, vilket håller ihop dem när bilden byts. Täckningen kommer först eftersom CSS målar det första lagret överst. Hela uppsättningen tekniker, inklusive blandningslägen och pseudoelement, finns i CSS för gradienttäckning.

.hero {
  min-height: 70vh;
  background-image:
    linear-gradient(180deg, rgba(10, 12, 20, 0) 40%, rgba(10, 12, 20, 0.8) 100%),
    url("/images/harbour.jpg");
  background-size: cover;
  background-position: center;
  color: #ffffff;
}

En gradient som matchar ditt varumärke varje gång

Täckningar glider isär när varje formgivare väljer sina egna färger. I Gradiently Studio kan foton tonas i din Marks egna färger som mono, duoton eller gradient, så att bilder från olika källor delar en palett utan att du matchar för hand. Och när orden sitter på en Mark i stället för ett foto lugnar den området bakom dem av sig själv, helt utan täckning. Läs duotonfoton i din Marks färger för hur gradienten fungerar.