Visualizzare le tue immagini in mockup di dispositivi come iPhone, iPad o Mac è un modo visivamente accattivante per mostrare le tue foto personali o i temi del tuo sito web. Mentre creare mockup per dispositivi mobili può essere semplice con strumenti come Snagit o Photoshop, queste sono opzioni premium che richiedono l'installazione sul tuo PC o Mac. Ma cosa succederebbe se potessi creare mockup online e gratuitamente? Di seguito sono riportati cinque strumenti gratuiti per la generazione di mockup che ti consentono di progettare mockup di dispositivi utilizzando solo un URL o un'immagine. Sebbene piattaforme come Canva siano anch'esse un'opzione, possono richiedere molto tempo e potrebbero richiedere un abbonamento premium per alcune funzionalità.

Generazione di mockup

Gli scopi per cui si utilizzano gli strumenti di mockup sono diversi:

  • Molti strumenti di mockup offrono la visualizzazione di una pagina web su più dispositivi contemporaneamente. Questo può essere molto utile per testare la reattività della pagina web per assicurarsi che tutti gli elementi funzionino correttamente su tutti i dispositivi.
  • Puoi scaricare l'immagine del mockup e utilizzarla per i tuoi scopi di progettazione.
  • Infine, puoi usare questi strumenti per scopi di divertimento e condivisione. Ad esempio, puoi scattare una tua foto all'interno di una cornice per iPhone e pubblicarla sul tuo profilo Facebook.

1. Modello magico

Questo è il nostro strumento preferito per generare il mockup su modelli predefiniti.

Vai al sito di magic mockup e scegli il template dal filtro. Ci sono sufficienti template disponibili per le categorie iPhone, iPad, Mac, Laptop e Altre. Puoi caricare un'immagine o fornire un URL per catturare il tuo mockup sul template dato. L'immagine caricata o lo screenshot dell'URL dato verranno automaticamente adattati ai dispositivi sul template. Cambia semplicemente i template per vedere quale ti piace. È anche possibile caricare immagini diverse per dispositivi diversi su un singolo template.

Clicca sul pulsante di download e seleziona la dimensione dell'immagine per generare il mockup. I mockup possono essere scaricati gratuitamente, ma considera di fare una donazione all'autore se intendi utilizzarli per scopi commerciali.

2. Telefono modello

Mockupphone.com  ti consente di generare mockup per dispositivi mobili. Per prima cosa, scegli il dispositivo e carica la tua immagine per generare il mockup. Puoi scaricare il mockup gratuitamente cliccando con il tasto destro e salvandolo sul disco locale. Oppure iscriviti alla loro newsletter e scarica l'immagine.

3. Am I Responsive

Questo è uno strumento per controllare la reattività di un sito web e fare uno screenshot su più dispositivi in ​​un singolo frame. Vai al sito  e inserisci l'URL per catturare lo screenshot. Dovresti avere uno strumento di cattura dello schermo separato per fare lo screenshot corretto.

4. Generatore di mockup di siti Web multi-dispositivo

Questo generatore di mockup è simile al precedente con opzioni per scegliere il colore di sfondo e i dispositivi. Solo i dispositivi Apple come iMac, MacBook, iPad e iPhone sono offerti per il mockup e puoi abilitare o disabilitare i singoli dispositivi.

Di nuovo, dovresti avere uno strumento di cattura dello schermo appropriato per fare lo screenshot dal browser. Entrambi gli strumenti Am I Responsive e Multi Device Mockup Generator sono pensati per testare la reattività del tuo sito online su diversi dispositivi. Entrambi gli strumenti non offrono un pulsante di download e puoi scorrere la pagina web su singoli dispositivi in ​​modo vivace sullo schermo.

5. Mockuper

Mockuper è un altro strumento gratuito che ti consente di convertire le tue foto esistenti in mockup basati sui modelli predefiniti. Sono disponibili oltre 150 modelli con diverse dimensioni di immagine. Puoi scegliere il modello e caricare l'immagine per vedere l'anteprima in tempo reale.

Quando il mockup ti piace, clicca semplicemente sul pulsante di download, scegli la dimensione e salva l'immagine del mockup sul tuo disco locale.