Hvordan ta et nettstedsskjermbilde med spesifikke dimensjoner ved hjelp av Google Chrome

Hvis du er et byrå eller et selskap med en portefølje av nettsteder eller sider du ønsker å dele på nettet, har du sannsynligvis gått gjennom smerten ved å prøve å ta ensartede skjermbilder av hvert nettsted.

En av kundene vi jobber med bygger vertsbaserte intranettløsninger som kan hostes internt innenfor et selskaps rammer. Intranett er utrolig nyttige for bedrifter å kommunisere bedriftsnyheter, distribuere markedsføringsinformasjon, gi fordelsinformasjon, etc.

Vi hjalp denne kunden med å migrere intranettløsningsproduktet fra morselskapets nettsted. Det var et omfattende prosjekt som inkorporerte alt fra å bygge nye sosiale profiler, oppdatere Marketo og deretter demontere noe av den tilpassede utviklingen de hadde gjort for å kombinere nettstedene deres.

Et viktig skritt var å sikre at vi hadde flotte produktbilder av kundenes intranettsider fremtredende på deres nye nettside. Vi ønsket å sikre at hvert skjermbilde konsekvent hadde samme bredde og høyde på hele nettstedet. Dette kan være vanskelig ... med mindre du bruker Google Chrome.

Klientskjermbilder med Google Chrome

Du er kanskje ikke klar over dette, men du kan ta perfekte skjermbilder med Google Chromes innebygde sett med robuste utviklerverktøy. Interessant nok, til tross for sin fantastiske fleksibilitet, er det ikke en veldig kjent funksjon. Funksjonen lar deg også ta bilder av det responsive nettstedet ditt for spesifikke dimensjoner og skjermstørrelser.

Her er en rask videoopplæring om hvordan du tar et perfekt, spesifikt skjermbilde av en nettside ved hjelp av Google Chrome:

Fremgangsmåte for å ta et skjermbilde med Google Chrome

Google Chromes utviklerverktøy kan forhåndsvise et nettsted ved å bruke enhetens verktøylinje. Verktøyet ble bygget slik at utviklere kunne se hvordan nettstedet så ut i forskjellige viewport-størrelser på tvers av forskjellige enheter ... men det er også en perfekt måte å få et perfekt størrelse skjermbilde av en nettside.

I dette tilfellet ønsker vi at hver av kundens nøkkelkunder på tvers av bransjer som har bygget vakre intranettsider skal ta et skjermbilde slik at vi kan vise dem alle i en portefølje på nettsiden deres. Vi vil at sidene skal være nøyaktig 1200px brede og 800px høye. For å oppnå dette:

1. Velg navigeringsknappen helt til høyre (3 vertikale prikker) Tilpass og kontroll-menyen.

2. Plukke ut Flere verktøy> Utviklerverktøy

3. Bytt Enhetsverktøylinje for å få frem enhetsalternativene og dimensjonene.

4. Sett det første alternativet til Responsive, sett deretter dimensjonene til 1200 x 800 og trykk enter. Siden vises nå med disse dimensjonene.

4. På høyre side av enhetsverktøylinjen klikker du på navigeringsknappen (3 vertikale prikker) og velger Skjermbilde for fangst.

4. Google Chrome tar et perfekt skjermbilde og slipper det i ditt Nedlastinger mappe hvor du kan legge ved og sende den i en e-post. Pass på at du ikke velger skjermbilder i full størrelse siden det vil ta hele sidelengden og ignorere høydegrensen din.

Google Chrome hurtigtaster for skjermbilder

Hvis du er en hurtigtastmester, kan du ta et helsides skjermbilde med disse snarveiene. Jeg liker ikke denne tilnærmingen, siden jeg ikke kan angi maksimal høyde på visningsporten ... men det kommer godt med hvis du noen gang trenger en hel sides skjermdump.

1. Alt + Command + I 
2. Command + Shift + P

1. Ctrl + Shift + I 
2. Ctrl + Shift + P