Hai mai sentito parlare di mockup? Comunemente il mockup è inteso come la rappresentazione di un progetto o la realizzazione di un oggetto, in scala più piccola. Nel web design prima di partire con il design di un sito web, noi web designer realizziamo un mockup del sito: serve per fare chiarezza con le idee e per dare una prima visione di quella che sarà la struttura del sito web. Ma non è di questo tipo di mockup che voglio parlarti oggi…
Quelli che vedi qui sopra sono tutti esempi di mockup. L’iPhone, il MacBook e tutti i vari elementi che compongono l’immagine coordinata rimangono invariati: una volta aperto il file psd, si andrà a sostituire solo lo schermo dell’ iPhone e del Mac e a personalizzare tutti i vari elementi dell’immagine coordinata.
Tutto ciò permette di risparmiare una quantità di tempo incredibile e di ottenere un risultato ottimo. Spesso per le immagini dei miei post ricorro all’utilizzo di un mockup: è successo ieri, con il post Diventare web designer da autodidatta è possibile?. L’area che sono andata a modificare è quella relativa alla rivista, allo schermo dell’ipad e al foglio alla sua destra.
Come fare un mockup con Photoshop
Prendiamo ad esempio che voglia modificare questo mockup:
Apro il file in Photoshop e gli elementi che andrò a modificare sono i seguenti:
- lo schermo del macbook;
- la firma presente sull’agenda.
Basta fare doppio click sul livello che vogliamo modificare (per esempio lo schermo) per aprirlo in una nuova finestra. Qui andiamo ad inserire la nostra immagine e poi salviamo: automaticamente il file del mockup si modificherà, mostrandoci lo schermo contenente la nostra immagine. Ripetiamo il procedimento anche per la firma, esportiamo il file per il web e il gioco è fatto!
Qui trovi una bacheca Pinterest con i miei mockup preferiti, quelli che credo ben si adattino ad un blog: se ti va segui la bacheca, per rimanere aggiornato. Alla prossima!
Mockup: esempi
Ti mostro ora qualche esempio di mockup. Sono davvero uno strumento super versatile e flessibile, quindi preparati perché ce n’è per tutte le esigenze!
Mockup branding
Mockup immagine coordinata
Logo Mockup
Device Mockup
Mockup biglietti da visita
mockup instagram post online
Mockup gratuiti
Qui trovi una lista aggiornata dei siti che propongono mockup gratis:
- https://www.mockupworld.co/
- https://mockups-design.com
- https://www.pixeden.com/psd-mock-up-templates
- https://smartmockups.com/it
- https://mockuptree.com
- https://graphicburger.com/mock-ups/
Mockup a pagamento
Ecco invece una lista di siti che vendono mockup:
Risorsa assolutamente geniale. Su Behance si vedono dei progetti di una bellezza rara proprio grazie a questi mockup!
Ottimo post come sempre..
Mi permetto di consigliarti questo portale: Pixeden (http://bit.ly/1jTXDFf) molto creativo e “molto” gratuito;)
Come al solito, articolo molto interessante.
Aggiungo un piccolo particolare dato che tu non l’hai messo (non offenderti) :). Un sito per mockup gratuito http://graphicburger.com/ , grazie a chi lo scoperto? ovviamente alla mitica Carlotta ahahah.
Diamo pure una dimostrazione del fatto che è semplice fare questi mockup, grazie alla tua spiegazione. Dato che mi reputo un totale sconosciuto di Photoshop ahahah
come al solito, articolo semplice e utile.
Mi permetto di aggiungere questo link http://graphicburger.com/ (sito con mockup gratis).
Grazie alle tua semplice spiegazione sono riuscito a farne uno data la mia poca esperienza con photoshop.
Grazie cara Laura
Brus