I puristi dicono che non dovresti mai alterare la tipografia. Le scritte dovrebbero apparire come previsto dal type designer, oppure dovresti selezionare un font diverso. Mentre questo è principalmente vero, l'eccezione è nella tendenza del testo affettato.
L'effetto elegante rende gli elementi di tipo come se fossero stati tagliati con uno strumento di precisione e può aggiungere interesse visivo a logotipi, titoli e semplici blocchi di testo. Gli effetti di testo a fette possono variare da super sottile (ad esempio un pezzettino di una lettera mancante) a parti mancanti di parole mancanti.
La cosa da tenere a mente quando si usa il testo affettato è che le parole devono sempre essere leggibile - che punto c'è altrimenti? - e dovresti prestare molta attenzione in modo che le combinazioni o le parole di lettere non volute non appaiano a causa dell'affettatura. Ecco uno sguardo su come farlo funzionare per voi con alcuni esempi di design che lo fanno bene.
?Tradizionale? Fetta
Il testo a fette include un aspetto quasi a strati con un elemento di testo, ad esempio una parola o un piccolo gruppo di parole, che viene tagliato e sovrapposto su due piani. Questo effetto crea profondità e può rendere visivamente interessante un semplice insieme di personaggi.
Resoluut utilizza questo effetto in combinazione con una e commerciale per attirare gli utenti al centro del design. Il testo affettato rispecchia la messaggistica sottostante alla quale la società si concentra sul "design digitale con attitudine"? perché il testo affettato trasmette una certa spigolosità che le scritte dritte.
Questa tecnica funziona meglio quando i set di caratteri sono semplici (si pensi prima a caratteri sans serif) e le parole hanno un punto di rottura naturale in cui possono essere tagliati e mantenere la leggibilità.
Taglia testo e foto
L'effetto di stratificazione non è limitato a una combinazione di font e spazio. I progettisti possono anche utilizzare immagini e testo per creare anche un effetto affettato, come nell'esempio precedente di The Shift.
Le combinazioni di sezioni inclinate di una singola immagine (anche tagliate) con scritte attirano l'utente nel disegno.
Mentre alcune delle parole un po 'più difficili da discernere in un primo momento, c'è abbastanza tempo tra le animazioni per capire il messaggio con facilità.
Questa tendenza funziona bene per le agenzie digitali e i siti di portfolio come un modo per mostrare un aspetto moderno e per evidenziare le costellazioni creative.
Slice with Animation
L'effetto testo affettato può essere combinato con altri elementi di design alla moda. Mescolare l'affettatura con l'animazione può dare come risultato un bel elemento visivo.
Nell'esempio sopra, ciascuno degli elementi di testo affettato è in realtà la navigazione. Gli utenti possono fare clic su ciascun elemento, ma ciò che è più impressionante è l'azione di passaggio del mouse, che rimette insieme il testo affettato.
Per i logotipi
Il testo a fette può essere un modo divertente per creare un logo quando gli unici elementi con cui devi lavorare sono testo. Un logotipo divertente può essere più di un marchio per il riconoscimento del marchio; può anche essere un elemento altamente grafico per molteplici usi, come il design della camicia, sopra.
Quando lavori con testo affettato, cerca una forma naturale e una pendenza per affettare in modo che sia interessante da guardare, pur mantenendo la facilità di lettura.
Presta attenzione al modo in cui l'affettatura crea uno spazio bianco. Il design sopra riportato utilizza una vasta fetta di informazioni aggiuntive al suo interno. L'uso più comune di slicing è spesso una linea sottile, ma gli approcci (come puoi vedere dagli esempi in questo post) possono variare in modo piuttosto drammatico.
Crea interattività
Consenti agli utenti di suddividere il proprio testo con una combinazione di testo e pennello interattiva, come nell'esempio sopra riportato. Mentre il testo non è esattamente tagliato in se, l'effetto viene creato nel processo di creazione artistica.
Tutti gli strumenti che consentono agli utenti di modificare il design possono comportare tempi più lunghi sul sito a causa del componente interattivo.
Tratti verticali a fette
Le fette verticali tendono ad essere più corte perché ogni taglio è parte di una singola lettera. Mentre la maggior parte dei designer sembra utilizzare la tendenza allo stesso modo con una fetta più orientata orizzontalmente, i tagli possono essere anche verticali.
Le fette verticali tendono ad essere più corte perché ogni taglio è parte di una singola lettera. Il trucco per far funzionare le fette verticali è la coerenza. Il modo in cui i tagli sono fatti dovrebbe imitare l'un l'altro in modo che le lettere sembrino come se fossero unite. Questo metodo di affettatura dovrebbe apparire come se fosse quasi una parte voluta del carattere tipografico. (Non nell'esempio sopra le fette hanno la stessa larghezza da lettera a lettera e le stesse lettere hanno le stesse fette).
Stabilire flusso visivo
I tagli quasi creano un senso di lettura dell'urgenza, in modo da scorrere le lettere e passare alla visualizzazione principale sullo schermo. Una conseguenza del testo affettato, inteso o meno, è che crea un flusso visivo. Un occhio dell'utente seguirà la direzione della sezione e lo spazio bianco che lo circonda.
Guarda il logotipo nell'esempio sopra. Con sezioni nella R e o in Robocath (più la normale parte mancante del c) c'è una evidente trazione direzionale sullo schermo da sinistra a destra.
Il tiro è più forte di quello che si associa alla lettura normale (anche da sinistra a destra) perché le sezioni ti spingono rapidamente attraverso i personaggi. I tagli quasi creano un senso di lettura dell'urgenza, in modo da scorrere le lettere e passare alla visualizzazione principale sullo schermo.
Aggiungi l'enfasi all'iscrizione
Il motivo finale - e probabilmente il più convincente - per utilizzare la tendenza del disegno a fette è di dare maggiore enfasi al lettering o al messaggio. Il taglio può essere praticamente qualsiasi alterazione di lettere in cui manca una parte di un carattere nel disegno.
MJND, sopra, usa più di un effetto di stratificazione per nascondere o affiancare le forme delle lettere per aiutare a dare maggiore enfasi al messaggio. L'immagine potrebbe facilmente fare tutte le comunicazioni qui, ma questo effetto aiuta a riportare l'utente alla messaggistica principale. La combinazione è semplice, efficace e visivamente interessante.
Risorse di apprendimento
Esistono alcuni modi per creare effetti di testo affettati per i progetti, a seconda esattamente di ciò che stai cercando di creare. Le opzioni più popolari includono la creazione manuale dell'effetto del testo utilizzando il software di modifica o l'utilizzo di CSS per creare l'effetto per i progetti web.
Ecco le esercitazioni per ciascuna di queste opzioni in modo da poter provare a creare un effetto testo affettato alla moda:
- Video: come creare testo affettato in Adobe Illustrator
- Cut Snippet di effetti di testo con CSS
Conclusione
L'uso della tendenza del testo affettato può essere un po 'complicato perché implica la modifica di elementi di tipo. È importante che la leggibilità non vada perduta o che potresti perdere utenti con questo effetto.
Gli effetti di testo a fette, tuttavia, possono essere una soluzione divertente e aiutare a generare un punto focale. Aggiungere un tocco di animazione può aiutare anche a portarlo al livello successivo. (Molti degli esempi inclusi in questo post fanno proprio questo: assicuratevi di visitare quei siti Web e fare clic in giro.)