Generatore di Mockup per Dispositivi

Generatore di Mockup per Dispositivi

Il Generatore di Mockup per Dispositivi inserisce uno screenshot in una cornice reale: un iPhone con Dynamic Island, un telefono Android, un iPad, un MacBook Pro, una finestra del browser con scheda e barra degli indirizzi, o un monitor da scrivania su un piedistallo. Ogni cornice è disegnata con le proporzioni vere dello schermo di quel dispositivo, così ciò che esporti è ciò che lo screenshot apparirebbe davvero sull'hardware. La cornice è dipinta su un canvas nella scheda del tuo browser, il che significa che uno screenshot di un'app non ancora rilasciata o di una dashboard interna non lascia mai il tuo computer.

Le tre cornici che si usano di più

Una cornice è una scorciatoia per il lettore: gli dice a colpo d'occhio se sta guardando un'app per telefono, una pagina web o uno strumento desktop, prima ancora di aver letto una sola parola nello screenshot.

Il misuratore di ritaglio: quello che la maggior parte degli strumenti di mockup omette

Uno schermo di dispositivo ha una forma fissa. Lo schermo di un iPhone è 1179 per 2556, circa 9:19.5, e quasi nulla di ciò che catturi è esattamente così. La maggior parte dei generatori di mockup scala in silenzio l'immagine finché copre lo schermo e butta via ciò che esce dal bordo, così scopri che il fondo della tabella prezzi è sparito solo dopo averla pubblicata.

Questo strumento invece lo misura. In modalità Riempi schermo il misuratore sotto i pulsanti di adattamento riporta la percentuale esatta dello screenshot che la cornice nasconde, e la barra passa dal verde al rosso man mano che il numero sale. Se è più alto di quanto ti piaccia hai due vie d'uscita:

• Sposta. Il cursore muove la finestra visibile lungo l'asse che sconfina, così puoi tenere l'intestazione, il centro o il piè di pagina invece di accettare un ritaglio centrato.
• Adatta intero. Lo screenshot viene scalato finché ogni suo pixel è dentro lo schermo, e le strisce residue si riempiono con un colore che scegli tu. Nulla viene ritagliato, al prezzo di bande visibili sopra e sotto, o a sinistra e a destra.

Una buona regola: sotto circa l'8% ritagliato è invisibile al lettore, dall'8% al 25% va bene se hai spostato per tenere il soggetto, e oltre il 25% dovresti o rifare lo screenshot con il rapporto del dispositivo o passare ad Adatta intero.

Quale cornice, e a quale risoluzione

Gli screenshot di quelle dimensioni in pixel o più grandi restano nitidi a ogni dimensione di esportazione. Quelli più piccoli vengono ingranditi, e la prima cosa a cedere è l'anti-aliasing sul testo piccolo dentro lo screenshot.

Come usare il Generatore di Mockup per Dispositivi: passo dopo passo

1. Aggiungi il tuo screenshot: trascina un PNG o JPG sul pannello di caricamento, fai clic per sfogliare oppure premi Ctrl+V per incollarne uno direttamente dagli appunti.
2. Scegli una cornice dispositivo: iPhone, Android, iPad, MacBook, Browser o Monitor. Le cornici di telefono e tablet passano anche da verticale a orizzontale.
3. Controlla il misuratore di ritaglio: se è nascosto troppo, trascina il cursore di spostamento o passa ad Adatta intero così non si perde nulla.
4. Stila la cornice: imposta colore della cornice, sfondo, padding, ombra e riflesso. Sulla cornice browser, scrivi titolo della scheda e indirizzo.
5. Esporta: scegli una dimensione di esportazione, poi Scarica PNG per salvare il mockup o Copia immagine per incollarlo in un post.

Consigli pratici

• Quando puoi, fai lo screenshot con il rapporto del dispositivo. Una finestra del browser ridimensionata a 1179 per 2556 prima di catturare fa leggere 0% al misuratore di ritaglio e rende il mockup pixel-perfect.
• Usa la cornice browser quando l'URL conta. Scrivere il tuo dominio nella barra degli indirizzi mette il brand nell'immagine senza aggiungere una didascalia.
• Tieni il padding tra il 6% e il 12%. Di meno e il dispositivo tocca il bordo del post; di più e lo schermo diventa illeggibile in un feed.
• Abbina il colore della cornice allo screenshot. Nero siderale sotto uno screenshot in modalità scura, Argento o Titanio sotto uno chiaro; il chrome del browser segue automaticamente la stessa scelta.
• Riduci il riflesso per gli schermi pieni di testo. Un luccichio sottile si legge come vetro, uno forte si legge come una stock photo e nasconde il copy.
• Esporta trasparente per le slide. Lo sfondo NO ti dà un dispositivo fluttuante con la sua ombra, pronto da posare su qualsiasi deck o hero section.

Privacy

Tutto avviene nella scheda del browser tramite l'API canvas HTML5. Il tuo screenshot viene letto da un URL oggetto locale, disegnato nella cornice e codificato in PNG dal browser stesso. Nessuna immagine viene caricata, memorizzata o trasmessa, e una volta caricata la pagina lo strumento continua a funzionare senza alcuna connessione di rete.

Domande frequenti

Il mio screenshot viene caricato su un server?

No. Le cornici dei dispositivi sono disegnate con l'API canvas HTML5 nella scheda del tuo browser e lo screenshot viene letto da un URL oggetto locale. Non viene inviato nulla da nessuna parte, quindi i mockup di app non ancora rilasciate, dashboard interne o lavori per clienti restano sul tuo computer. Dopo che la pagina è stata caricata lo strumento continua a funzionare anche senza alcuna connessione di rete.

Quali cornici dispositivo sono disponibili?

Sei: un iPhone con Dynamic Island, un telefono Android con fotocamera punch-hole, un iPad Pro, un MacBook Pro con notch e base, una finestra del browser con scheda e barra degli indirizzi, e un monitor da scrivania su un piedistallo. Ogni cornice usa le proporzioni reali dello schermo di quel dispositivo, così un mockup fatto qui corrisponde a come lo screenshot apparirebbe sull'hardware.

Il mio screenshot non ha la stessa forma dello schermo del dispositivo. Cosa succede?

Serve proprio a questo il misuratore di ritaglio. Riempi schermo scala lo screenshot finché copre tutto lo schermo, ritagliando ciò che esce dal bordo, e il misuratore ti dice la percentuale esatta che resta nascosta. Il cursore di spostamento muove poi la finestra visibile lungo l'asse ritagliato così puoi tenere la parte importante. Adatta intero scala lo screenshot finché è tutto dentro lo schermo e riempie le strisce residue con un colore che scegli tu, così non si perde nulla.

Che risoluzione dovrebbe avere il mio screenshot?

Abbinalo al dispositivo che stai incorniciando: 1179 per 2556 per l'iPhone, 1080 per 2400 per il telefono Android, 1668 per 2388 per l'iPad, 3024 per 1964 per il MacBook, 1440 per 900 per la finestra del browser e 2560 per 1440 per il monitor. Qualsiasi cosa di quella dimensione o più grande resta nitida. Gli screenshot più piccoli funzionano comunque, ma vengono ingranditi e intorno al testo si vedono i bordi morbidi.

Posso esportare il dispositivo su uno sfondo trasparente?

Sì. Scegli il campione di sfondo NO e il padding intorno al dispositivo viene esportato come alfa invece che come colore, mentre cornice, schermo e ombra restano disegnati. Scarica PNG conserva quella trasparenza, che è ciò che serve quando il mockup va su una slide, una hero section o una pagina il cui sfondo deve trasparire.

Perché la cornice del browser diventa scura?

Il chrome del browser segue il colore di cornice che scegli. Scegli Nero siderale e la striscia delle schede, la barra degli strumenti e la barra degli indirizzi passano a un tema scuro così il mockup corrisponde a uno screenshot in modalità scura; uno qualsiasi dei colori di cornice più chiari dà il tema chiaro. Titolo della scheda e indirizzo sono campi di testo semplice, così puoi mettere il nome del prodotto e il dominio nell'immagine.

Strumenti di immagine:

• Aggiungi Linea all'Immagine
• Aggiungi Testo all'Immagine
• ⬛ Calcolatore Rapporto di Aspetto Nuovo
• Ritaglia Immagine in Cerchio Nuovo
• Creatore di collage
• Generatore di Unisci i Puntini Popolare
• Visualizzatore e Rimuovi Dati EXIF Nuovo
• Capovolgi GIF
• Capovolgi Immagine
• Creatore di GIF
• Strumento di Pixelatura Immagini
• Compressore di immagini
• Ritagliatore di Immagini
• Miglioratore di Immagini Popolare
• Ridimensionatore di Immagini
• Rotatore di immagini
• Divisore di Immagini Popolare
• Convertitore da Immagine ad Arte ASCII Nuovo
• Tracciatore da Immagine a SVG Nuovo
• Generatore di Immagini Placeholder Lorem Picsum Nuovo
• OCR / Immagine in Testo Nuovo
• Calcolatore Dimensioni di Stampa e Risoluzione (DPI/PPI) Popolare
• Generatore di Immagini con Angoli Arrotondati Nuovo
• Abbellitore di Screenshot Nuovo
• Generatore di Mockup per Dispositivi Nuovo
• Aggiungi Ombra all'Immagine Nuovo
• Aggiungi Bordo all'Immagine Nuovo