Abstraktit taustat: muodot, värialueet ja virtaus

Abstrakti tausta rakentuu väristä, muodosta ja pinnasta tunnistettavan kohtauksen sijaan. Lähes kaikki kuuluvat yhteen kolmesta ryhmästä: geometrisiin taustoihin, jotka on tehty teräväreunaisista muodoista, raidoista ja kuvioista, nestemäisiin taustoihin, jotka rakentuvat pehmeistä sävyvaihdoksista ja virtaavista alueista, sekä pintamaisiin taustoihin, joissa on rakeisuutta, kohinaa ja materiaalin tuntua. Valitse ryhmä, joka vastaa tavoittelemaasi tunnelmaa, ja jätä rauhallinen alue kaikkialle, minne sanat tulevat.

Tässä oppaassa käydään läpi jokainen ryhmä elävin esimerkein ja koodein, kerrotaan, milloin mitäkin käytetään, ja miten estät abstraktia taustaa jyräämästä sisällön alleen. Monen taustan pohjalla olevista liukuvärityypeistä lisää artikkelissa liukuvärien tyypit.

Kolme abstraktin taustan tyyppiä

Geometriset abstraktit taustat

Geometrisissa taustoissa on terävät reunat: jaot, raidat, renkaat, kiilat ja ruudukot. Ne tuntuvat harkituilta ja jäsennellyiltä, ja ne sopivat luontevasti vahvoihin typografisiin asetteluihin, kuten sveitsiläiseen tyyliin. CSS:ssä reunat syntyvät kovista värien pysähdyskohdista, eli kahdesta värista samassa kohdassa.

Geometristen taustojen kikka on sävy. Erittäin kontrastiset raidat tai ruudut väreilevät ja tekevät päälle tulevan tekstin lähes mahdottomaksi lukea. Pidä kuvion värit vaaleudeltaan lähellä toisiaan, kuten yllä olevissa sävyraidoissa ja renkaissa, ja säästä suuri kontrasti alueille, joilla ei ole sanoja. CSS-kuvioita on paljon lisää.

Nestemäiset abstraktit taustat

Nestemäisissä taustoissa ei ole lainkaan reunoja: väri kerääntyy, ajelehtii ja laskostuu kuin valo vedessä tai silkissä. Niihin kuuluvat mesh-liukuvärit, revontulihehkut ja virtaavat nauhat. Ne tuntuvat rauhallisemmilta ja arvokkaammilta kuin geometriset, ja niiden päälle on helpoin laittaa tekstiä, koska pehmeässä alueessa on suuria tasaisia kohtia.

.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%);
}

Nestemäisillä taustoilla on omat nimetyt tyylinsä: mesh-liukuvärit sekoittavat useita värikohtia pinnalle, ja revontuliliukuvärit kelluttavat hohtavia läiskiä tummalla pohjalla. Molemmat näyttävät parhailta, kun päällä on hieman rakeisuutta.

Pintamaiset abstraktit taustat

Pinta muuttaa tasaisen värin pinnaksi, jota melkein voi koskettaa. Hieno rake näyttää filmiltä, karkeampi pinta paperilta, pehmeät kuidut kankaalta ja himmeä sumennus lasilta. Pinta voi olla koko tausta, kuten paperinvärisessä alueessa, tai kerros liukuvärin päällä, ja juuri niin useimmat arvokkaan näköiset liukuvärit tehdään.

Pidä pinta hienovaraisena, kun tekstiä tulee päälle: tarpeeksi, jotta se tuntuu käden ulottuvilla, mutta ei niin paljon, että kirjaimet näyttävät likaisilta. Taustatekstuurit käsittelee rakeen, paperin, kankaan ja lasin tarkemmin, ja rakeiset liukuvärit selittää, miksi pieni kohina saa värin näyttämään arvokkaalta.

Abstraktin taustan tekeminen brändin väreistä

Parhaat abstraktit taustat näyttävät abstrakteilta mutta kuuluvat jollekulle. Kun lähdet omista väreistäsi ja muodoistasi etkä valmiista kuvapaketista, taustasta tulee omanlaisesi.

1. 1

   Ota kaksi tai kolme brändiväriä

   Lisää yksi syvempi sävy samasta perheestä, jotta syntyy syvyyttä. Jos värit puuttuvat vielä, apua löytyy artikkelista brändivärien valinta.

2. 2

   Valitse ryhmä

   Geometrinen, jos brändisi on tarkka tai energinen, nestemäinen, jos se on rauhallinen tai arvokas, pintamainen, jos se on käsityömäinen tai lämmin.

3. 3

   Lainaa muoto brändistä

   Käyrä logosta, kirjaimen kulma, ympyrä kuvakkeesta. Kun toistat sitä taustassa, kokonaisuus sitoutuu yhteen.

4. 4

   Suunnittele hiljainen alue

   Päätä, mihin teksti tulee kussakin koossa, ja pidä se alue vaaleudeltaan tasaisena.

5. 5

   Lisää pinta viimeisenä

   Kevyt rake kaiken päälle, ja tarkista sitten puhelimen koossa oikeilla sanoilla.

Abstraktin taustan valinta tehtävään

Sovita abstraktio sisältöön. Dataa täynnä oleva dia tarvitsee hiljaisen nestemäisen tai sävyiltään tasaisen alueen. Lanseerausjulkaisu kestää rohkean geometrisen jaon. Ruokalista tai käsityötuote kaipaa pintaa. Ja mitä tahansa valitset, testaa se oikeassa koossa oikeilla sanoilla, sillä tyhjänä kauniit abstraktit taustat taistelevat usein tekstiä vastaan, kun se saapuu.

Gradientlyn Markit ovat nestemäisiä ja pintamaisia abstraktioita yhdessä: värejä, jopa kolme päällekkäistä materiaalia, valoa, rakeisuutta ja liikettä, jotka piirtyvät livenä suunnitelmasi taakse niin, että niiden rauhallisin alue siirtyy sanojen taakse. Voit selata niitä Markkinoilla tai tehdä oman Forgessa.