Schermata del sito Web di alta qualità?

16

Ho creato un sito Web che vorrei aggiungere al mio portafoglio, ma non riesco a ottenere schermate di alta qualità dell'intero sito. Ho provato a salvare il sito Web come PDF, ma era pieno di errori, altri servizi online non possono ricreare le immagini e così via. Ho anche appena provato a fare screenshot regolari sul Mac per mettere tutto insieme, ma ha perso davvero molta qualità quando l'ho ridimensionato.

Qualche buona idea? :)

website-design screenshot

— user22524
fonte

Puoi fornire un esempio di ciò che sta accadendo e forse una demo di ciò che stai cercando di ottenere?

— cclark413,

Quando dici "portfolio", intendi uno fisico (stampato su carta) o una raccolta di immagini (JPG, PNG) che puoi distribuire su supporti digitali o online?

— Daze,

Sono molto interessato al motivo per cui gli screenshot di Mac che l'OP ha provato non sono migliori delle soluzioni seguenti. Non sono a conoscenza di screenshot di Hi Def, quindi se qualcuno può spiegarmelo, per favore. Inoltre, sono anche interessato al problema del ridimensionamento. Di solito è il contrario. Certo, quando ridimensionate qualcosa - c'è meno spazio per i pixel per rappresentare l'immagine, ma una perdita di "qualità"? Forse la percentuale di zoom la fa apparire in questo modo? Prova al 100%

— cclark413,

1

La risoluzione dello schermo 1920x1080 (1080p) fornisce un'immagine per la stampa adatta per 6,4 x 3,6 pollici

— horatio

16

In Firefox, puoi aprire Shift+F2e utilizzare la console screenshot --fullpage.

Per ridimensionarlo a dimensioni e dimensioni diverse preservando la qualità del testo, utilizzare Ctrl+Shift+M(o Cmd+Opt+Msu OS X) per accedere al visualizzatore di design reattivo e ridimensionare in base alle esigenze (è anche possibile utilizzarlo per ottenere schermate a una risoluzione più elevata di quella supportata dal monitor o ottenere immagini di visualizzazioni tablet / dispositivo mobile). Nessun plug-in necessario.

Grande esempio

Piccolo esempio

— Slade
fonte

7

Se vuoi fare uno screenshot di una pagina intera su un sito web, puoi utilizzare questo plug-in di Google Chrome .

Questo renderà diversi screenshot (durante lo scorrimento) e li combinerà in un'immagine .png.

Devi solo fare clic sul plug-in e scegliere "Cattura intera pagina".

inserisci qui la descrizione dell'immagine

— Stéphane
fonte

Personalmente uso questo , rende abbastanza facile salvare i file.

— Yisela,

Le schermate dovrebbero essere utilizzate nel portfolio sul mio sito Web. Ho provato sia Impressionante Schermata che Schermata Pagina Web, ma non funzionano sulla pagina che sto cercando di acquisire. L'effetto di parallasse rovina lo screenshot e gli elementi che appaiono per primi quando l'utente lo scorre verso il basso, non appare sullo screenshot. Ho esaminato alcune soluzioni che potrebbero convertire i CSS in vettori, il che sarebbe perfetto, ma sembrano rovinare la struttura della pagina e non sono in grado di gestire le immagini.

— McKeene,

1

parralax è un'animazione che non può essere catturata in un'immagine fissa. Prova a disabilitare le immagini di sfondo e poi crea un'immagine composita usando screencaps e i file di origine.

— horatio,

1

Lo uso anche io. È fantastico. Tuttavia, non funziona su file locali. Devi prima ospitare la pagina html. C'è anche una schermata di stampa goog ol. Se vuoi uno strumento di cattura dello schermo rapido per catturare il movimento / la parallasse, prova Screencast-o-matic . È basato sul web e l'output video è di buona qualità.

— Giovanni,

1

Consiglio Faststone Capture , che puoi usare anche al di fuori del browser per qualsiasi altra cosa. Sfortunatamente, come menzionato da @McKeene, ha problemi ad attaccare le singole immagini a una grande a causa dell'effetto di scorrimento.

La versione 5.3 è gratuita (download tedesco) per gli utenti domestici. Altrimenti l'ultima versione è di circa $ 20.

Schermata di FastStone Capture

— Thomas Weller
fonte

1

Gli utenti di Firefox aggiungono semplicemente un plug-in chiamato "Screenshot fantastico". Per scaricare questo componente aggiuntivo visitare il seguente link https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Gli utenti di Chrome possono visitare https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=it

questo componente aggiuntivo consente agli utenti di acquisire screenshot della parte VISIBILE e PAGINA COMPLETA, è possibile ritagliare, inserire forme ecc. senza passare a un altro programma.

— user22557
fonte

1

Di recente ho iniziato a utilizzare Pagelayers per Mac e ne sono abbastanza soddisfatto.

Alcune cose che amo:

Psd può essere generato a larghezza personalizzata e altezza infinita.
Gli psd generati sono suddivisi in gruppi e livelli.
Può salvare direttamente in PNG

Alcune cose che mi danno fastidio:

Richiede che la pagina sia caricata sull'app. Nessuna estensione cromata. Questo può essere abbastanza noioso, specialmente quando vuoi solo uno screenshot semplice. (La mia più grande lamentela con esso)
Il file psd generato può essere piuttosto grande.

Cose che potrebbero non piacerti:

Prezzo: £ 20

Ho un caso d'uso diverso per questo, quindi posso giustificare il prezzo, tuttavia potresti non farlo se hai solo bisogno di schermate semplici.

Spero che sia di aiuto.

— trylife
fonte

1

Nel caso in cui qualcuno si preoccupi di leggere tutte le risposte e non fosse soddisfatto di quelle sopra, che sono anche eccellenti, c'è un altro plug-in di screenshot per Firefox: "Screengrab!" . Non so quale risoluzione puoi ottenere, ma l'intera pagina corrente sarà sullo screenshot, non solo la parte visibile. Inoltre, puoi andare a prendere una selezione specificata o solo la parte attualmente visibile dello schermo, che salva in formato png.

— Jaromír il Greenhorn
fonte

La risoluzione che ottieni dipende dalla configurazione del display del monitor che stai utilizzando.

— Rafael,