Come fare un mockup su Photoshop
Di recente hai stretto contatti con un cliente, che però ti ha chiesto un'anteprima del suo logo su una maglietta? Magari invece un artista vorrebbe vedere la resa di un catalogo per i suoi quadri e non sai come fare? Come sempre puoi tirare un sospiro di sollievo, perché vengo in tuo soccorso molto volentieri.
In questa guida molto interessante infatti ti illustrerò come fare un mockup su Photoshop, che possa lasciare i tuoi clienti a bocca aperta. Creare un modello infatti è il modo migliore per generare l'anteprima di un qualsiasi prodotto e, anche se sembra difficile, ti garantisco che leggendo le prossime righe non avrai alcuna difficoltà.
Come ormai saprai, ho solo bisogno che tu mi conceda qualche minuto del tuo tempo e che, con un pizzico di pazienza, legga attentamente quel che ho da dirti. Se sei pronto mettiti comodo e preparati a conoscere tutti i segreti del mockup: buona lettura.
Indice
- Come creare un mockup su Photoshop
- Come modificare un mockup su Photoshop
- Come creare un mockup su Photoshop Online
- Come creare un mockup su app Photoshop
Come creare un mockup su Photoshop
Mockup non è altro che il termine inglese per indicare il modello di un oggetto o di un lavoro, progettato appositamente per uno scopo preciso. Hai presente quei portali grazie ai quali puoi creare le tue magliette personalizzate? Le anteprime che vedi sono proprio dei mockup in tempo reale, quindi non mi resta che spiegarti come creare un mockup su Photoshop.
Attraverso un mockup potrai sostanzialmente illustrare all'utente finale una resa fittizia dell'oggetto in questione. Utilizzato spesso per le stampe o per le anteprime di oggetti di merchandising (tazze, cappelli, zaini ecc.), questo tipo di lavorazione non va confusa con il modello in scala e con il prototipo perché, di fatto, ha solo scopo illustrativo e non funzionale.
Per spiegarti tutta la procedura ritengo opportuno partire da un esempio pratico, quindi ipotizziamo tu abbia bisogno di apporre un logo tridimensionale su di un portafogli da uomo. I comandi che ti illustrerò saranno validi in tutti i frangenti, anche se per quelli più complessi potrebbe essere necessaria un po' di pratica in più. Inoltre, do per scontato che tu conosca un minimo le funzioni di base del programma, altrimenti puoi sempre dare un'occhiata alla mia guida su come usare Photoshop.
Preparare lo spazio di lavoro
Generalmente il punto di partenza per creare un modello è proprio il primo livello, vediamo quindi come preparare lo spazio di lavoro di un mockup su Photoshop, partendo da una foto gratuita. Se non sai come reperirla, puoi leggere la mia guida che ho scritto appositamente per scaricare immagini gratis: ciò non toglie che potrai usare lo sfondo più consono (magari una grafica o un disegno).
Ti consiglio solo di fare attenzione e di usare immagini di cui disponi il diritto di utilizzo, magari acquistando una licenza oppure usando elementi con una licenza di tipo Creative Commons. Anche in questo caso posso venire in tuo soccorso, perché ho scritto una guida in merito.
Non ti resta che aprire Photoshop e recarti sulla voce File del menu principale, poi fare clic su Apri. Ora individua l'immagine di tuo interesse e fai nuovamente clic su Apri, in alternativa puoi direttamente fare clic sull'immagine da te scaricata con il tasto destro del mouse e, una volta selezionato Apri con…, fare clic su Photoshop.
A questo punto dovresti trovare l'immagine al centro dello spazio di lavoro e sulla destra visualizzare un unico livello (sfondo), corrispondente all'immagine appena caricata. Se l'oggetto che hai scelto presenta delle scritte o altre grafiche, puoi facilmente rimuoverle dopo aver duplicato lo sfondo con Ctrl+J o, su macOS, con cmd+j.
Abilita quindi la selezione rettangolare premendo il tasto M sulla tastiera o cliccando sull'icona a forma di rettangolo tratteggiato, nella parte sinistra della schermata (solitamente è la seconda dall'alto).
Individua la parte da rimuovere e trascina il cursore per tutta l'ampiezza dell'elemento di tuo interesse, dopodiché premi Shift+F5 oppure fai clic su Modifica dal menu principale e seleziona la voce Riempi. Nella piccola finestra che si aprirà troverai la voce Contenuto, pertanto seleziona l'opzione In Base al Contenuto dal menu a tendina adiacente e premi OK.
Come per magia Photoshop rimuoverà l'elemento indesiderato e riempirà lo spazio in base ai pixel di contorno. Non ti resta che deselezionare l'area premendo Ctrl+D o cmd+d, per poi procedere con l'importazione della grafica di tuo interesse, nel nostro caso un logo.
Per importare il logo tieni premuto il pulsante sinistro del mouse sul file e trascinalo in prossimità della scheda Photoshop con il tuo sfondo. Ora non ti resta che rilasciare il pulsante sinistro e dovresti disporre di una nuova scheda contenente il tuo logo tridimensionale.
Applicare la grafica
Se fin qui è tutto chiaro e il tuo spazio di lavoro è pronto, procediamo con l'implementazione del tuo logo sul portafoglio da uomo. Non preoccuparti se l'oggetto di sfondo ha una prospettiva particolare, ci sono strumenti di Photoshop appositamente pensati per applicare la grafica del mockup in maniera precisa e rapida.
All'interno della scheda con il tuo logo, premi i tasti Ctrl+A o cmd+a per selezionare la grafica, oppure recati sulla voce del menu Selezione e clicca su Tutto. Subito dopo spostati sulla voce del menu Modifica e fai clic su Copia, altrimenti premi i tasti Ctrl+C o cmd+c sulla tua tastiera per copiare la selezione.
Il passaggio successivo prevede di tornare al progetto contenente il portafoglio, dopodiché fai clic sull'icona a forma di + in basso a destra: serve per aggiungere un nuovo livello. Sotto la voce Filtro del menu principale, dovresti trovare la funzione Fuoco Prospettico, quindi fai clic su di essa per aprire una nuova finestra di lavorazione.
Questa funzione serve principalmente per tracciare le prospettive dell'oggetto di sfondo in maniera corretta. Dovrai quindi disegnare la stessa prospettiva di cui il tuo oggetto dispone e, nel nostro caso, tracciare i punti seguendo i quattro angoli del portafoglio. Per farlo clicca con il tasto sinistro del mouse sui quattro spigoli, cercando di rispettare le proporzioni prospettiche e vedrai che una volta tracciato l'ultimo punto, Photoshop applicherà una griglia sull'oggetto.
Se vuoi rifinire la griglia prospettica puoi premere i tasti Ctrl+[+] o cmd+[+] per effettuare uno zoom: trascina quindi le quattro estremità per farle collimare con i bordi del portafoglio. Per ridurre lo zoom premi Ctrl+[-] o cmd+[-] fino alle dimensioni di tuo gradimento.
Dal momento che hai copiato il contenuto della scheda con il logo, ora è il momento di incollarla sulla griglia prospettica. Non preoccuparti, il procedimento è molto semplice e ti basterà premere i tasti Ctrl+V o cmd+v per trasferire la grafica. Trascinando il logo sulla griglia prospettica vedrai come la grafica si adatterà magicamente allo spazio di fuoco prospettico.
Una volta scelta la posizione del tuo logo, potresti avere la necessità di ridimensionarlo, dico bene? Per farlo ti basta individuare l'icona a forma di rettangolo con un puntatore sovrapposto (la sesta icona dall'alto), nel menu sulla sinistra della schermata. Tenendo premuto il tasto Shift su una delle maniglie angolari attorno all'oggetto, trascina il mouse secondo le tue esigenze: il logo verrà ridimensionato senza perdere le proporzioni.
Terminate le modifiche non ti rimane che cliccare su OK in alto a destra e il tuo spazio di lavoro conterrà l'oggetto desiderato. Nei paragrafi precedenti ti ho fatto un esempio basilare per creare un mockup, ma devi sapere che online sono disponibili numerosissimi modelli da modificare in base alle tue esigenze.
Come modificare un mockup su Photoshop
Potresti aver bisogno di creare un mockup per i tuoi biglietti da visita, o forse per realizzare un termos o un'agenda. In questo caso, oltre a essere utile sapere come modificare un mockup su Photshop, ti invito anche a leggere la mia guida per trovare i migliori siti per fare grafiche.
Un mockup generalmente è composto da più livelli, costituiti a loro volta da oggetti dinamici che sono utili per eseguire modifiche rapide senza intervenire sull'intero contenuto. Devi sapere che online si possono trovare basi per mockup con licenza libera, ovvero che consentono l'utilizzo dei modelli sia per scopi personali, che per scopi commerciali.
Minimal Mockups mette a disposizione, gratuitamente, una vasta gamma di mockup, partendo da modelli per la stampa, come biglitti da visita e brochure, fino ad arrivare a illustrazioni per poster, tecnologia e merchandising. Al suo interno troverai i modelli in formato psd, in modo da poter lavorare singolarmente ogni livello o sfumatura. Dalla homepage, facendo click su All Mockups, accederai al portfolio completo e potrai navigare le categoria tramite l'apposito menu poco sopra alla griglia dei prodotti: ti basterà fare clic su uno di essi e poi su Download Mockup per scaricarne uno sul tuo dispositivo.
Per agevolarti ho voluto lavorare su uno dei mockup di Minimal Mockups, che ho scaricato da qui, ovvero il modello di una felpa.
Una volta estratto il pacchetto in formato zip, apri il file denominato mockup.psd e accedi immediatamente allo spazio di lavoro su Photoshop. Qui troverai numerosi livelli nella parte destra della schermata, quindi fai clic sulla freccetta alla sinistra della cartella Hoodie Effect: verrà così mostrato il contenuto.
Per modificare la scritta, o per aggiungere un tuo logo personalizzato, fai doppio clic sulla miniatura dell'oggetto Design. Photoshop aprirà una nuova scheda con l'oggetto selezionato, pertanto modificalo secondo le tue esigenze, potrebbe essere un'idea aggiungere del testo sulla parte frontale della felpa.
Nella colonna di sinistra individua l'icona T e fai clic su di essa, dopodiché porta il cursore nel punto dove intendi inserire il testo e premi il tasto sinistro del mouse. Inserisci il testo che preferisci e aggiusta le sue dimensioni (o il font) utilizzando la barra degli strumenti superiore. In ogni caso ho preparato una guida dettagliata per applicare scritte su Photoshop, ti consiglio di leggerla.
Se invece vuoi importare un logo non devi fare altro che trascinare il relativo file sullo spazio di lavoro. Terminate le modifiche premi Ctrl+S o cmd+s per salvare, oppure recati su File nel menu principale e fai clic su Salva.
Ritornando alla scheda del progetto principale, noterai come le modifiche siano state applicate in men che non si dica. Ora però procediamo e andiamo a modificare l'etichetta della nostra felpa, quindi individua la cartella Label nella parte destra dello spazio di lavoro (sempre sotto la cartella “Main Layers”) e fai clic sulla piccola freccia alla sua sinistra.
Anche in questo caso puoi notare più livelli disposti in colonna, quindi individua quello denominato Label e fai doppio clic sulla sua miniatura. È il momento di agire sulla nuova scheda che si è appena aperta: qui potrai applicare ad esempio un nuovo colore di sfondo, un logo o tutto quel che ritieni più opportuno.
Puoi ripetere la procedura che ti ho mostrato nei paragrafi precedenti se vorrai applicare il tuo logo all'etichetta, oppure puoi inserire ad esempio del testo. Ricorda di salvare le modifiche, altrimenti esse non verranno mostrate nella scheda del progetto principale.
In un mockup ci sono anche molti giochi di luci e ombre, ma sarebbe impossibile per me mostrarti ogni modifica possibile (sono potenzialmente infinite), quindi mi limiterò a illustrarti le funzioni principali. Facendo doppio clic su un livello (bada bene a cliccare in uno spazio vuoto), accederai al pannello Stile Livello e da qui potrai lavorare su una vasta scelta di personalizzazioni. A titolo di esempio avrai la possibilità di sfruttare l'Effetto Rilievo per aumentare la tridimensionalità dell'oggetto, oppure abilitare l'opzione Ombra Esterna, per aumentare ulteriormente l'ombra della felpa.
Non finisce qui, perché potrebbe tornare utile applicare un livello di regolazione al fine di lavorare sulla tonalità e sui contrasti di un determinato elemento. Per farlo ti basterà selezionare la voce del menu principale Livello, dopodiché spostare il cursore su Nuovo Livello di Regolazione. Scegli il livello che desideri (ad esempio Luminosità/Contrasto) e, nella finestra che si aprirà, abilita Usa livello precedente per creare maschera di ritaglio: questo ti permetterà di modificare solo il livello selezionato e non tutto il progetto.
Il consiglio che voglio darti però è quello di giocare anche con il pulsante On/Off di ogni livello, soprattutto per capire a cosa essi siano associati. Non sarà difficile per te notare che nella parte sinistra di ogni livello è presente un'icona a forma di occhio. Per capire bene la posizione di ogni livello ti basterà fare clic su di essa, al fine di attivare o disattivare l'effetto in questione.
Come creare un mockup su Photoshop Online
Adobe dispone anche della versione online del suo software di editing fotografico, ma lasciami dire che ci sono molte meno funzioni rispetto al programma per desktop. Se vuoi sapere come creare un mockup su Photoshop Online, prima devo metterti a conoscenza del fatto che nella versione Web non esiste la funzione Fuoco Prospettico.
Un mockup è un tipo di prodotto che gioca molto sui fattori prospettici, quindi il grosso del lavoro dovrai farlo manualmente. Per prima cosa accedi a Photoshop Online da questa pagina e fai clic su Carica un'immagine dalla homepage.
Ripeterò l'esempio del portafoglio che ti ho presentato nel primo capitolo, quindi individua l'immagine sul tuo computer e poi fai clic su Apri. Lo spazio di lavoro di Photoshop Online è disposto in maniera molto simile alla versione Desktop, quindi sulla destra troverai i livelli e sulla sinistra i comandi per aggiungere gli elementi.
Nella parte inferiore dello schermo dovresti avere le opzioni per rimuovere lo sfondo, per isolare il soggetto e altre azioni rapide: esse sono comunque collegate alla sidebar di sinistra. Una volta caricato lo sfondo, procedi importando la grafica del tuo logo o dell'elemento che intendi apporre sul tuo mockup.
Non ti rimane che fare clic sulle tre righe orizzontali in alto a sinistra e selezionare la voce Importa. A questo punto seleziona il file che vuoi importare e fai nuovamente clic su Apri, in tale maniera dovresti vedere un nuovo livello aggiunto alla sidebar di destra. È necessario modificare la prospettiva del logo, se vorrai fare un mockup realistico, quindi seleziona il livello in questione e porta il cursore sulla prima icona della sidebar di sinistra (quella a forma di freccia).
Successivamente fai clic sulla voce Trasforma, in modo da attivare le opzioni di trasformazione nella parte superiore dello schermo o nella sidebar. Facendo clic sulla quarta icona da sinistra (un rettangolo deformato), attiverai i comandi per modificare la prospettiva dell'oggetto e non dovrai fare altro che agire sulle maniglie attorno ad esso. Il procedimento manuale può risultare molto complicato, ma con un po' di pazienza dovresti riuscire nel tuo intento.
Devi sapere che con Photoshop Online è possibile caricare anche file PSD, proprio come il modello di mockup che abbiamo modificato nel capitolo precedente. In questo caso potrai eseguire gli stessi comandi che ti ho spiegato in precedenza e utilizzare persino le scorciatoie da tastiera di cui abbiamo già parlato.
Come creare un mockup su app Photoshop
Dopo aver imparato come fare e modificare i tuoi mockup online e su Desktop, vorrai sapere come creare un mockup su app Photoshop. Purtroppo devo informarti che, almeno al momento in cui scrivo, l'app Photoshop Express per dispositivi mobili non dispone di molte delle funzionalità indispensabili per creare un mockup.
Potresti ottenere qualche risultato tramite la funzione Combina Foto, che puoi abilitare facendo tap su di essa dalla homepage dell'app. Tuttavia non permette grandi libertà di manovra se non per il fotoritocco e per le correzioni di base, anche se con l'aiuto dell'IA generativa possono essere creati fantastici collage e grafiche 3D.
Discorso diverso, invece, riguarda Photoshop per iPad, che rispecchia quasi tutte le funzioni della versione desktop di Photoshop (e infatti per usarla prevede la sottoscrizione di un abbonamento).
Infine, voglio consigliarti la guida ufficiale di Adobe su come creare un mockup, dove troverai anche un modello di mockup da cui partire per esercitarti.
Autore
Salvatore Aranzulla
Salvatore Aranzulla è il blogger e divulgatore informatico più letto in Italia. Noto per aver scoperto delle vulnerabilità nei siti di Google e Microsoft. Collabora con riviste di informatica e cura la rubrica tecnologica del quotidiano Il Messaggero. È il fondatore di Aranzulla.it, uno dei trenta siti più visitati d'Italia, nel quale risponde con semplicità a migliaia di dubbi di tipo informatico. Ha pubblicato per Mondadori e Mondadori Informatica.
