Design Trend Skivad Text & Typografi

Purister säger att du aldrig ska ändra typografi. Brevläggningen ska visas som avsedd av typdesignern, eller du borde välja ett annat typsnitt helt och hållet. Även om detta för det mesta är sant, är undantaget i den skivade textutvecklingen.

Den snygga effekten gör att typelementen ser ut som om de har klippts med ett precisionsverktyg och kan lägga visuellt intresse för logotyper, rubriker och enkla textblock. Skivade texteffekter kan variera från super subtila (till exempel en liten bit av ett brev som saknas) till stora delar av orden saknas helt och hållet.

Saken att tänka på när du använder skivad text är att ord alltid måste vara läsbar - vilken punkt finns det annars? - och du bör vara noga med att oavsiktliga bokstavskombinationer eller ord inte visas på grund av skivning. Här är en titt på hur man får det att fungera för dig med några exempel på mönster som gör det bra.

?Traditionell? Skiva

Skivad text innehåller en nästan lagrad look med ett textelement, till exempel ett ord eller en liten grupp av ord som är skuren och överlappad på två plan. Denna effekt skapar djup och kan göra en enkel uppsättning tecken visuellt intressanta.

Resoluut använder denna effekt i kombination med en ampersand för att dra användare in i mitten av designen. Den skivade texten speglar meddelandet nedan som företaget fokuserar på? Digital design med attityd? eftersom skivad text förmedlar en viss edgier vibe som rakt på bokstäver.

Denna teknik fungerar bäst när teckenuppsättningarna är enkla (tänk sans serif typfaces först) och ord har en naturlig brytpunkt där de kan klippas och bibehålla läsbarheten.

Skiv text och foton

Lagringseffekten är inte begränsad till en kombination av typsnitt och utrymme. Designers kan också använda bilder och text för att skapa en cool skivad effekt, liksom exemplet ovan från The Shift.

De snedställda skivkombinationerna av en enda bild (även skivad) med bokstäver drar användaren in i designen.

Medan några av orden lite svårare att urskilja i början, finns det tillräckligt med tid mellan animationer för att räkna ut meddelandet med lätthet.

Denna trend fungerar bra för digitala byråer och portföljplatser som ett sätt att visa upp ett modernt utseende och framhäva kreativa kakor.

Skiva med animering

Den skivade texteffekten kan kombineras med andra trendiga designelement. Blandning av skivning med animering kan resultera i ett fint visuellt element.

I exemplet ovan är varje av de skivade textelementen faktiskt navigering. Användare kan klicka på ett element, men vad som är mer imponerande är svängningsfunktionen, som sätter den skivade texten ihop igen.

För logotyper

Skivad text kan vara ett roligt sätt att skapa en logotyp när de enda elementen du måste arbeta med är text. En rolig logotyp kan vara mer än ett varumärke för varumärkesigenkänning. det kan också vara ett mycket grafiskt element för flera användningsområden, såsom skjortedesignen ovan.

När du arbetar med skivad text, leta efter en naturlig form och lutning för skivning så att det är intressant att titta på samtidigt som det är lätt att läsa.

Var uppmärksam på hur skivning skapar vitt utrymme. Konstruktionen ovan använder en bred bit av ytterligare information inuti den. Den vanligaste användningen av skivning är ofta en tunn linje, men närmar sig (som du kan se från exemplen i detta inlägg) kan variera ganska dramatiskt.

Skapa interaktivitet

Tillåt användare att skära sin egen text med en interaktiv text och borstkombination, som exempel ovan. Texten är inte precis skivad i sig, men effekten skapas i konstprocessen.

Alla verktyg som tillåter användare att ändra designen kan resultera i längre tider på plats på grund av den interaktiva komponenten.

Skivade vertikala streck

Vertikala skivor tenderar att vara kortare eftersom varje snitt är en del av en bokstav.

Medan de flesta designers verkar använda trenden på samma sätt med en mer horisontellt orienterad skiva, kan skärningar också vara vertikala.

Vertikala skivor tenderar att vara kortare eftersom varje snitt är en del av en bokstav. Tricket att göra vertikala skivor fungerar är konsistens. Sättet som skärs görs bör efterlikna varandra så att bokstäver ser ut som de går ihop. Denna metod för skivning ska se ut som om den är nästan en avsedd del av typsnittet. (Inte i exemplet ovan är skivorna lika stora från bokstav till bokstav och samma bokstäver har samma skivor.)

Upprätta visuellt flöde

Skärningarna ger nästan en känsla av läsning, så att du sitter ihop över bokstäverna och över till huvudbilden på skärmen.

En följd av skivad text - avsedd eller inte - är att det skapar visuellt flöde. Ett användares öga följer skivans riktning och det vita utrymmet som omger det.

Titta på logotypen i exemplet ovan. Med skivor i R och O i Robocath (plus den vanliga saknade delen av c) är det en uppenbar riktningsdragning över skärmen från vänster till höger.

Dragningen är starkare än vad du associerar med normal läsning (även vänster till höger) eftersom skivorna trycker dig snabbt igenom tecknen. Skärningarna ger nästan en känsla av läsning, så att du sitter ihop över bokstäverna och över till huvudbilden på skärmen.

Lägg till tyngdpunkt på bokstäver

Den slutliga - och möjligen mest övertygande - anledningen till att använda den skivade textdesigntendensen är att lägga tonvikten på bokstäver eller meddelandet. Skivning kan vara ganska mycket någon ändring av bokstäver där en del av ett tecken saknas i designen.

MJND, ovan, använder mer av en lagringseffekt för att dölja eller skiva brevformar för att bidra till att lägga tonvikt på meddelandet. Bilden kan enkelt göra allt som kommunicerar här, men den här effekten hjälper användaren tillbaka till huvudmeddelandet. Kombinationen är enkel, effektiv och visuellt intressant.

Lärande resurser

Det finns några sätt att skapa skivade texteffekter för projekt, beroende på exakt vad du försöker skapa. De mest populära alternativen är att skapa texteffekten för hand genom att använda redigeringsprogram eller använda CSS för att skapa effekten för webbprojekt.

Här är handledning för var och en av dessa alternativ så att du kan försöka skapa en trendig skivad texteffekt:

  • Video: Så här skapar du skivad text i Adobe Illustrator
  • Klipp texteffekten med CSS

Slutsats

Att använda den skivade textutvecklingen kan vara lite knepig eftersom det innebär att man ändrar typelement. Det är viktigt att läsbarheten inte går förlorad, eller du kan förlora användarna med denna effekt.

Skivade texteffekter kan dock vara en rolig lösning och bidra till att skapa en kontaktpunkt. Om du lägger till en animering kan du också ta det till nästa nivå. (Många av de exempel som ingår i det här inlägget gör just det, se till att besöka dessa webbplatser och klicka runt.)