Abstrakta bakgrunder: former, fält och flöde

En abstrakt bakgrund består av färg, form och textur i stället för en igenkännbar scen. Nästan alla hör till en av tre familjer: geometriska bakgrunder byggda av skarpa kanter, ränder och mönster, flytande bakgrunder byggda av mjuka övergångar och böljande ytor, och texturerade bakgrunder byggda av korn, brus och material. Välj den familj som passar känslan du vill ha, och behåll sedan ett lugnt område där orden ska stå.

Den här guiden går igenom varje familj med levande exempel och koder, när du använder vilken och hur du hindrar en abstrakt bakgrund från att köra över innehållet. För gradienttyperna som många av dem bygger på, se typer av gradienter.

Tre sorters abstrakta bakgrunder

Geometriska abstrakta bakgrunder

Geometriska bakgrunder använder skarpa kanter: delningar, ränder, ringar, kilar och rutnät. De känns avsiktliga och strukturerade och passar naturligt ihop med kraftfulla typografiska layouter som den schweiziska stilen. I CSS skapas kanterna med hårda färgstopp, alltså två färger på samma position.

Knepet med geometriska bakgrunder är tonen. Ränder eller rutor med hög kontrast vibrerar och gör text ovanpå nästan omöjlig att läsa. Håll mönsterfärgerna nära varandra i ljushet, som de tonala ränderna och ringarna ovan, och spara hög kontrast till ytor utan ord. CSS-mönster har många fler.

Flytande abstrakta bakgrunder

Flytande bakgrunder har inga kanter alls: färg samlas, driver och veckar sig som ljus på vatten eller siden. Hit hör mesh-gradienter, norrskenssken och böljande band. De känns lugnare och mer exklusiva än geometriska, och de är de lättaste abstrakta bakgrunderna att lägga text på, eftersom en mjuk yta har stora jämna områden.

.fluid {
  background-color: #2b1055;
  background-image:
    radial-gradient(40% 50% at 20% 30%, #ff7a59cc, transparent 70%),
    radial-gradient(45% 55% at 80% 25%, #c43d7acc, transparent 70%),
    radial-gradient(50% 60% at 60% 85%, #5b3cc4cc, transparent 70%);
}

Flytande bakgrunder finns i namngivna stilar: mesh-gradienter blandar flera färgpunkter över en yta, och aurora-gradienter låter lysande fläckar sväva på ett mörkt underlag. Båda ser bäst ut med lite korn ovanpå.

Texturerade abstrakta bakgrunder

Textur förvandlar platt färg till en yta du nästan kan ta på. Fint korn ser ut som film, en grövre struktur som papper, mjuka fibrer som tyg, en frostad oskärpa som glas. Texturen kan vara hela bakgrunden, som en pappersfärgad yta, eller ett lager över en gradient, och så görs de flesta exklusivt utseende gradientbakgrunder.

Håll texturen diskret när text ligger ovanpå: så mycket att den märks på armlängds avstånd, men inte så mycket att bokstäverna ser smutsiga ut. Bakgrundstextur går igenom korn, papper, tyg och glas i detalj, och korniga gradienter förklarar varför lite brus får färg att se dyr ut.

Så gör du en abstrakt bakgrund av varumärkets färger

De bästa abstrakta bakgrunderna ser abstrakta ut men tillhör någon. Att utgå från dina egna färger och former, i stället för ett färdigt bildpaket, är det som gör att det blir så.

1. 1

   Ta två eller tre varumärkesfärger

   Lägg till en djupare ton ur samma familj för djupets skull. Så väljer du varumärkesfärger hjälper dig om du inte har några än.

2. 2

   Välj en familj

   Geometrisk om ditt varumärke är precist eller energiskt, flytande om det är lugnt eller exklusivt, texturerad om det är hantverksmässigt eller varmt.

3. 3

   Låna en form från varumärket

   En kurva från logotypen, vinkeln på en bokstav, en cirkel från en ikon. När du upprepar den i bakgrunden binds de två ihop.

4. 4

   Planera den tysta zonen

   Bestäm var texten ska ligga i varje format och håll det området jämnt i ljushet.

5. 5

   Lägg till textur sist

   Ett lätt korn över allt, och kontrollera sedan i mobilstorlek med riktiga ord ovanpå.

Välj abstrakt bakgrund efter uppgiften

Anpassa abstraktionen efter innehållet. En datatung bild vill ha en stilla flytande eller tonal yta. Ett lanseringsinlägg tål en djärv geometrisk delning. En meny eller en hantverksprodukt vill ha textur. Och vad du än väljer: testa i verklig storlek med de riktiga orden på, för abstrakta bakgrunder som ser vackra ut tomma konkurrerar ofta med texten när den väl kommer dit.

Marks i Gradiently är flytande och texturerade abstraktioner i ett: färger, upp till tre staplade material, ljus, korn och rörelse, renderade live bakom din design med det lugnaste området flyttat bakom orden. Du kan bläddra bland dem på Marknaden eller skapa en egen i Forge.