Mockup su dispositivo
Device Mockup
Mette una schermata dentro la cornice di un telefono, di un tablet, di un portatile o di un browser, con sfondo e ombra.
Mette una schermata dentro una cornice di telefono, tablet, portatile o browser ed esporta un PNG fino a tre volte la dimensione. Le cornici sono disegnate su un canvas a partire da rettangoli arrotondati invece di essere fotografie di un prodotto, quindi qui non c’è alcun marchio e l’uscita resta nitida a qualunque scala. La schermata non esce mai dalla scheda.
Trascina qui una schermata
PNG, JPEG o WebP. Tutto avviene in questa scheda.
Anteprima
Le cornici sono forme, non fotografie
Telefono, tablet, portatile e finestra del browser sono disegnati sul canvas con pochi rettangoli dagli angoli arrotondati. Non sono fotografie di nessun prodotto e non portano alcun marchio, quindi puoi usarli ovunque, e restano nitidi a qualsiasi scala di esportazione. Le proporzioni dello schermo sono quelle dei dispositivi di oggi — 19,5:9 per un telefono, 4:3 per un tablet, 16:10 per un portatile — perciò quando una schermata ha una proporzione diversa «Riempi» ritaglia il centro e «Mostra tutto» lascia i margini. La cattura di una pagina lunga quasi sempre vuole «Allinea in alto».
Riduci il PNG esportato con la compressione PNG, e componi una card da condividere con il generatore di immagini per la condivisione.
Come si usa
Trascinare la schermata
PNG, JPEG o WebP. La riga di statistiche sotto mostra la proporzione dell’immagine contro la proporzione dello schermo della cornice, ed è il numero che decide come va la scelta successiva.
Scegliere la cornice, poi come l’immagine ci si adatta
«Riempi» ritaglia il centro per coprire lo schermo, «contieni» mostra tutta l’immagine con le bande, e l’allineamento in alto è quello per la cattura di una pagina lunga: tiene la parte alta della pagina e lascia scorrere via il resto in basso, che è di norma ciò che una schermata di una pagina scorrevole vuole mostrare.
Impostare il margine e lo sfondo
È il margine a far sembrare lo scatto composto anziché ritagliato. Lo sfondo trasparente è la scelta giusta quando l’immagine andrà su una diapositiva colorata o su una pagina il cui sfondo non si controlla.
Esportare a 2× salvo ragioni contrarie
La riga sotto l’anteprima dà la dimensione esatta dell’uscita per la scala scelta. 2× è giusto per uno schermo retina o per un README; 3× è per la stampa o per una diapositiva grande, e il file diventa pesante.
Domande frequenti
È un iPhone? Un MacBook?
No. Sono forme generiche con le proporzioni che usano i dispositivi moderni: 19,5:9 per un telefono, 4:3 per un tablet, 16:10 per un portatile. Non c’è alcun logo, nessuna fotografia di prodotto e nessun profilo registrato come marchio, ed è deliberato: un mockup con dentro un dispositivo reale di norma non si può usare in una comunicazione promozionale senza autorizzazione.
La mia schermata è ritagliata in un modo che non volevo.
La riga di statistiche mostra la proporzione dell’immagine e quella della cornice. Quando differiscono, «riempi» deve ritagliare qualcosa. Si passa a «contieni» per vedere tutta l’immagine con le bande, oppure all’allineamento in alto se la parte importante sta in cima, oppure si rifà la schermata alla proporzione della cornice.
Posso mettere più schermi affiancati?
Non qui: un’immagine, una cornice. Comporre una scena con tre dispositivi è lavoro di impaginazione, e farlo male è peggio che non farlo. Conviene esportarli uno per uno su sfondo trasparente e disporli in ciò che si sta già usando per la diapositiva.
La mia schermata viene caricata da qualche parte?
No. Viene decodificata in un ImageBitmap e disegnata su un canvas in questa scheda, e il PNG è prodotto dal canvas stesso. Non passa niente in rete, che è il punto quando si tratta della schermata di un prodotto non ancora annunciato.
Può ricevere da
Immagine segnaposto
Placeholder Image
Genera un segnaposto a tinta unita o sfumato di qualsiasi dimensione, con le misure scritte sopra.
Annotare una schermata
Screenshot Annotator
Disegna frecce, riquadri, numeri di passo e macchie di sfocatura su una schermata ed esporta un’immagine unica.
Bordo e margine
Border & Padding
Aggiunge attorno all’immagine un bordo a tinta unita, sfumato o arrotondato e un margine, oppure la riempie fino a una proporzione data.
Immagine di un frammento di codice
Code Screenshot
Disegna un frammento di codice come immagine, con evidenziazione della sintassi, cornice di finestra e tema a scelta.
Dopo
Questi accettano ciò che produce questo strumento, così il risultato può passare direttamente.
Bordo e margine
Border & Padding
Aggiunge attorno all’immagine un bordo a tinta unita, sfumato o arrotondato e un margine, oppure la riempie fino a una proporzione data.
Generatore di immagini per la condivisione
Social Card Generator
Compone un’immagine di condivisione 1200 × 630 da titolo, sottotitolo, riga di marchio e logo facoltativo su un modello a scelta, e scrive i meta tag che le vanno accanto.
Comprimere PNG
PNG Compressor
Riduce la tavolozza e riscrive il flusso deflate per far dimagrire un PNG senza cambiarne le dimensioni in pixel.
Annotare una schermata
Screenshot Annotator
Disegna frecce, riquadri, numeri di passo e macchie di sfocatura su una schermata ed esporta un’immagine unica.
Selettore di colore
Colour Picker
Sceglie un colore su un campo OKLCH, con il contagocce sullo schermo o da un’immagine caricata, e lo copia nella notazione che vuoi.
Calcolatrice delle proporzioni
Aspect Ratio Calculator
Ricava il lato mancante per una proporzione data ed elenca i formati standard che le corrispondono.