Designtrend: gesneden tekst en typografie
Puristen zeggen dat je typografie nooit mag veranderen. Belettering moet verschijnen zoals bedoeld door de typeontwerper, of u moet helemaal een ander lettertype selecteren. Hoewel dit meestal het geval is, is de uitzondering de trend in de vorm van segmenten.
Door het handige effect zien type-elementen eruit alsof ze zijn gesneden met een precisiegereedschap en kunnen ze visuele interesse toevoegen aan logo's, koppen en eenvoudige tekstblokken. Gesneden teksteffecten kunnen variëren van super subtiel (zoals een klein stukje van een letter dat ontbreekt) tot grote delen van woorden die helemaal ontbreken.
Het ding om in gedachten te houden bij het gebruik van gesneden tekst is dat woorden altijd leesbaar moeten zijn - welk punt is er anders? - en u moet er goed op letten dat er geen onbedoelde lettercombinaties of woorden verschijnen als gevolg van snijden. Hier leest u hoe u het voor u kunt laten werken met enkele voorbeelden van ontwerpen die het goed doen.
Verken Envato Elements
"Traditionele" plak
Gesneden tekst bevat een bijna gelaagde look met één tekstelement, zoals een woord of een kleine groep woorden, dat op twee vlakken is gesneden en overlapt. Dit effect creëert diepte en kan een eenvoudige set tekens visueel interessant maken.
Resoluut gebruikt dit effect in combinatie met een ampersand om gebruikers naar het centrum van het ontwerp te trekken. De gesneden tekst weerspiegelt de onderstaande boodschap dat het bedrijf zich richt op "digitaal ontwerp met attitude", omdat gesneden tekst een zekere scherpere sfeer uitstraalt die rechtlijnige belettering.
Deze techniek werkt het beste als de tekensets eenvoudig zijn (denk eerst aan schreefloze lettertypen) en woorden een natuurlijk breekpunt hebben waar ze kunnen worden geknipt en de leesbaarheid behouden.
Snijd tekst en foto's
Het gelaagdheidseffect is niet beperkt tot een combinatie van lettertype en spatie. Ontwerpers kunnen ook afbeeldingen en tekst gebruiken om een cool gesneden effect te creëren, zoals het bovenstaande voorbeeld van The Shift.
De schuine segmentcombinaties van een enkele afbeelding (ook in plakjes) met belettering trekt de gebruiker in het ontwerp.
Hoewel sommige woorden in het begin wat moeilijker te onderscheiden zijn, is er genoeg tijd tussen animaties om de boodschap gemakkelijk te achterhalen.
Deze trend werkt goed voor digitale bureaus en portfoliosites als een manier om een moderne look en feel te laten zien en creatieve karbonades te benadrukken.
Snijd met animatie
Het gesneden teksteffect kan ook worden gecombineerd met andere trendy designelementen. Het combineren van segmenten met animatie kan een mooi visueel element opleveren.
In het bovenstaande voorbeeld is elk van de gesneden tekstelementen eigenlijk navigatie. Gebruikers kunnen op beide elementen klikken, maar wat indrukwekkender is, is de zweefactie, die de gesneden tekst weer samenvoegt.
Voor logo's
Gesneden tekst kan een leuke manier zijn om een logo te maken wanneer de enige elementen waarmee u moet werken tekst zijn. Een leuk logo kan meer zijn dan een merk voor merkherkenning; het kan ook een zeer grafisch element zijn voor meervoudig gebruik, zoals het shirtontwerp hierboven.
Zoek bij het werken met gesneden tekst naar een natuurlijke vorm en helling voor het snijden, zodat het interessant is om naar te kijken terwijl het leesgemak behouden blijft.
Besteed aandacht aan de manier waarop snijden witruimte creëert. Het ontwerp hierboven maakt gebruik van een breed stuk aanvullende informatie erin. Het meer gebruikelijke gebruik van slicing is vaak een dunne lijn, maar benaderingen (zoals je kunt zien in de voorbeelden in dit bericht) kunnen behoorlijk dramatisch variëren.
Creëer interactiviteit
Sta gebruikers toe om hun eigen tekst te snijden met een interactieve combinatie van tekst en penseel, zoals het voorbeeld hierboven. Hoewel de tekst niet per se precies is gesneden, wordt het effect gecreëerd tijdens het maken van kunst.
Alle tools waarmee gebruikers het ontwerp kunnen wijzigen, kunnen vanwege de interactieve component ter plaatse leiden tot langere tijden.
Gesneden verticale lijnen
Verticale plakjes zijn meestal korter omdat elke snede deel uitmaakt van een enkele letter. Hoewel de meeste ontwerpers de trend op dezelfde manier lijken te gebruiken met een meer horizontaal georiënteerde plak, kunnen sneden ook verticaal zijn.
Verticale plakjes zijn meestal korter omdat elke snede deel uitmaakt van een enkele letter. De truc om verticale plakjes te laten werken, is consistentie. De manier waarop bezuinigingen worden gemaakt, moet elkaar nabootsen, zodat letters eruit zien alsof ze bij elkaar passen. Deze manier van snijden moet eruit zien alsof het bijna een bedoeld onderdeel van het lettertype is. (Niet in het bovenstaande voorbeeld dat plakjes dezelfde breedte hebben van letter tot letter en dezelfde letters hebben dezelfde plakjes.)
Breng visuele stroom tot stand
De sneden creëren bijna een gevoel van urgentie om te lezen, zodat u over de letters en naar het hoofdbeeld op het scherm gaat. Een gevolg van al dan niet beoogde tekst is dat het visuele flow creëert. Het oog van een gebruiker volgt de richting van de plak en de witte ruimte eromheen.
Bekijk het logo in het bovenstaande voorbeeld. Met plakjes in de R en o's in Robocath (plus het normale ontbrekende deel van de c) is er een duidelijke richtingstrek over het scherm van links naar rechts.
De aantrekkingskracht is sterker dan wat je associeert met normaal lezen (ook van links naar rechts) omdat de plakjes je snel door de personages duwen. De sneden creëren bijna een gevoel van urgentie om te lezen, zodat u over de letters en naar het hoofdbeeld op het scherm gaat.
Nadruk toevoegen aan belettering
De laatste - en misschien wel meest dwingende - reden om de trend voor gesneden tekstontwerp te gebruiken, is om de nadruk te leggen op belettering of de boodschap. Snijden kan vrijwel elke wijziging van letters zijn waarbij een deel van een personage in het ontwerp ontbreekt.
MJND, hierboven, gebruikt meer een gelaagd effect om lettervormen te verbergen of in plakjes te snijden om de nadruk op het bericht te leggen. De afbeelding kan hier gemakkelijk alle communicatie uitvoeren, maar dit effect helpt de gebruiker terug te brengen naar het hoofdbericht. De combinatie is eenvoudig, effectief en visueel interessant.
Leermiddelen
Er zijn een paar manieren om gesegmenteerde teksteffecten voor projecten te maken, afhankelijk van wat u precies probeert te maken. De meest populaire opties zijn het handmatig creëren van het teksteffect met bewerkingssoftware of met CSS om het effect voor webprojecten te creëren.
Hier zijn tutorials voor elk van deze opties, zodat u kunt proberen een trendy teksteffect te creëren:
- Video: Gesneden tekst maken in Adobe Illustrator
- Snijd teksteffectfragment met CSS
Gevolgtrekking
Het gebruik van de trend in gesegmenteerde tekst kan een beetje lastig zijn, omdat het wel gaat om het wijzigen van type-elementen. Het is belangrijk dat de leesbaarheid niet verloren gaat of dat u met dit effect gebruikers kunt verliezen.
Gesneden teksteffecten kunnen echter een leuke oplossing zijn en een brandpunt helpen genereren. Een vleugje animatie toevoegen kan ook helpen om het naar een hoger niveau te tillen. (Veel van de voorbeelden in dit bericht doen precies dat; zorg ervoor dat u die websites bezoekt en rondklikt.)
