Share
In questo tutorial, ti mostrerò un effetto davvero semplice che insieme alla buona fotografia può essere usato per ottenere risultati stupendi. Stiamo andando a comporre una stanza usando foto di oggetti. Questa sala può quindi essere utilizzata in Flash per creare un sito Web o semplicemente come una grafica.
In realtà ho prodotto questa composizione circa un anno e mezzo fa. È stato utilizzato nel sito Web di FlashDen Showroom che ho creato come strumento di marketing e promozione per uno dei siti gemelli di Psdtuts +, FlashDen.net.
In questo tutorial, preparerò la prima stanza. Nel seguito farò la terza stanza. Nella parte finale di questa serie, produrrò una stanza completamente nuova con passi più dettagliati rispetto ai primi due tutorial, perché per questi primi due, sto andando oltre il vecchio lavoro piuttosto che fare qualcosa da zero.
Questo effetto si basa fondamentalmente su molte buone foto. Sfortunatamente, questo tutorial è più una guida generale che seguire esplicitamente passo dopo passo. A meno che, ovviamente, non hai voglia di andare a comprare tutte le foto d'archivio che devi fare. Puoi ottenerli tutti da iStockPhoto, anche se non ho gli URL esatti come li ho acquistati molto tempo fa e il mio account ha letteralmente migliaia di file scaricati :-) In ogni caso, ecco una mini immagine di tutti loro!
Prima di tutto, ecco il prodotto finito. Dopo aver prodotto questo mockup in Photoshop, ho quindi ricreato il sito in Flash con animazioni e pulsanti e così via. Puoi vedere il sito di Flash Showroom qui.
Puoi anche fare clic sull'immagine qui sotto per vedere la vista completa.
Ora l'immagine finale è 1024x768. La prima cosa che ho fatto è stata posizionare l'immagine di sfondo principale. Sfortunatamente per me, sono le dimensioni sbagliate (come puoi vedere sotto). Potrei allargarlo e ritagliarlo, ma poi perderò alcuni dei dettagli che desidero utilizzare in seguito, quindi ho scelto di estendere la foto.
Fortunatamente, il lavoro non è troppo difficile perché l'area superiore della foto è abbastanza semplice. Il trucco consiste nell'utilizzare i gradienti di colori scelti dallo sfondo corrente per estendere la foto.
Per prima cosa ho usato lo strumento Penna per disegnare una forma (mostrata) che volevo riempire con il mio gradiente. Si noti che la forma copre parte dell'area della foto effettiva. Questo è così che dopo posso usare una gomma morbida per cancellare i bordi e farlo sbiadire con grazia. Ho quindi scelto una tonalità scura dal lato destro e una tonalità chiara da sinistra e ho disegnato un gradiente lineare in un nuovo strato sopra la foto. Questo è stato seguito da una leggera cancellazione lungo il fondo per fondere.
Ripeto lo stesso passo ma sul lato sinistro con l'area grigio chiaro. Anche in questo caso, la forma che disegno sulla foto è più grande del necessario, quindi posso tornare indietro per una fusione uniforme.
Infine, l'ombra a destra sembrava un po 'irregolare, quindi ho aggiunto un terzo strato in cima e usando lo strumento Penna ho tracciato una forma attorno al divano e gli ho dato un gradiente scuro-chiaro per avere un'ombreggiatura più consistente, quindi eliminando le ultime tracce di dove ho mescolato le immagini.
Ora che lo sfondo è pronto, possiamo iniziare a posizionare gli oggetti. Prima di farlo, dovrei dire alcune parole sul tipo di immagini che si desidera scegliere:
In ogni caso, quindi per ogni oggetto, è sufficiente utilizzare lo strumento Penna, tracciare intorno all'oggetto, quindi fare clic con il pulsante destro del mouse sulla tela, selezionare Crea selezione dal menu visualizzato, quindi copiare l'oggetto dallo sfondo e incollarlo su la tua tela principale. Esistono altri modi per estrarre gli oggetti: puoi usare lo strumento bacchetta magica, ad esempio, quando l'oggetto è bianco piano, tuttavia, trovo che sia molto più pulito e non molto più difficile da fare con lo strumento Penna. Se usi lo strumento Bacchetta, assicurati di usare una foto più grande e ridimensiona per nascondere gli effetti di pixelazione.
Puoi anche usare il filtro> Strumento di estrazione, tuttavia, non è molto più facile e il risultato non è sempre buono.
Ad ogni modo, così ho messo la TV sul mio fondale. Poiché c'è un'ombra sul lato destro della stanza ed è più chiara a sinistra, ho anche esaminato il televisore con lo strumento Brucia per farlo corrispondere un po 'di più. Luce e ombra sono piuttosto importanti per rendere gli oggetti corrispondenti al loro ambiente. In questo particolare tutorial, non lo faremo molto, ma lo faremo nella terza parte di questa serie.
In ogni caso, la TV sembra già buona, ma in realtà dovrebbe gettare un'ombra sul muro sottostante e sulla destra. Attualmente sembra che fluttui nello spazio, quindi risolviamo quello successivo.
Ci sono molti modi per creare ombre. In questo caso, ho appena creato uno strato sotto il televisore e poi con un pennello morbido e nero selezionato, ho dipinto verso il basso e verso destra. (A proposito, non sono sicuro del motivo per cui ho lasciato quegli strumenti e le tavolozze della cronologia nello screenshot, questo è un po 'di tutorial pigro fatto proprio lì :-)
Quindi, come puoi vedere, l'ombra è ciò che ti aspetteresti se la luce provenisse dall'alto e da sinistra, che è una specie di ciò che corrisponde all'immagine di sfondo che stiamo incollando in.
Dopo ciò, ho posizionato un'immagine sul televisore. L'ho inserito in un nuovo livello e poi gli ho dato uno stile di livello Inner Shadow con una distanza di 0. Questo è così che c'è un po 'di ombra lungo i bordi e l'immagine appare come se fosse inserita. Questo è un po 'un effetto rapido e sporco. Davvero, se volessi fare la TV nel modo giusto, ti suggerirei di cambiare la tua televisione e poi osservare cosa succede ai bordi e quali tipi di luci il vetro / schermo ha dalla luce. Ma in questo caso, la TV è piccola e quando la porto a Flash, sto posizionando i video qui, quindi non è così importante.
Quindi vogliamo posizionare il laptop. Come con la TV, ho ritagliato il laptop e il mouse dalle loro rispettive immagini. Li ho rimossi con lo strumento Trasforma (Ctrl + T) e li ho posizionati in modo appropriato. Ho quindi disegnato un cavo del mouse (vedi il prossimo passo).
Per far sembrare che il laptop sia davvero lì, ho disegnato un cavo per il mouse che copre la cosa del cuscino e scende sul pavimento. Questo aiuta a rendere gli oggetti come se stessero davvero interagendo con il loro background e non solo in giro.
L'ho fatto afferrando il mio strumento penna e immaginando dove sarebbe andato il cavo del mouse se fosse davvero lì. Sembrava che sarebbe andato lungo il cuscino, cadere giù, e poi lungo il pavimento (non proprio scienza missilistica, ma pensavo che lo avrei pronunciato comunque!) Poi una volta tracciato il percorso, ho fatto clic con il tasto destro e tracciato tracciato selezionato e utilizzato un pennello rigido 2px con colori grigio chiaro.
Una volta che il cavo è stato disegnato, ho usato lo strumento Brucia per spazzolare un po 'di ombra sul cavo per renderlo più realistico (poiché in realtà tutto ha bit di luce e ombra e nessun oggetto è in realtà solo un colore piatto).
Successivamente, dobbiamo aggiungere un'ombra sotto il laptop e il mouse. L'ombra del mouse è piuttosto semplice - è solo un po 'di oscurità sfocata impostata su Moltiplicare sul tappeto. Per il laptop vuoi che l'ombra vada giù dal bordo del cuscino.
Nello screenshot qui sotto, ho sollevato il laptop in modo da poter vedere l'ombra che ho disegnato correttamente. Ancora una volta l'ho fatto usando un pennello morbido e dei colori scuri, quindi ho impostato il livello su Moltiplica in modo che si adatti meglio alla foto sottostante. Dato che il cuscino ha un bordo dove l'ombra va oltre il bordo (nella parte più a destra), ho fatto l'angolo di cambiamento dell'ombra sempre così leggermente e scendo sul cuscino.
Con gli altoparlanti sul lato destro, ho praticamente fatto lo stesso tipo di cose con il laptop - cioè creare un livello sotto la foto, disegnare con colori scuri la forma sotto l'oggetto e impostarlo su Moltiplicare.
Capire quale tipo di ombra un oggetto sta per creare è solo questione di osservare gli oggetti nella vita reale e osservare come proiettano ombre con luci diverse. Per questo tipo di immagine, l'ombra non ha bisogno di essere perfetta, deve solo essere abbastanza buona. In realtà, se guardi da vicino inizierai a vedere che a volte le luci e le ombre non hanno molto senso (per esempio, nota con gli altoparlanti nello screenshot qui sotto, il lato sinistro dell'altoparlante destro è scuro e viceversa per quello sinistro speaker, quando in realtà se la luce è a sinistra, questo è l'opposto di quello che dovrebbe accadere). Ma per un'immagine come questa in cui vuoi solo approssimare il realismo, l'effetto fa il trucco e fa sembrare l'occhio.
Per l'orologio in alto a sinistra, in realtà ne ho disegnato uno usando Photoshop - notate che è solo un mucchio di rettangoli l'uno nell'altro usando sfumature e un po 'di luce in alto a sinistra. Non parlerò troppo di questo passo dato che questo tutorial tratta di comporre roba insieme senza disegnare orologi falsi :-) Basti dire che non sono riuscito a trovare l'orologio giusto e questo ha fatto il trucco.
Alla fine, ho messo un sacco di testo qua e là e pulsanti e cosa-hai-te e l'aspetto è completo.
Come ho detto all'inizio, non c'è molta difficoltà in un effetto come questo dal punto di vista della pura abilità tecnica di Photoshop. Si tratta di sviluppare il tuo occhio per capire come le cose dovrebbero combaciare, scegliere una buona serie di foto da compattare e aggiungere ombre e luci per riunire tutto.
L'effetto finale con le foto corrette può essere davvero piacevole ed è particolarmente utile per l'utilizzo in Flash, dove è possibile far volare oggetti o materializzarli.
Puoi vedere il sito di Flash Showroom qui o puoi anche fare clic sull'immagine qui sotto per vedere la vista completa.
Nella prossima parte di questa serie, passeremo attraverso un'altra stanza in modo simile a questo. Probabilmente non c'è molto altro da aggiungere, ma è comunque interessante rivedere il processo. Nella parte finale, metto insieme un'altra stanza da zero e cerco di visualizzare tutti i piccoli dettagli del processo. Quindi, fino alla prossima volta gente!
Nota dell'editore: Questo tutorial precede il lancio delle nostre iscrizioni PLUS. Sfortunatamente, non esiste un file PSD allegato.
Accentsconagua