Как да направите снимка на екрана на уебсайт с конкретни размери с помощта на Google Chrome

Ако сте агенция или компания с портфолио от сайтове или страници, които искате да споделите онлайн, вероятно сте преминали през мъката да се опитвате да заснемете еднакви екранни снимки на всеки сайт.

Един от клиентите, с които работим, изгражда хоствани интранет решения, които могат да бъдат вътрешно хоствани в границите на компания. Интранетът е невероятно полезен за компаниите да съобщават фирмени новини, да разпространяват маркетингова информация, да предоставят информация за предимства и т.н.

Помогнахме на този клиент да мигрира своя продукт за решение за интранет от уебсайта на компанията-майка. Това беше обширен проект, който включваше всичко - от изграждане на нови социални профили, актуализиране на Marketo и след това разглобяване на някои от персонализираните разработки, които бяха направили, за да комбинират своите сайтове.

Една критична стъпка беше да гарантираме, че разполагаме със страхотни продуктови снимки на интранет сайтовете на техните клиенти, изпъкнали на новия им уебсайт. Искахме да гарантираме, че всяка екранна снимка е с еднаква ширина и височина в целия сайт. Това може да е трудно... освен ако не използвате Google Chrome.

Снимки на клиент с Google Chrome

Може да не осъзнавате това, но можете да правите перфектни екранни снимки с вградения в Google Chrome набор от надеждни инструменти за разработчици. Интересното е, че въпреки невероятната си гъвкавост, това не е много добре позната функция. Функцията също така ви позволява да правите снимки на вашия адаптивен сайт за конкретни размери и размери на екрана.

Ето бърз видео урок за това как да направите перфектна екранна снимка на уеб страница с определен размер с помощта на Google Chrome:

Стъпки за заснемане на екран с Google Chrome

Инструментите за разработчици на Google Chrome могат да визуализират сайт чрез лентата с инструменти на устройството. Инструментът е създаден така, че разработчиците да могат да видят как изглежда сайтът в различни размери на прозореца за изглед на различни устройства… но също така се оказва перфектен начин да получите екранна снимка на уеб страница с перфектен размер.

В този случай искаме всеки от ключовите клиенти на клиента в различни индустрии, които са изградили красиви интранет сайтове, да направи екранна снимка, за да можем да ги покажем всички в портфолио на техния уебсайт. Искаме страниците да са точно 1200px широки на 800px високи. За да постигнете това:

1. В крайния десен бутон за навигация (3 вертикални точки) изберете Меню за персонализиране и управление.

2. Изберете Още инструменти> Инструменти за програмисти

3. Превключете Лента с инструменти на устройството за извеждане на опциите и размерите на устройството.

4. Задайте първата опция на Отзивчив, след това задайте размерите на 1200 x 800 и натиснете enter. Страницата ще се покаже с тези размери.

4. От дясната страна на лентата с инструменти на устройството щракнете върху бутона за навигация (3 вертикални точки) и изберете Заснемане на екранна снимка.

4. Google Chrome ще направи перфектна екранна снимка и ще я пусне във вашата Downloads папка, където можете да прикачите и да го изпратите в имейл. Уверете се, че не избирате екранни снимки в пълен размер, тъй като това ще заеме цялата дължина на страницата и ще пренебрегне ограничението ви за височина.

Клавишни комбинации на Google Chrome за екранни снимки

Ако сте майстор на клавишните комбинации, можете да направите екранна снимка на цяла страница с тези клавишни комбинации. Не харесвам този подход, тъй като не мога да задам максималната височина на прозореца за изглед… но е полезен, ако някога имате нужда от екранна снимка на цяла страница.

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

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