Usa la manipolazione delle foto e i livelli 3D per disegnare un'illustrazione di copertina surreale

I miei clienti mi chiedono spesso di creare scenari impossibili, paesaggi strani e immagini surreali per i loro progetti; immagini che non sarebbero possibili nella vita reale. Sono situazioni come queste in cui la manipolazione delle foto diventa un potente strumento di progettazione. Nel tutorial di oggi ti mostrerò come progettare una copertina di CD utilizzando diverse tecniche di manipolazione fotografica, come mantenere i livelli di testo critici modificabili per eventuali modifiche future e come eseguire il rendering di un mockup rapido utilizzando il filtro Fuoco prospettico. Cominciamo!


Risorse Tutorial

Per risparmiare tempo, puoi scaricare tutte le seguenti immagini prima di iniziare.

  • Stanza vuota grazie a medialab
  • Un ragazzo seduto grazie a Kristina
  • Sgabello
  • Crow 1 grazie a Lip Kee
  • Crow 2 grazie a MShades
  • Pila di libri
  • Libro aperto
  • Più libri
  • Foglio di carta
  • Custodia per CD
  • Trama di carta

Passaggio 1: impostazione del documento

Questa volta creeremo una manipolazione fotografica ispirata al classico poema di Edgar Allan Poe, "The Raven". Questo non dovrebbe essere interpretato come una rappresentazione grafica del poema, solo un adattamento distorto raffigurante la solitudine dell'uomo che ha perso la sua amata Lenore. Immagina questo come un progetto di audiolibri o una cover di un album rock.

Iniziare a creare il documento; una copertina del CD standard è 4,75 x 4,75 pollici. Quindi crea un documento in queste dimensioni. Se vuoi veramente stamparlo, dovresti lavorare su una risoluzione di 300+ pixel per pollice, ma stavolta sto impostando il documento su 200 dpi a causa delle dimensioni della foto.

Una volta impostata la risoluzione dell'immagine, mostra i righelli (Comando + R) e aggiungi alcune guide ai bordi del documento. Poiché questo sarà un disegno di stampa, è necessario aggiungere un margine per la sicurezza, quindi vai su Immagine> Dimensioni della tela e modifica la dimensione a 4,85 x 4,85 pollici Ancoraggio: Centro.


Step 2 - The Room

L'intera poesia si svolge nella stanza del narratore, apre l'immagine "Stanza vuota" in Photoshop e la salva con un nome descrittivo come "Room.psd". Questa immagine è ampia e il nostro design dovrebbe essere un quadrato perfetto. Avremo bisogno di allungarlo senza distorcerlo. In realtà è piuttosto semplice, prima disegnare una Guida cercando di delimitare un quadrato sul lato sinistro, quindi usando lo strumento Selezione rettangolo (M) seleziona il lato destro dell'immagine, copialo e incollalo facendo corrispondere il lato destro del segmento con la guida. Quindi usa il controllo trasformazione libera (V) e tieni premuto il tasto Comando (Ctrl) per distorcere l'area incollata e abbinare le linee orizzontali della parete della stanza.


Passaggio 3: Iscriviti

Per rendere la riduzione più lucida possibile, regola i livelli di "Livello 2" come mostrato nell'immagine sottostante. L'ho fatto in 2 round, ma puoi provare a farlo in uno solo. Quindi, aggiungi una maschera di livello> Nascondi tutto e riempi la maschera con un gradiente orizzontale (bianco - nero). Questo passaggio farà sì che la riduzione funzioni quasi perfettamente.


Passaggio 4: aggiungere la stanza al documento principale

Nel file "Room.psd" usando lo strumento Selezione rettangolare (M), seleziona il lato destro dell'immagine e premi Comando (Ctrl) + Maiusc + C per copiare tutti i livelli della selezione (questo per evitare il passo di appiattimento l'immagine e ti aiuta a mantenere questa parte del lavoro modificabile per ulteriori modifiche, nel caso in cui). Quindi incollalo nel documento principale in un nuovo livello denominato "Room".


Passaggio 5: aggiungi il ragazzo

Ora è il momento di aggiungere uno dei personaggi principali, il ragazzo. Per questo, prendi l'immagine del ragazzo seduto e aprila in Photoshop, quindi usa qualsiasi tecnica per selezionare la forma del ragazzo (sto usando lo strumento Lazo poligonale). Copia la selezione e incollala nel documento principale. Quindi vai a Modifica> Trasforma> Rifletti orizzontalmente per far corrispondere l'illuminazione della scena. Questo è molto importante perché troppo spesso non avrai abbastanza soldi per fare i tuoi scatti e dovrai usare le scorte e scegliere la giusta immagine non è facile. Usa lo strumento di trasformazione gratuito per ridurre le dimensioni del ragazzo. Assegna un nome al livello "Guy".


Passaggio 6: ombra generale

Dal momento che non voglio una scena fotorealistica al 100%, ma drammatica; aggiungeremo diversi livelli di ombre, la prima è l'ombra della stanza. Crea un nuovo livello chiamato "Room Shadow"; utilizzando un pennello morbido grande (Colore: # 151610, Dimensione: 300px Opacità e Flusso 50%) dipingi tutto il lato destro della scena, quindi modifica il metodo di fusione in Moltiplica e la sua opacità al 75%.


Passaggio 7: aggiunta di altri oggetti: uno sgabello

Apri l'immagine delle feci, seleziona la sua forma e incollala nel documento principale; chiama quel livello "Sedia". Ancora una volta devi capovolgerlo orizzontalmente per abbinare le luci.


Passaggio 8: masterizzare e desaturare

Afferra lo strumento Brucia, seleziona "Ragazzo" e brucia tutto il suo lato destro per aumentare l'intensità delle ombre. Quindi prendi lo strumento Spugna predefinito e desaturi le aree più luminose. Fai lo stesso con il livello "Sedia".


Passo 9 - Arriva il corvo

Apri l'immagine "Crow1" dalle risorse e seleziona la sua forma usando qualsiasi tecnica (l'ho fatta con lo strumento Lazo poligonale), copiala e incollala in un livello chiamato "Raven". Giralo orizzontalmente e ridimensionalo un po ', rendi il corvo più grande del ragazzo. Mettilo vicino alla porta della stanza.

Quindi aggiungi una maschera di livello al livello "Raven" usando lo strumento Selezione rettangolare. Fatelo disegnando un rettangolo sopra la forma della porta e riempiendo l'area di nero. In questo modo creeremo l'illusione di un corvo che entra nella porta senza essere effettivamente distruttivo per l'immagine.


Passaggio 10: alcuni libri

Apri il file "Pile of Books", seleziona la forma e incollala in un nuovo livello denominato "Books", ridimensionala e posizionala appena sopra il livello "Chair", quindi masterizza anche la parte destra.


Passaggio 11: combina i corvi

Il nostro corvo è molto carino, ma non è giusto. Per risolvere questo problema, dovremo manipolarlo un po 'dandogli una nuova testa. Apri l'immagine "Crow 2" dalle risorse e seleziona solo la sua testa. Incollalo, giralo e ridimensionalo in un nuovo livello chiamato "Testa" sopra il "Livello corvo", quindi usa la stessa tecnica mostrata nel passaggio 3 di questo tutorial, unisci la testa al corpo; ma invece di usare un gradiente, usa un pennello nero. Se necessario, elimina alcune aree della testa del livello "Corvo".


Passaggio 12 - Altri libri

Dato che le ali degli uccelli fanno saltare l'aria, aggiungeremo un libro aperto a causa della brezza. Apri l'immagine "Apri libro" dalle risorse, estrai solo il libro aperto in alto e incollalo in un nuovo livello nel documento principale denominato "Libro aperto". Infine aggiungi tanti libri quanti ne vuoi. Ricordati sempre di bruciare il lato destro di loro.


Step 13 - Ombre

Duplica il livello "Raven" usando lo strumento Trasformazione libera per distorcerlo; rendendolo più ampio. Quindi in Tonalità / Saturazione (Comando (Ctrl) + U) abbassa il valore di Luminosità a -100. Vai a Filtro> Sfocatura> Sfocatura gaussiana, raggio 8px per sfumare l'ombra e ridurre l'opacità del livello al 50%.


Passaggio 14 - Altre ombre

Applicheremo questa tecnica su quasi tutti gli oggetti nella scena, è piuttosto facile. Crea un livello dietro l'oggetto correlato, in questo caso il livello "Raven" e chiamalo "Raven Shadow" (lo abbiamo fatto nel passaggio precedente), quindi usando un grande pennello morbido e scuro (# 110C06) dipingi un'ombra lì. Quindi crea un nuovo livello chiamato "Front Shadow" e dipingi le ombre sull'oggetto correlato, in questo caso il corvo. Quindi usando una gomma grande e morbida (E) Opacity e Flow 50% eliminate alcune aree dell'ombra frontale dove pensate che ci dovrebbe essere più luce. Prova a raggruppare i livelli ombra e l'oggetto principale in una cartella per mantenere organizzati i livelli.


Passaggio 15: ombre e più ombre

Ripeti la precedente tecnica shadow ma questa volta con il livello "Open Book". Se lo desideri, puoi utilizzare lo strumento sfumino sul livello ombra per unirlo meglio con lo sfondo.


Step 16 - L'ombra di Guy

Proprio come con il livello "Raven" del passaggio 14, duplica il livello "Guy", abbassa la sua leggerezza e opacità e poi dipingi sia le ombre anteriori che quelle posteriori, ma assicurati di prestare particolare attenzione all'ombra sotto le sue scarpe da ginnastica.


Passo 17 - Ombre di sedie e libri

Usando la stessa tecnica dipingi le ombre del livello "Chair" e dei libri extra sul pavimento, ancora una volta, non provare a creare un risultato realistico della foto ma drammatico, quindi sentiti libero di aggiungere tutte le ombre che desideri ma cerca sempre di non rendere l'immagine troppo scura.


Step 18 - Le ombre della stanza

Usando un pennello scuro più grande (# 110C06) dipingi tutti i bordi della stanza in un nuovo livello chiamato "Ombre frontali" da qualche parte sopra il livello "Stanza". Infine abbassa la sua opacità al 50%.


Step 19 - Parole sul muro

Questo ragazzo è davvero ossessionato dal suo amore perduto, Lenore, come puoi descrivere una sensazione del genere in un'immagine muta? È piuttosto difficile vero? Ecco perché ho deciso di aggiungere la parola "Lenore" dipinta più volte sul muro. Per questo, crea un nuovo documento (qualsiasi dimensione è ok) con uno sfondo grigio neutro (# A0A0A0) e usando alcuni font disegnati a mano (puoi trovare diversi font gratuiti in dafont.com) scrivi la parola "Lenore" ovunque. Quindi premi Comando (Ctrl) + A per selezionare tutto e Comando (Ctrl) + Maiusc + C per copiare una versione piatta dell'immagine.


Passo 20 - Usa il filtro del punto di fuga per incollare le parole sulle pareti e sul soffitto.

Crea un nuovo livello chiamato "Wall words" sopra i layer "Room" o "Room". Quindi vai su Filtro> Punto di fuga. Nella finestra del punto di fuga disegnare i piani necessari per posizionare le parole sul muro. Se non hai familiarità con il filtro del punto di fuga, dovresti prima leggere i seguenti tutorial: Usare il filtro del punto di fuga per prendere in giro un biglietto da visita o creare un impressionante modello di una scatola di lerciume.

Una volta che hai creato i piani, incolla gli appunti lì, trascinalo e ridimensionalo finché non sembra buono. Questo non è un processo facile, quindi sentitevi liberi di provare tutte le volte che avete bisogno prima di andare avanti.

Dopo aver posizionato il testo in modo appropriato, modifica la modalità di fusione del livello "Pareti di parole" su Sovrapponi.

Suggerimento: Windows 7 e il filtro Fuoco prospettico non funzionano bene insieme, per qualche motivo Windows 'Aero ha un conflitto con il motore di Fuoco prospettico, quindi se stai lavorando con W7 e il tuo sistema si blocca improvvisamente mentre usi questo filtro prova a cambiare l'aspetto del desktop su "Windows 7 Basic".


Passaggio 21: elimina le parole in più

Utilizzando lo strumento Lazo poligonale selezionare le aree senza muri (porta e finestra) con il layer "Wall words" selezionato, quindi eliminare la selezione. Quindi modifica la sua opacità al 50%.


Passo 22 - Sfocatura movimento di Raven

Dato che il nostro corvo volerà, avremo bisogno di aggiungere un effetto movimento, è abbastanza facile. Duplica il livello "Raven" e posizionalo sopra l'originale. Vai a Filtro> Sfocatura> Sfocatura movimento, imposta Angolo: 0º e Distanza 20 px e premi OK, quindi con lo Strumento Gomma o usando una maschera di livello elimina alcune parti del livello di sfocatura come mostrato nelle immagini sotto.


Passo 23 - Alcuni pezzi di carta volante

Prendi il pezzo di carta dalle risorse, estrailo dallo sfondo bianco e incollalo in un nuovo livello sopra tutti gli altri nel nostro documento principale. Usando lo strumento Warp (Modifica> Trasforma> Deforma) distorcere il pezzo di carta come mostrato nell'immagine qui sotto. Ripeti questo passaggio tutte le volte che vuoi con diversi pezzi di carta volante. Metti tutti in una cartella.


Passaggio 24: aggiungi ombre ai documenti volanti

Unisci la cartella della carta volante e desaturi il livello risultante. Usando lo strumento Brucia per scurire alcune ombre sulla carta stessa. Quindi, usando la nostra stessa vecchia tecnica di shadowing, aggiungi due livelli ombra, uno sul davanti e l'altro sul retro, dipingi delle ombre usando un pennello scuro. Finalmente puoi ripetere il processo del passo 22 per aggiungere un effetto Motion Blur.

Metti tutti i livelli in una cartella denominata "Arte".


Passaggio 25: aggiungere il titolo

Usando il carattere "Trajan", aggiungi il titolo della copertina, metti tutti i livelli del titolo in una cartella e chiamalo "Titolo", quindi fai clic su Opzione (a destra) sulla miniatura del livello e seleziona Converti in oggetto avanzato. Quindi fai clic su Oggetto avanzato e vai a 3D> Nuova cartolina 3D da livello, quindi l'oggetto intelligente "Titolo" si trasformerà in un livello 3D con tutto il testo ancora modificabile. In questo modo, indipendentemente dal numero di modifiche apportate alla prospettiva, alla rotazione e alla profondità, puoi comunque modificare il testo in qualsiasi momento.

Aggiungi un effetto Smusso e rilievo e Sovrapponi sfumatura al livello 3D esattamente come mostrato nella parte inferiore dell'immagine sottostante. Non preoccuparti troppo della posizione della luce e dell'ombra in questo momento; lo lavoreremo al prossimo passo.


Passaggio 26: Trasforma la cartolina 3D

Utilizzo dello strumento di trasformazione 3D Ruota, sposta e trascina il livello per farlo corrispondere alla prospettiva del muro. Dopo aver posizionato il livello in modo appropriato, aggiungi lo Stile ombreggiatura che imposta l'angolo di luce al 30% e una grande distanza tra l'ombra e il testo (32px in questo esempio).


Passaggio 27: modifica il testo

Spesso i clienti cambiano idea nel bel mezzo del progetto, ecco perché è molto importante mantenere i livelli sempre modificabili. In questo esempio aggiungeremo alcune parole mancanti al titolo: il nome dell'autore. Per questo dovrai scavare attraverso i documenti nidificati negli oggetti, prima fai doppio clic sulla Trama diffusa sul livello 3D (trama "Titolo"), un nuovo file chiamato "Title.psd", in questo nuovo documento dovrai trova il livello Oggetto avanzato, fai doppio clic su di esso e infine vedrai i livelli di testo in un documento chiamato "Titolo2.psd", lì puoi espandere la dimensione della tela e aggiungere la terza riga di testo. Per salvare le modifiche devi salvare ogni documento all'indietro, prima "Text2.psd" e poi "Text.psd", quindi vedrai il tuo livello 3D aggiornato sul documento principale.


Passaggio 28: aggiungi un po 'di rumore grunge

Come dettaglio sgangherato, aggiungeremo del rumore al composito. Premi D sulla tastiera per caricare i colori predefiniti, crea un nuovo livello denominato "Noise" sopra l'oggetto "Testo" e vai su Filtro> Render Clouds. Quindi vai su Filtro> Disturbo> Aggiungi disturbo (imposta i valori mostrati sotto). Infine cambia il metodo di fusione del livello in Sovrapponi e Opacità al 35%.


Passaggio 29 - Regolazione dei livelli

A questo punto saprai se il disegno è troppo scuro o troppo chiaro, per questo motivo dovremo aggiungere un livello di regolazione Livelli per schiarire l'immagine. Ora seleziona tutto (Comando (Ctrl) + A) e Comando (Ctrl) + Maiusc + C per appiattire e copiare il disegno.


The Mock-Up

Passaggio 30 - Caso CD

A volte i clienti vogliono vedere un esempio di vita reale del loro prodotto. È davvero difficile inviare una versione stampata di un file di copertina, specialmente se i tuoi clienti sono lontani da te, ma puoi inviare loro una foto. Questa volta prepareremo la copertina in una custodia per CD. Apri l'immagine del "CD case" in un nuovo documento chiamato "mockup.psd" e crea un nuovo livello sopra il livello appiattito. Seleziona il nuovo livello e vai su Filtro> Punto di fuga, lì, dipingi un aereo che corrisponde alla forma della cassa e incolla lì gli appunti.


Passaggio 31: lucidare il modello

Poiché la copertina è dietro la custodia in plastica del CD, sarà necessario eliminare alcune aree del livello di copertina. Per questo aggiungi una maschera di livello e usa lo strumento lazo poligonale, seleziona le piccole tacche del coperchio di plastica, quindi riempi la selezione con il nero sulla maschera di livello. Puoi abbattere l'opacità dell'arte nascosta per vedere effettivamente le tacche.

Quindi, usando lo strumento Lazo poligonale, ancora una volta, selezionare un semicerchio della tacca, dove la carta sarà chiaramente visibile e riempirla con nero o grigio.


Passo 32 - La plastica

Useremo un Sovrapposizione sfumatura sul livello del disegno per creare l'effetto 'plastica lucida', questo è abbastanza semplice, basta aggiungere diverse transizioni bianco-nero sull'effetto e cambiare la sua modalità di fusione in schermo e la sua opacità al di sotto del 20%. Inoltre, aggiungo un'ombra interiore per migliorare la percezione della profondità.


Passaggio 33 - Tocchi finali

Come tocco finale aggiungo il layer "Paper Texture" dalle risorse in un nuovo livello dietro il livello "CD". La modifica della modalità di fusione del livello "CD" su Moltiplica funziona perfettamente in questo caso. Poi basta giocare con il livello texture, ho aggiunto un livello di colore solido scuro (# 36312D) dietro la texture; inoltre ho aumentato i livelli scuri della texture aggiungendo una maschera di livello riempita con un gradiente radiale bianco-nero; creando una vignetta scura in questo modo.


Immagine finale

Si prega di dare un'occhiata alla versione finale della nostra copertina.