Dizaina tendence: sagriezts teksts un tipogrāfija

Pūristi saka, ka jums nekad nevajadzētu mainīt tipogrāfiju. Burtiem vajadzētu parādīties tā, kā to iecerējis tipa dizainers, vai arī jums kopumā jāizvēlas cits fonts. Lai gan tas lielākoties ir taisnība, izņēmums ir sagrieztā teksta tendence.

Izsmalcinātais efekts liek tipa elementiem izskatīties tā, it kā tie būtu sagriezti ar precīzijas instrumentu, un tie logotipiem, virsrakstiem un vienkāršiem teksta blokiem var radīt vizuālu interesi. Sagrieztā teksta efekti var atšķirties no ļoti smalkiem (piemēram, nedaudz trūkstoša burta) līdz lielākai vārdu daļai.

Lieta, kas jāpatur prātā, izmantojot sagrieztu tekstu, ir tāda, ka vārdiem vienmēr jābūt lasāmiem - kāda jēga tur ir savādāk? - un jums jāpievērš īpaša uzmanība, lai šķelšanās dēļ neparādītos neparedzēti burtu savienojumi vai vārdi. Šeit ir apskatīts, kā panākt, lai tas darbotos jūsu labā, ar dažiem dizaina piemēriem, kas to labi dara.

Izpētiet Envato elementus

“Tradicionālā” šķēle

Sagrieztais teksts ietver gandrīz slāņainu izskatu ar vienu teksta elementu, piemēram, vārdu vai nelielu vārdu grupu, kas sagriezts un pārklājas divās plaknēs. Šis efekts rada dziļumu un var padarīt vienkāršu rakstzīmju kopu vizuāli interesantu.

Resoluut izmanto šo efektu kombinācijā ar simbolu un ievelk lietotājus dizaina centrā. Sagrieztais teksts atspoguļo ziņojumapmaiņu zemāk, kurā uzņēmums koncentrējas uz “digitālu dizainu ar attieksmi”, jo sagrieztais teksts tiešām rada zināmu edigier vibe, kas tieši uzrakstīts.

Šis paņēmiens vislabāk darbojas, ja rakstzīmju kopas ir vienkāršas (vispirms domājiet par sans serif burtiem) un vārdiem ir dabisks pārtraukuma punkts, kur tos var izgriezt, un tie saglabā lasāmību.

Teksts šķēlēs un fotoattēli

Slāņa efekts nav ierobežots ar burtu un atstarpes kombināciju. Dizaineri var izmantot arī attēlus un tekstu, lai izveidotu arī atdzist sagrieztu efektu, piemēram, iepriekš parādītais piemērs no The Shift.

Viena attēla (arī sagriezta) slīpa šķēles kombinācija ar burtiem piesaista lietotāju dizainā.

Lai gan daži no vārdiem sākumā ir mazliet grūtāki, lai tos pamanītu, starp animācijām ir pietiekami daudz laika, lai viegli izdomātu ziņojumu.

Šī tendence labi darbojas digitālajās aģentūrās un portfeļa vietnēs kā veids, kā parādīt mūsdienīgu izskatu un izjūtas, kā arī izcelt radošās darbības.

Šķēle ar animāciju

Sagrieztā teksta efektu var kombinēt arī ar citiem modernajiem dizaina elementiem. Jaukšana šķēlēs un animācija var radīt jauku vizuālo elementu.

Iepriekš minētajā piemērā katrs sagrieztais teksta elements faktiski ir navigācija. Lietotāji var noklikšķināt uz jebkura elementa, bet vēl iespaidīgāka ir kursora pārvietošana, kas atkal sagriež sagrieztu tekstu.

Logotipiem

Sagriezts teksts var būt jautrs veids, kā izveidot logotipu, ja vienīgie elementi, ar kuriem jums jāstrādā, ir teksts. Jautrs logotips var būt kas vairāk par zīmola atpazīstamības zīmi; tas var būt arī ļoti grafisks elements vairākām vajadzībām, piemēram, krekla dizainam, kas minēts iepriekš.

Strādājot ar sagrieztu tekstu, meklējiet dabisko formu un slīpumu griešanai, lai to būtu interesanti aplūkot, saglabājot lasīšanas vieglumu.

Pievērsiet uzmanību tam, kā sagriešana rada balto laukumu. Iepriekš redzamajā dizainā ir izmantota plaša papildu informācijas daļa. Biežāka sagriešana bieži ir plāna līnija, taču pieejas (kā redzat no šī ziņojuma piemēriem) var krasi atšķirties.

Izveidojiet interaktivitāti

Ļaujiet lietotājiem sagriezt savu tekstu ar interaktīvu teksta un otu kombināciju, piemēram, iepriekš aprakstītajā piemērā. Lai gan teksts pats par sevi nav precīzi sagriezts, efekts tiek radīts mākslas veidošanas procesā.

Visi rīki, kas lietotājiem ļauj mainīt dizainu, interaktīvā komponenta dēļ vietnes ilgums var būt ilgāks.

Sagriezti vertikāli gājieni

Vertikālās šķēles mēdz būt īsākas, jo katrs griezums ir viena burta daļa.

Lai arī šķiet, ka vairums dizaineru tendenci izmanto tādā pašā veidā ar vairāk horizontāli orientētu šķēli, griezumi var būt arī vertikāli.

Vertikālās šķēles mēdz būt īsākas, jo katrs griezums ir viena burta daļa. Triks, lai vertikālās šķēles darbotos, ir konsekvence. Izgriezumiem vajadzētu atdarināt viens otru, lai burti izskatās tā, kā tie iet kopā. Šai sagriešanas metodei vajadzētu izskatīties tā, ka tā ir gandrīz paredzēta burtveidola daļa. (Nevar redzēt, ka šķēles ir vienādas platumā no viena burta uz otru un uz tiem pašiem burtiem ir vienādas šķēles.)

Izveidojiet vizuālo plūsmu

Griezumi gandrīz rada lasīšanas steidzamības sajūtu, lai jūs pārspiestu burtus un pārsūtītu ekrāna galveno attēlu.

Sagriezta teksta sekas - domātas vai ne - ir tas, ka tas rada vizuālu plūsmu. Lietotāja acs sekos šķēles virzienam un baltajam laukumam, kas to ieskauj.

Apskatiet logotipu iepriekšējā piemērā. Ar šķēlumiem R un o Robocath (plus parasto trūkstošo c daļu) ir acīmredzama virziena virzība pāri ekrānam no kreisās uz labo.

Vilkme ir spēcīgāka par to, kas jums asociējas ar parasto lasīšanu (arī no kreisās uz labo), jo šķēles ātri izlaiž rakstzīmes. Griezumi gandrīz rada lasīšanas steidzamības sajūtu, lai jūs pārspiestu burtus un pārsūtītu ekrāna galveno attēlu.

Pievienojiet uzsvaru burtiem

Pēdējais - un, iespējams, vispievilcīgākais - iemesls sagrieztā teksta noformējuma izmantošanai ir uzsvara pievēršana burtiem vai ziņojumam. Šķēlēšana var būt gandrīz jebkura burtu pārveidošana, ja dizainā trūkst kādas rakstzīmes.

Iepriekš MJND vairāk izmanto slāņošanas efektu, lai paslēptu vai sagrieztu burtu formas, lai palīdzētu ziņojumam uzsvērt vairāk. Ar attēlu šeit var viegli visu sazināties, taču šis efekts palīdz lietotājam atgriezties pie galvenā ziņojumapmaiņas. Kombinācija ir vienkārša, efektīva un vizuāli interesanta.

Mācību resursi

Ir daži veidi, kā izveidot sagrieztus teksta efektus projektiem, atkarībā no tā, ko tieši mēģināt izveidot. Pie populārākajām iespējām pieder teksta efekta izveidošana ar roku, izmantojot rediģēšanas programmatūru vai CSS, lai izveidotu efektu tīmekļa projektiem.

Šeit ir norādījumi par katru no šīm opcijām, lai jūs varētu mēģināt izveidot modernu sagriezta teksta efektu:

• Video: Kā izveidot sagrieztu tekstu Adobe Illustrator
• Izgrieziet teksta efekta fragmentu, izmantojot CSS

Secinājums

Sagrieztā teksta tendences izmantošana var būt nedaudz sarežģīta, jo tajā ir jāmaina tipa elementi. Ir svarīgi, lai netiek zaudēta lasāmība vai arī jūs varētu zaudēt lietotājus, izmantojot šo efektu.

Sagriezti teksta efekti tomēr var būt jautrs risinājums un palīdzēt radīt kontaktpunktu. Ja pievienosit nedaudz animācijas, varēsit to arī pārcelt uz nākamo līmeni. (Daudzi no šajā ziņojumā iekļautajiem piemēriem tieši to arī dara; noteikti apmeklējiet šīs vietnes un noklikšķiniet apkārt.)