Come acquisire uno screenshot del sito Web con dimensioni specifiche utilizzando Google Chrome
Se sei un'agenzia o un'azienda con un portafoglio di siti o pagine che desideri condividere online, probabilmente hai affrontato il problema di provare a catturare schermate uniformi di ciascun sito.
Uno dei clienti con cui lavoriamo crea soluzioni Intranet ospitate che possono essere ospitate internamente all'interno dei confini di un'azienda. Le intranet sono incredibilmente utili per le aziende per comunicare notizie aziendali, distribuire informazioni di marketing, fornire informazioni sui vantaggi, ecc.
Abbiamo aiutato questo cliente a migrare il prodotto della sua soluzione Intranet dal sito Web della società madre. È stato un progetto ampio che ha incorporato tutto, dalla creazione di nuovi profili social, all'aggiornamento di Marketo e allo smontaggio di parte dello sviluppo personalizzato che avevano fatto per unire i loro siti.
Un passaggio fondamentale è stato garantire che avessimo ottime riprese dei prodotti dei siti intranet dei loro clienti in primo piano sul loro nuovo sito web. Volevamo assicurarci che ogni screenshot avesse sempre la stessa larghezza e altezza in tutto il sito. Questo può essere difficile... a meno che tu non stia usando Google Chrome.
Screenshot dei client con Google Chrome
Potresti non rendertene conto, ma puoi acquisire screenshot perfetti con il set integrato di robusti strumenti per sviluppatori di Google Chrome. È interessante notare che, nonostante la sua incredibile flessibilità, non è una caratteristica molto conosciuta. La funzione ti consente anche di scattare foto del tuo sito reattivo per dimensioni e dimensioni dello schermo specifiche.
Ecco un breve tutorial video su come acquisire uno screenshot perfetto, di dimensioni specifiche, di una pagina Web utilizzando Google Chrome:
Passaggi per fare uno screenshot con Google Chrome
Gli strumenti per sviluppatori di Google Chrome possono visualizzare in anteprima un sito utilizzando la barra degli strumenti del dispositivo. Lo strumento è stato creato in modo che gli sviluppatori potessero vedere come appariva il sito in diverse dimensioni di viewport su diversi dispositivi... ma sembra anche essere un modo perfetto per ottenere uno screenshot di dimensioni perfette di una pagina web.
In questo caso, vogliamo che ciascuno dei clienti chiave del cliente in tutti i settori che hanno creato bellissimi siti Intranet faccia uno screenshot in modo da poterli visualizzare tutti all'interno di un portfolio sul loro sito web. Vogliamo che le pagine siano esattamente larghe 1200px e alte 800px. Per realizzare questo:
- Nel pulsante di navigazione all'estrema destra (3 punti verticali), seleziona il file Personalizza e controlla il menu.
- Seleziona Altri strumenti> Strumenti per sviluppatori
- Attiva / disattiva il Barra degli strumenti del dispositivo per visualizzare le opzioni e le dimensioni del dispositivo.
- Imposta la prima opzione su Responsive, quindi imposta le dimensioni su 1200 x 800 e premi invio. La pagina verrà ora visualizzata con quelle dimensioni.
- Sul lato destro della barra degli strumenti del dispositivo, fare clic sul pulsante di navigazione (3 punti verticali) e selezionare Catturare Screenshot.
- Google Chrome acquisirà uno screenshot perfetto e lo rilascerà nel tuo file Scarica cartella in cui è possibile allegare e inviare in un'e-mail. Assicurati di non selezionare schermate a grandezza naturale poiché occuperanno l'intera lunghezza della pagina e ignoreranno il limite di altezza.
Scorciatoie da tastiera di Google Chrome per screenshot
Se sei un maestro delle scorciatoie da tastiera, puoi fare uno screenshot a pagina intera con queste scorciatoie. Non mi piace questo approccio in quanto non posso impostare l'altezza massima del viewport... ma è utile se hai bisogno di uno screenshot di un'intera pagina.
Scorciatoie da tastiera (Mac)
1. Alt + Command + I
2. Command + Shift + P
Scorciatoie da tastiera (Win / Linux)
1. Ctrl + Shift + I
2. Ctrl + Shift + P