Lyhyesti
- Useimmat retro-tekstitehosteet perustuvat kolmeen käsittelyyn: risopainon kohdistusvirheeseen, siirrettyyn kaksoiskuvaan ja toistuvien kopioiden jälkeen.
- Riso jäljittelee risopainoa, jossa kaksi painoväriä ovat hieman eri kohdissa ja sekoittuvat päällekkäisillä alueilla.
- Kaksinkertainen sijoittaa sanan taakse yhtenäisen kopion, joka on siirretty hieman sivuun ja väritetty kontrastisävyllä.
- Jälki toistaa sanan useita kertoja sen takana, jokainen kopio kauempana, ja tuo mieleen vauhdin tai 70-luvun alkutekstit.
- Retro-tehosteet toimivat parhaiten muutamassa suuressa sanassa ja lihavassa fontissa, sommittelun omilla väreillä ja yksi tehoste kerrallaan.
Tällä sivulla
Lähes kaikki retro-tekstitehosteet perustuvat kolmeen käsittelyyn. Riso jäljittelee edullista kaksiväripainoa, jossa värit osuvat hieman eri kohtiin. Kaksinkertainen sijoittaa sanan taakse toisella värillä tehdyn yhtenäisen kopion, kuin silkkipainon väärin kohdistetun kerroksen. Jälki toistaa sanan sen takana askel kerrallaan, kuin 1970-luvun alkutekstissä tai liikkeessä. Kaikki toimivat muutamassa suuressa sanassa ja lihavassa fontissa, sommittelun väreillä ja yksi tehoste kerrallaan.
Tunnelma
Sopii
Ulkonäkö
Tunnelma
Sopii
Tunnelma
Sopii
Riso-tekstitehoste
Risografi on sapluunapainokone. Jokaisella painovärillä on oma sapluuna ja rumpu, joten kaksivärinen työ painetaan kahtena kerroksena. Kerrokset osuvat harvoin täysin kohdakkain: kumpaakin väriä pilkistää reunasta ja päällekkäiseen kohtaan syntyy kolmas väri. Risovärien fluoresoivista pinkeistä, kirkkaista sinisistä ja aurinkoisista keltaisista on tullut oma tyylinsä, jota pienlehdet, riippumattomat kustantajat ja kuvittajat suosivat.
Pidä siirtymä pienenä, muutaman prosentin suuruisena kirjaimen korkeudesta. Anna värien kertoutua päällekkäin sen sijaan, että toinen peittäisi toisen. Lisää kirjaimiin hieman rakeisuutta, jos mahdollista: oikea risoväri asettuu päällystämättömälle paperille epätasaisesti. Pinkin ja sinisen päällekkäisyydestä syntyvä syvä violetti tekee vaikutelmasta uskottavan.
Kaksinkertainen-tekstitehoste
Kaksinkertainen on tekniikoista yksinkertaisin: sanan takana on yksi yhtenäinen kopio kontrastivärillä, hieman sivuun siirrettynä. Tulos muistuttaa silkkipainoa tai tarraa ja näyttää itsevarmalta ja graafiselta. Tavallisen varjon sijaan kaksoiskuva on terävä ja värikäs, ei tumma ja pehmeä. Siirrä kopiota rohkeasti noin 5:stä 8:aan prosentin verran kirjaimen korkeudesta. Liian pieni siirtymä näyttää virheeltä.
Jälki-tekstitehoste
Jälki toistaa sanan sen takana neljästä kahdeksaan kertaa, jokaisen kopion hieman kauempana. Kun kopioiden väri vaihtuu esimerkiksi lämpimän auringonlaskupaletin läpi, syntyy tunnistettava 70-luvun alkuteksti-ilme. Kun läpinäkyvyys kasvaa, sana tuntuu juuri saapuneen liikkeessä. Pidä askelvälit tasaisina ja suunta samana. Satunnainen rytmi näyttää rikkoutuneelta, ei vintagelta.
Lyhyt, voimakas otsikko lämpimällä pohjalla: juuri tällaista muotoa Jälki tai Kaksinkertainen tarvitsee.
Pienlehtimessujen tarina, jonka otsikkoon kaksivärinen risopinta sopisi luontevasti.
Retro-tekstitehosteet CSS:llä
Kaikki kolme voi toteuttaa text-shadow-ominaisuudella ja Rison kohdalla lisäksi sekoitustilalla. Määritä siirtymät em-yksiköissä, jotta tehoste skaalautuu fonttikoon mukana. Säilytä teksti aitona ja valittavana.
/* Double: one crisp echo */
.double {
color: #fff7ed;
text-shadow: 0.06em 0.06em 0 #b91c1c;
}
/* Trail: repeated copies through a warm palette */
.trail {
color: #fff7ed;
text-shadow:
0.04em 0.04em 0 #fbbf24,
0.08em 0.08em 0 #f97316,
0.12em 0.12em 0 #ea580c,
0.16em 0.16em 0 #c2410c,
0.20em 0.20em 0 #7c2d12;
}
/* Riso: two inks multiplied, slightly out of register */
.riso {
position: relative;
color: #0078bf;
mix-blend-mode: multiply;
}
.riso::after {
content: attr(data-text);
position: absolute;
inset: 0;
color: #ff48b0;
transform: translate(0.04em, -0.03em);
mix-blend-mode: multiply;
}<h1 class="riso" data-text="Zine fair">Zine fair</h1>. Multiply toimii vaalealla pohjalla kuin oikea muste paperilla. Jotkin ruudunlukijat lukevat myös luodun sisällön, joten sana saattaa kuulua kahdesti.Näin käytät retro-tekstitehosteita hyvin
- 1
Aloita sopivasta fontista
Lihava ja yksinkertainen fontti tai pehmeä 70-luvun antiikva. Retro-fontit esittelee kirjasimia vuosikymmenittäin.
- 2
Käsittele kahdesta viiteen sanaa
Vain otsikko. Lisätiedot pysyvät tasaisina ja selkeinä.
- 3
Poimi värit taustasta
Kaksoiskuvan, jäljen tai toisen painovärin tulee kuulua sommittelun nykyiseen palettiin.
- 4
Tee siirtymästä tarkoituksellinen
Risossa pieni, Kaksinkertaisessa rohkeampi ja Jäljessä tasaisin askelin.
- 5
Käytä yhtä tehostetta sommittelussa
Riso, Jälki ja ääriviiva yhdessä ovat naamiaisasu. Yksi tehoste on tietoinen valinta.
Vältä
- Jälkeä pitkässä otsikossa
- Risovärejä mustalla taustalla
- Liian lähellä olevaa kopiota, joka näyttää painovirheeltä
- Siirtymiin yhdistettyä hehkua
- Eri tehostetta jokaisessa julkaisussa
Tee näin
- Jälki yhteen tai kahteen lyhyeen sanaan
- Riso paperisävyille ja vaaleille väreille
- Selkeä, rohkea siirtymä
- Vain teräviä, yhtenäisiä kopioita
- Yksi retro-tehoste kampanjan tunnusmerkiksi
Laajemman valikoiman, myös ääriviivat ja kohotukset, löydät oppaista tekstitehosteet, ääriviivateksti ja 3D-tekstitehosteet. Rakeisuus tekee Risosta erityisen uskottavan. Rakeiset liukuvärit näyttää, miten lisäät sitä taustaan.
Riso, Kaksinkertainen ja Jälki Gradientlyssä
Gradientlyn kirjainten käsittelyihin kuuluvat Riso, Kaksinkertainen ja Jälki. Ne piirretään Markin omilla väreillä, joten kopioita ei tarvitse pinota käsin. Versiot ovat graafisia: Riso painaa toisen värin hienona, hieman sivuun kohdistettuna rasterina. Kaksinkertainen piirtää avoimet kirjaimet ja niiden ympärille toisen ääriviivan. Jälki lähettää häipyviä ääriviivoja yhtenäisten sanojen taakse. Mark pitää sanat luettavina siirtämällä rauhallisimman alueensa niiden taakse. Sen rakeisuus antaa retro-otsikolle painetun pinnan.
Usein kysyttyä
Mikä on Riso-tekstitehoste?
Se jäljittelee risopainoa: kaksi painoväriä osuvat hieman eri kohtiin ja sekoittuvat päällekkäisillä alueilla kolmanneksi väriksi.
Miten teen retro-tekstitehosteen CSS:llä?
Pinoa yhtenäisiä text-shadow-kopioita ilman sumennusta. Yksi kopio tekee kaksoiskuvan, useat asteittain siirretyt kopiot jäljen ja kertova pseudoelementti Rison.
Mitkä värit sopivat 70-luvun tekstitehosteeseen?
Lämpimät auringonlaskun sävyt, kuten kulta, oranssi, ruoste ja ruskea, kermanvärisellä tai syvänruskealla pohjalla.
Mitä eroa on kaksoiskuvalla ja tavallisella varjolla?
Kaksoiskuva on terävä, värillinen kopio hieman sanan takana. Tavallinen varjo on yleensä tumma ja sumea.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme