Share
Prendiamo la nostra parte di tipografia con questo poster scuro e sgangherato. No, questo non è il tuo tipico design, dato che saremo "in prima fila" nella speranza di creare un layout dinamico ed eccitante. Quindi prendi i soliti strumenti del mestiere, Photoshop e Illustrator e segui questi passaggi per creare la tua soluzione.
Prima di iniziare, diamo un'occhiata all'immagine che creeremo.
Il nostro editor video Gavin Steele ha creato un video tutorial per completare questo tutorial di testo + immagine.
In definitiva, il design è un mezzo per esprimere un messaggio, un'idea. Per progettare, bisogna riconoscere il fatto che il design non è affatto decorazione. Nel far trasparire il tuo punto di vista, ti sforzi di trovare il giusto equilibrio tra ciò che è bello, estetico e ciò che è funzionale e utile. Volevo esplorare un'interpretazione visiva di ciò che è scritto, non solo attraverso il testo, ma anche promuovendo il concetto attraverso l'illustrazione visiva, quindi il vetro che si rompe.
Quindi, cosa sta rompendo la griglia, comunque? Non sono affatto un esperto del settore, ma la pianificazione della rete, non importa quanto sia fondamentale, mi è stata utile. A volte, però, tutte quelle caselle simmetriche grigie possono diventare noiose, e tocca agli eroi del design salvare la giornata: rompere la griglia.
Una cosa importante da tenere a mente è il fatto che una griglia rotta diversifica e impedisce la prevedibilità, ma contribuisce comunque a un design unificato. Lo squilibrio intenzionale è controllato e gestito dal resto degli elementi. Anche se potresti avere proporzioni asimmetriche, alla fine troverai ancora equilibrio. Questo è ciò a cui miriamo - spezzeremo una griglia quadrata tipica attraverso un layout tipografico insolito, e lo bilanciamo alla fine mediante bit e pezzi di vetro attentamente pianificati.
Un esempio pratico di rompere la griglia può essere visto su questo sito reale. Notare che sia il logo Psdtuts + sia il cucchiaio si trovano più in basso rispetto alla linea orizzontale chiaramente visibile. Questo è tutto nel tentativo di evitare la monotonia, attraverso dettagli sottili. Se fosse stata una griglia classica, il logo e il cucchiaio non sarebbero stati un po 'più bassi della linea di demarcazione.
Avviare un nuovo documento di Photoshop utilizzando un formato di carta A3 a 300 dpi. Per selezionare l'impostazione A3, selezionare Carta internazionale dal menu a discesa. Non appena inizi ad afferrare lo Strumento sfumatura (G) e crei un gradiente lineare dall'alto verso il basso usando un grigio medio (# 837e7e) e uno scuro (# 3f3f3f).
Ora iniziamo a pianificare il layout del design. Per creare una griglia di base da cui iniziaremo, vai a Modifica> Preferenze> Guide, Griglia, Fette e Conteggio. Cerca la sezione Grid e assicurati che la tua griglia sia divisa per 2,5 cm con una suddivisione singola. Potrebbe anche essere necessario renderlo visibile andando su Visualizza> Mostra> Griglia.
È tempo di pianificare il punto focale. Ho posizionato il mio un quadrato fuori dal centro, in modo che il pezzo abbia una base stabile. Tieni presente il fatto che ogni composizione ha bisogno di equilibrio, specialmente quella in cui stai sperimentando l'asimmetria. Tutto dipende dalla sensazione che hai pianificato: se la casella è più alta del centro, sembrerà fluttuante, mentre è sotto suggerisce un ambiente statico.
Il punto focale e l'elemento di ancoraggio di questo pezzo è il tipo. Dopotutto, questo è un poster tipografico, non è vero? Il carattere dovrebbe anche riflettere il concetto. Poiché si tratta di griglie, il carattere stesso dovrebbe essere minimo e intensamente geometrico. Bifurk si adatta alla descrizione del lavoro e lo useremo qui. Se questo non è un argomento abbastanza buono, beh, è anche gratuito, quindi è una buona scelta per un tutorial!
Usa la griglia per pianificare il tuo layout e digita le tue lettere singolarmente creando un nuovo livello per ogni lettera. In questo modo, sarà più facile regolare la spaziatura tra le lettere. Ho usato una forma quadrata per pianificare la spaziatura. Crea una forma personalizzata quadrata con lo strumento Rettangolo (U), tenendo premuto Maiusc e facendolo scorrere tra le lettere. In questo modo, stai assicurando un buon allineamento ottico.
A questo punto, cambieremo i colori del testo. Fai delle sottili variazioni di questo rosso lavato: d05252. Nota: ho anche attivato e creato delle guide per rendere più chiaro il layout.
Ora daremo alle lettere una trama. La trama sarà creata da una nuvola di parole usando il testo di Lorem Ipsum, che è strettamente associato alla progettazione grafica. Puoi creare il tuo cloud personale o utilizzare questo strumento online davvero speciale chiamato Wordle. È un generatore di parole, ed è quello che ho usato qui. Vai al loro sito e fai clic sul pulsante Crea. Incolla in qualche testo fittizio e genera un cloud. Continuare a randomizzare fino a trovare la forma migliore e selezionare Teleobiettivo come carattere e Calore come selezione del colore. Puoi modificare queste impostazioni utilizzando i pulsanti che troverai sopra il cloud.
Ora andremo su Live Trace in un trattamento di tipo abbozzato. Quindi fai uno screenshot del cloud e incollalo (Command + V) in un nuovo file di Illustrator. Ancora una volta, avrai bisogno di Illustrator per poter tracciare un oggetto. Vai a Oggetto> Traccia live> Opzioni di traccia. Usa colori e 256 colori. Se stai cercando un'esecuzione più precisa, regola le impostazioni trovate nel menu.
Per tagliare gli elementi in eccesso, come l'interfaccia web e lo sfondo bianco, è necessario espandere l'oggetto tracciato dal vivo. Premi il pulsante Espandi; lo vedrai dopo aver selezionato l'oggetto.
Utilizzando lo strumento di selezione diretta (A), trascinare ed eliminare tutti gli elementi in eccesso. Un modo semplice per sbarazzarsi del bianco trovato all'interno delle lettere è selezionare una forma bianca, quindi selezionare Seleziona> Stesso> Colore riempimento. Premi cancella e quella sarà la fine della tua seccatura.
Successivamente, copialo (Command + C) e incollalo (Command + V) nel tuo progetto Photoshop. Incollalo come oggetto avanzato, in modo da poterlo espandere e contrarre liberamente senza perdere qualità. Crea una maschera di ritaglio tenendo premuto Alt e facendo clic su tra il livello dell'oggetto avanzato e il livello della lettera.
Ho anche usato il cloud in altre parti del design come texture. L'unica modifica che dovrai apportare è quella di regolare l'Opacità del livello a circa il 15%.
Ora è il momento per la parte più laboriosa: creare il vetro rotto. Torna a Illustrator e disegna pezzi di vetro rotti usando lo strumento Penna. Mantieni una forma rettangolare come riferimento. Riempili con questo colore: 757575. Fai ammaccature sottili che seguono la forma di base e ricorda che le fessure del vetro non sono perfettamente dritte.
Crea un nuovo livello e usa uno dei triangoli come riferimento, crea una versione più frammentata. Assicurati di sostituirlo con quello vecchio, una volta che hai finito.
Seleziona uno dei pezzi e vai a Effetto> 3D> Estrusione e smusso. Seguire le impostazioni mostrate di seguito.
Una volta trasformato in un oggetto 3D, copia l'oggetto e incollalo nella sua posizione esatta (Comando + F). Trova il tuo pannello Aspetto sotto Finestra> Aspetto e fai doppio clic sull'effetto Estrusione e smusso 3D elencato qui. Questo aprirà l'attuale effetto 3D che hai sopra il pezzo di vetro. Con questo, cambia solo il cappuccio per accendere il tappo. Questo simulerà un effetto di trasparenza rivelando anche il bordo interno.
Ripeti il processo per i bit rimanenti. Inizia anche a giocare con il layout. Fai dei pezzi piccoli, come se viaggassi nello spazio dato e ruotali individualmente.
Fai alcuni pezzi più piccoli, altri più grandi. Copia piccoli frammenti e trasformali in piccoli pezzi scheggiati. Non dimenticare di modificare le loro impostazioni 3D, in modo che non assomiglino a qualsiasi pezzo precedente.
Proprio come prima, incollali in Photoshop. Se noti miglioramenti che possono essere apportati al posizionamento, fai semplicemente doppio clic sull'icona Smart Object. Questo ti riporterà in Illustrator, dove potrai apportare modifiche. Una volta che hai finito, salva (comando + S) e torna a Photoshop. Dopo una schermata di caricamento rapido, le modifiche saranno state implementate. Imposta la modalità di fusione del livello su Luce intensa.
Ora crea un nuovo livello vuoto (Comando + Maiusc + N) sopra l'oggetto avanzato e trasformalo in una maschera di ritaglio. Usa un pennello morbido e rotondo e dipingi con il bianco nelle aree che vuoi evidenziare. Abbassa l'opacità del livello a seconda di quanto vuoi che sia la luce.
Duplica l'oggetto avanzato e spostalo sopra tutti gli altri livelli. Imposta la modalità di fusione del suo livello su Schermo.
È tempo di iniziare il danno e la distorsione. Crea un nuovo livello sopra tutti gli altri e riempilo con il bianco. Vai a Filtro> Distorsione> Correzione lente. Modificare le impostazioni Vignetta e trascinarla a circa -50 o -60. Imposta la modalità di fusione del livello su Moltiplica.
Scarica questa texture e inseriscila su tutta la tela in un nuovo livello. Desaturalo (Comando + Maiusc + U), imposta la modalità di fusione del livello su Color Burn e Opacity al 70%.
Scarica un'altra texture e incollala in un nuovo livello. Imposta la modalità di fusione del livello su Colore e Opacità al 30%. Vai a Immagine> Regolazioni> Tonalità e saturazione. Cambia la tonalità a 158.
Vai a Livello> Nuovo livello di regolazione> Curve. Usa le impostazioni mostrate sotto.
Sì, una texture in più ... Metti questo sopra tutto, Desaturalo (Comando + Maiusc + U), imposta il metodo di fusione del livello su Brucia lineare e Opacità al 20%. La parte speciale su questo però è l'inclusione di linee orizzontali, che suggeriscono una griglia.
E ora, una sottile alterazione del colore. Illumineremo il rosso solo di un livello, attraverso un Mixer canali (Livello> Nuovo livello di regolazione> Mixer canali). Usa le impostazioni trovate nell'immagine seguente.
Come ultimo ritocco, ho aggiunto qualche altro pezzo di vetro dietro il testo e un gradiente leggermente grigio brillante, morbido e rotondo dietro tutto.
Suggerimento rapido: affina le immagini quando ridimensiona a risoluzioni più piccole. Puoi immaginare che un bel po 'di informazioni si perde quando si riduce un'immagine da 5000 px a 600 px. Puoi dare una sensazione completamente nuova affilando con Filtro> Precisione> Maschera di contrasto.
Inoltre, quando si raffina il grunge, è possibile ottenere risultati piuttosto spettacolari, perché Photoshop fondamentalmente crea piccoli smussi. Guarda le lettere qui sotto: Ti accorgi di come le lettere rosse affilate sembrano avere uno smusso di un pixel? Bene, è dallo sharpening.
Basta non esagerare! Tieni d'occhio i bordi già affilati, in quanto possono essere rovinati durante l'affilatura.
Ora siamo finiti! Non vedo l'ora di vederti utilizzare queste tecniche.
Accentsconagua