Paperitekstuuri taustana: käsinkosketeltava ilme näytölle

Paperitekstuuri tekee näytöllä näkyvästä designista painetun, käsinkosketeltavan ja käsintehdyn oloisen. Se toimii, koska paperi viestii huolenpidosta: kutsusta, kirjeestä tai ruokalistasta, jolle joku on valinnut sopivan paperin. Tarvitset kolme yhteen toimivaa kerrosta: lämpimän tai sävytetyn pohjavärin, hienoja kuituja tai rakeisuutta sekä hieman epätasaisesti arkille osuvan valon. Useimmat epäaidot paperitaustat epäonnistuvat liioittelemalla viimeistä kerrosta.

Valitse designiin sopiva paperi-ilme

Paperi ei ole yksi tekstuuri. Puuvillapaperi, voimapaperi, sanomalehtipaperi ja washi tuntuvat aivan erilaisilta, ja jokainen sopii eri brändille. Aloita nimeämällä paperilaatu, jota jäljittelet.

Näin teet paperitekstuuritaustan

Voit rakentaa uskottavan paperipinnan alusta asti missä tahansa editorissa, jossa on kohina ja sekoitustilat. Skannattu paperikin toimii, mutta itse rakennettu tekstuuri skaalautuu siististi joka kokoon eikä paljasta skannerin reunoja.

1. 1

   Täytä pohja

   Täytä työalue taulukon paperivärillä, esimerkiksi päällystämättömän kermanvärisen paperin sävyllä #f3ead8.

2. 2

   Lisää hieno pintakarheus

   Lisää keskiharmaa kerros ja yksiväristä kohinaa. Käytä Multiply- tai Soft Light -sekoitustilaa noin 4-8 prosentin peittävyydellä. Tämä on jokaiselle paperille ominainen hieno pintarae.

3. 3

   Lisää kuituja

   Lisää toinen, karkeampi kohinakerros ja venytä tai sumenna sitä hieman yhteen suuntaan. Hyvin pienellä peittävyydellä se näyttää arkin läpi kulkevilta kuiduilta.

4. 4

   Tee valosta epätasainen

   Lisää pehmeä säteittäinen häivytys, hieman vaaleampi yhteen kulmaan ja syvempi vastakkaiseen. Aito paperi ei valaistu täysin tasaisesti.

5. 5

   Tarkista tekstin väri

   Aseta pienin tekstisi taustalle ja katso sitä puhelimella. Jos jokin sana on vaikeampi lukea, vähennä ensin tekstuuria.

Toisen vaiheen hieno pintakarheus syntyy samalla tekniikalla kuin rakeisuustekstuuri. Paperissa sitä käytetään vain vähemmän ja lämpimämmällä pohjalla.

Hienovarainen paperi näyttää aidommalta

Paperitaustojen hakutulokset ovat täynnä rypistyneitä arkkeja, palaneita reunoja ja kahvirenkaita. Ne näyttävät paperin teemapuistoversiolta ja kilpailevat jokaisen taustalle kirjoitetun sanan kanssa. Hyvä paperitekstuuri on niin hiljainen, että se tuntuu ennen kuin se näkyy.

Paperitekstuurin käyttöideoita

Paperi toimii parhaiten siellä, missä painettu esinekin olisi luonteva. Näissä käyttökohteissa se tuo arvoa.

• Ravintolan ruokalistat päällystämättömällä kermanvärisellä paperilla, antiikvafontilla. Katso ruokalistan suunnittelu.
• Uutiskirjeet ja päiväkirjat, joissa paperi rauhoittaa pitkän tekstin lukemista.
• Hää- ja tapahtumakutsut; hääkutsun suunnittelu tarjoaa asetteluja.
• Käsityöbrändit voimapaperilla tai harmaalla kierrätyspaperilla.
• Sitaattikortit, joissa yksi rivi paperilla tuntuu jonkun kirjoittamalta viestiltä.

Typografia ja muste paperitaustoilla

Paperi muuttaa tekstin vaikutelmaa. Antiikvat tuntuvat kotoisilta kermanvärisellä ja puuvillapaperilla, koska ne on piirretty painotuotteisiin. Selkeä groteski sanomalehtipaperilla tai harmaalla kierrätyspaperilla näyttää modernilta ja hieman teolliselta. Antiikva ja groteski auttaa valinnassa. Kumman tahansa valitsetkin, käytä lämmintä lähes mustaa, kuten #2b2420. Puhdas musta näyttää digitaaliselta sävytettyä arkkia vasten.

Pidä leipäteksti mukavan kokoisena ja käytä hieman vahvempaa leikkausta kuin valkoisella pohjalla: tekstuuri syö kontrastia etenkin puhelimessa. Lyhyessä tekstissä, kuten yhdessä lauseessa sitaattikortilla, voit käyttää kevyempää leikkausta ja väljempää asettelua. Jos vertaat paperia muihin pintoihin, taustatekstuurien opas esittelee tärkeimmät ryhmät rinnakkain.

Paperitekstuuri CSS:llä

Verkkosivulla voit kerrostaa epätasaisen valoliukuvärin pohjavärin päälle ja lisätä sitten hyvin kevyen SVG-kohinakerroksen. Filmirakeisuutta pienempi baseFrequency luo pehmeämmän ja kuitumaisemman tunnun.

.paper {
  position: relative;
  isolation: isolate;
  color: #2b2420;
  background:
    radial-gradient(ellipse at 20% 15%, #fbf7ef 0%, transparent 55%),
    radial-gradient(ellipse at 85% 90%, #e8dcc4 0%, transparent 60%),
    #f3ead8;
}

.paper::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
  opacity: 0.08;
}

Gradientlyn Markeissa on paperi- ja hiekkamateriaaleja: käsintehdyn oloisia kuituja, pehmeitä laveerauksia ja hienoa liikkuvaa rakeisuutta, jotka renderöityvät elävinä joka koossa. Arkin rauhallisin kohta siirtyy sanojesi taakse. Etsi Markkinoilta sanalla ”paper” tai suodata vaaleita pohjia, ja suunnittele valitsemallasi Markilla maksutta.