Share
Se sei su Twitter e stai leggendo questo blog, è probabile che tu abbia già personalizzato il tuo profilo con un fantastico background su Twitter. In questo tutorial, creeremo uno dei nostri attorno a una mascotte centrale: un uccello twitter altamente dettagliato, che dovrai disegnare da solo! Preparati a fare molto di più che fare clic su questo tutorial artistico!
Quando si crea uno sfondo su Twitter, ci sono varie cose da tenere in considerazione. Il problema più grande è il fatto che non puoi centrare l'allineamento di un'immagine nel tuo profilo Twitter. Quindi rinunciare a qualsiasi idea che tu possa avere sulla grafica avvolgente attorno al corpo. Puoi creare un disegno capace di tessere o lasciare allineato l'immagine. Dal momento che la dimensione del corpo non cambia in base alla risoluzione a cui è stata visualizzata, devi anche preoccuparti di mantenere il tuo contenuto principale visibile su più dimensioni dello schermo e di sbiadire la tua illustrazione perfettamente.
Se il tuo testo va troppo lontano a destra, molte persone potrebbero non essere in grado di leggerlo. Se la tua illustrazione è molto dettagliata e termina dopo soli 250 pixel, apparirà strana su schermi di grandi dimensioni, perché non svanisce verso destra e verso il basso. E infine, stai lavorando in formato web, quindi pensa alle dimensioni del tuo file al momento di progettarlo.
Per far fronte a tutti questi requisiti, creeremo uno sfondo relativamente piccolo che si allineerà al lato sinistro e sfumerà verso il basso e verso destra. E svanendo, non intendo cancellare metà dell'immagine, ma usando progressivamente sempre meno elementi. È prassi comune per gli sfondi di Twitter includere una breve biografia e link a dove la persona può essere trovata online.
Il mio background personale non ha questi, perché sento che il profilo bio è visibile comunque sulla destra e puoi anche scegliere un link che le persone possono usare. Collego al mio portafoglio, dove ci sono più collegamenti della mia presenza online, nel caso in cui qualcuno sia interessato. Ad ogni modo, per rendere questo più pratico, c'è una breve biografia (in questo caso un falso totale a causa della mancanza di ispirazione) e un paio di link.
Dai un'occhiata all'immagine che creeremo. Puoi visualizzare l'anteprima dell'immagine finale qui sotto o l'immagine a dimensione intera qui.
La prima cosa da fare qui è disegnare la mascotte, un uccello di twitter. Ci sono un sacco di uccelli cinguettini carini, luminosi e splendenti, quindi ne volevo uno che non fosse solo diverso, ma che rappresentasse il mio stile. Dopotutto, un profilo Twitter riguarda esclusivamente il proprietario.
Il processo visto sotto è molto esteso, ma può essere abbreviato. Non voglio che pensi che questo è solo il modo in cui dovresti farlo, ma nel caso non avessi molta esperienza con la grafica, è bello prendersi il tuo tempo e arrivare a ogni stadio giusto. Nel tempo, dopo essere diventato più esperto, un semplice doodle può essere sufficiente per iniziare in Photoshop.
Per ora però, inizia prendendo un normale foglio di carta e tirando fuori alcuni schizzi di base dell'uccello. Concentrati sulla corretta postura e non preoccuparti dei dettagli. quelli saranno trattati in seguito.
Come puoi notare, la posizione delle gambe nello screenshot sottostante non è identica al risultato finale. In effetti, li ho cambiati in ogni fase perché è un po 'difficile farli sembrare naturali ed estetici allo stesso tempo. Traccia solo un'immagine approssimativa del tuo uccello in questa prima fase.
Ora avrai bisogno di un po 'di carta da lucido. È fondamentalmente una carta semitrasparente che ti permette di disegnare qualcosa sopra un'immagine di riferimento, in questo caso il nostro abbozzo approssimativo. Ho usato due matite: una 2B e una 8B. Più alto è il numero, più morbida è la punta. Ho usato il 2B per tracciare i contorni e 8B per disegnare le ombre. La gomma viene tagliata a metà, in modo da poter usare il bordo tagliente per cancellare aree piccole. Questo è utile per aggiungere punti salienti.
Ho anche fatto scivolare un foglio aggiuntivo di carta da lucido in mezzo per rendere meno visibile lo schizzo approssimativo. Se la tua immagine ha troppi contrasti, è una buona idea svanire di più in modo da non farti confondere.
Usa la matita per tracciare il contorno dell'uccello. Ora puoi iniziare a preoccuparti dei dettagli.
Ora dovresti aver completato il contorno generale di ogni parte dell'uccello.
Inizia ad aggiungere sfumature, in modo che l'uccello assomigli al 3D. Si noti che le ombre sono molto semplici e non hanno bisogno di apparire molto realistiche. Questa è solo una parte dell'intero processo e non un'immagine finale, quindi non preoccuparti di renderlo bello. Tutto quello che devi fare è definire chiaramente forme e illuminazione.
Questa parte è importante perché tutte le ombre diventeranno linee continue nei passaggi futuri. Gli spazi vuoti sono punti salienti e le linee parallele sono ombre. Rendi le linee più distanti e più corte e l'occhio umano la percepirà come un gradiente. Questo è fondamentalmente uno schermo a mezzitoni disegnato a mano.
Prendi un altro pezzo di carta da lucido e mettilo sopra lo schizzo a matita che hai fatto. Questa volta useremo questo come riferimento per l'uccello finale art line.
Ora tutto ciò che devi fare è tracciare linee parallele attraverso le ombre. Per farli svanire, basta disegnare le linee più corte e più corte.
Ricorda che puoi anche sfumare il contorno, non solo le linee d'ombra.
Questa volta, stai molto attento a tutti i dettagli. Rendi quelle forme delle vere piume, non delle semplici curve.
Continua questo processo attraverso la testa e il corpo. Assicurati di lasciare abbastanza punti salienti.
Come ho detto, i piedi sono passati sotto una modifica finale. Volevo qualcosa tra una posizione di attacco e un volo a basso livello.
Ho reso la seconda ala generalmente più scura della prima. Ciò rende il disegno più dinamico e realistico. Lanciare una luce uguale su tutto l'uccello può far sembrare meno interessante. Anche se la postura è troppo simmetrica, puoi sempre fare affidamento sull'illuminazione per ravvivarla un po '.
Ed eccolo, tutto fatto. Forse un po 'troppo alto e allungato, ma non importa dal momento che non è possibile vedere tutto sullo sfondo di Twitter.
Scansionalo o scatta una foto e inseriscilo in Photoshop. Vai a Immagine> Regolazioni> Livelli e aumenta notevolmente il contrasto. Scurisci le linee, ma anche alcuni dei momenti salienti.
Vai a Seleziona> Gamma colori. All'interno della finestra, fai clic su un'area nera della foto in modo da avere una selezione delle linee nere. Premi OK e copia la selezione (Comando + C).
Crea un nuovo documento Photoshop di 750 px di larghezza e 700 px di altezza e 72 dpi. Incolla l'uccello (Comando + V), fai doppio clic sul suo livello e aggiungi un effetto Sovrapposizione colore. Scegli un blu scuro (# 387ebc) e premi OK. Crea un nuovo livello vuoto (Comando + Maiusc + N), fai clic su entrambi i livelli nel menu dei livelli e uniscili (Comando + E). Questo appiattirà lo stile di livello.
Ora in un nuovo livello vuoto sotto la linea grafica, usa lo strumento Penna (P) per dare all'uccello un colore di sfondo (# 33ccff).
Per questa parte sarebbe meglio avere una pen tablet, ma non è completamente necessaria. È possibile utilizzare un pennello normale o lo strumento penna per creare le luci e le ombre. L'ho fatto con un tablet. In questo passaggio, traccia le prime evidenziazioni con il bianco e rendilo una maschera di ritaglio in modo che appaia solo all'interno dell'uccello.
Ora traccia più grandi tratti di un ciano chiaro (# 7ff4fe). Crea uno strato separato per ognuno di questi.
Sotto il precedente, dipingi anche le luci più grandi con un ciano leggermente più scuro (# 4de2ff).
Un colore di evidenziazione finale sarà alcuni accenti grigi (# ddded9).
Ora usa un giallo brillante (# f5e456) per colorare il becco e aggiungi anche alcune ombre, con un giallo più scuro (# bcb833).
Per completare l'uccello, riempire il becco con lo stesso blu scuro e attirare l'attenzione. Usa bianco e lo stesso giallo scuro.
Dovrai tornare al tavolo da disegno ora per dipingere alcune nuvole. Ho usato diversi tipi di caselle di commento per questo. Essendo un social network, gli shoutout in stile fumetto hanno ragione. Traccia il contorno con una sfumatura di grigio (# d0cdbe).
Dai uno sfondo più chiaro (#edeedb).
Ora disegna solo alcune linee sottili per le ombre (# dfe0d0) e evidenzia (#ffffff).
Ripeti questo processo per creare altri tipi di caselle di commento. Combinati, esprimono semplici affermazioni, pensieri ed esclamazioni. Cerco di non urlare troppo sul mio profilo, quindi non preoccuparti, sono puramente decorativi. Non urlo ai miei seguaci :)
È ora di aggiungere una biografia e link. Il semplice testo piccolo è Calibri Regular e i titoli sono in Rockwell Std Bold. La e commerciale è Mrs. Eaves Medium Italic. Usa gli stessi colori dell'uccello.
Ricorda sempre di provare diversi metodi di antialiasing quando lavori con il tipo, specialmente a basse risoluzioni. Nel primo esempio, la parola è in modalità Sharp. Si noti che le lettere centrali sembrano piegarsi e cadere sotto la linea di fondo. Potrebbe essere sottile, ma è un errore.
Non solo, ma le lettere non sono nemmeno parallele. Ognuno sembra avere il proprio orientamento. Per risolvere questo problema, provare un metodo alternativo di antialiasing, in questo caso Strong. Ora le lettere hanno un orientamento comune e una linea di base livellata.
Mentre il precedente potrebbe essere una soluzione sottile, il prossimo è un errore molto comune. Il tracciamento irregolare può far sì che alcune lettere si sovrappongano e altre siano troppo lontane l'una dall'altra. Sebbene di solito non si notino questi bug a piccole righe di testo regolari, un testo di visualizzazione di grandi dimensioni rivelerà queste incoerenze.
Per risolvere questo problema, devi modificare manualmente lo spazio tra ogni lettera. Scegli lo Strumento testo (T), fai clic all'interno di una riga di testo e trascina una selezione delle prime due lettere. Inserisci un numero appropriato nel campo di monitoraggio. Quando hai trovato lo spazio giusto, seleziona la seconda e la terza lettera e fai lo stesso. Passare attraverso ogni spazio di due a due lettere fino a quando tutto il tracciamento è corretto. Puoi vedere la differenza di tracciamento personalizzato e standard nell'istanza sopra e sotto della parola.
Trova lo strato di forma vettoriale in cui hai tracciato l'uccello. Fare clic sulla miniatura Maschera vettoriale del livello per visualizzare il percorso. Usa lo Strumento selezione traccia (Freccia nera) per selezionare il percorso e copiarlo (Comando + C). Apri l'illustratore, incolla il percorso (Command + V) e premi Invio nella finestra che si apre in Illustrator (Compound Shape). Seleziona il colore del tratto e scegli il bianco (è nero qui solo per poterlo vedere). Impostare il peso del tratto su 2 pt.
Aprire il pannello Traccia (Finestra> Traccia) e utilizzare le seguenti impostazioni. Non preoccuparti dello sfondo grigio.
Copia (Comando + C) e incollalo (Comando + V) nel file Photoshop come oggetto intelligente. Ripeti il processo anche con le caselle dei commenti.
Utilizzando lo stesso font, crea alcuni accenti tipografici attorno al commento. Useremo anche una varietà di uccelli dall'Arsenal di Birds 2 Vector Pack of Go Media. Incollali come oggetti intelligenti e dai loro una sovrapposizione colore con qualsiasi colore desideri.
Usa diversi uccelli con colori diversi. Cerca di non esagerare o sovrapporli.
Volevo anche dare l'idea di uccelli che trasportavano messaggi, così ho messo le lettere intorno, nelle vicinanze o tenute dai veri uccelli. Sono tutti con uno dei tre font che abbiamo usato in precedenza.
Ripeti anche il motivo nell'angolo in alto. Non renderlo scientifico. Mantenere l'orientamento casuale, e non necessariamente tutto in una direzione.
E poi basta spargere gli uccelli su tutta la tela. Ricorda di farli svanire anche se a destra e in basso inserendo sempre meno.
Questo è tutto! Il nostro background su Twitter è completo. Puoi visualizzare l'anteprima dell'immagine finale qui sotto o l'immagine a dimensione intera qui.
Questa è la versione che ho sul mio profilo twitter.
Accentsconagua