Скриншот сайта самого высокого качества?

16

Я создал веб-сайт, который хотел бы добавить в свое портфолио, но мне трудно получить высококачественные скриншоты всего сайта. Я пытался сохранить сайт в формате PDF, но он был полон ошибок, другие онлайн-сервисы не могут воссоздать изображения и так далее. Я также только что попытался сделать обычные скриншоты на Mac, чтобы собрать все это вместе, но это действительно потеряло много качества, когда я уменьшил его.

Есть хорошие идеи? :)

website-design screenshot

— user22524
источник

Можете ли вы привести пример того, что происходит, и, возможно, демонстрацию того, чего вы пытаетесь достичь?

— cclark413

Когда вы говорите «портфолио», вы имеете в виду физическое (напечатанное на бумаге) или коллекцию фотографий (JPG, PNG), которую вы можете распространять на цифровых носителях или в Интернете?

— Daze

Мне очень интересно, почему скриншоты Mac, которые пробовал OP, не лучше, чем приведенные ниже решения. Я не знаю ни одного скриншота Hi Def, так что, если кто-нибудь может объяснить это мне. Кроме того, меня также интересует проблема масштабирования. Обычно это наоборот. Конечно, когда вы уменьшаете что-то - там меньше места для пикселей, чтобы представить изображение, но потеря «качества»? Может быть, ваш процент увеличения показывает, что это так? Попробуйте 100%

— cclark413

1

Разрешение экрана 1920x1080 (1080p) дает изображение для печати , которое подходит для

— размера

16

В Firefox вы можете открыть консоль с помощью Shift+F2и использовать screenshot --fullpage.

Чтобы масштабировать его до разных размеров и размеров, сохраняя при этом качество текста, используйте Ctrl+Shift+M(или Cmd+Opt+Mв OS X) для входа в отзывчивое средство просмотра дизайна и при необходимости измените его размер (вы также можете использовать это для получения снимков экрана с более высоким разрешением, чем поддерживает ваш монитор, или для получения изображений планшетов / мобильных просмотров). Никаких плагинов не требуется.

Большой пример

Маленький пример

— прогалина
источник

7

Если вы хотите сделать полный снимок страницы на веб-сайте, вы можете использовать этот плагин Google Chrome .

Это сделает несколько скриншотов (при прокрутке) и объединит их в одно изображение .png.

Вам просто нужно нажать на плагин и выбрать «Захватить всю страницу».

введите описание изображения здесь

— Stéphane
источник

Я лично использую этот , он позволяет довольно легко сохранять файлы.

— Yisela

Скриншоты должны быть использованы в портфолио на моем собственном сайте. Я пробовал и Awesome Screenshot, и Webpage Screenshot, но они не работают на странице, которую я пытаюсь захватить. Эффект параллакса разрушает скриншот, а элементы, которые появляются в первый раз, когда пользователь прокручивает его вниз, на скриншоте не отображаются. Я рассмотрел несколько решений, которые могли бы преобразовать CSS в вектор, что было бы идеально, но они, кажется, разрушают структуру страницы и не могут обрабатывать изображения.

— Маккин

1

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

— Горацио

1

Я тоже этим пользуюсь. Это превосходно. Это не работает на локальных файлах, хотя. Вы должны сначала разместить html-страницу. Также есть экран печати goog ol '. Если вам нужен инструмент для быстрого захвата экрана для захвата движения / параллакса, попробуйте Screencast-o-matic . Это веб-интерфейс, и видео выход довольно хорошего качества.

— Джон

1

Я рекомендую Faststone Capture , которую вы также можете использовать вне браузера для всего остального. К сожалению, как упомянул @McKeene, из-за эффекта прокрутки возникают проблемы при склеивании отдельных изображений в одно большое.

Версия 5.3 бесплатна (загрузка на немецком языке) для домашних пользователей. В противном случае последняя версия стоит около 20 долларов.

Скриншот FastStone Capture

— Томас Веллер
источник

1

Пользователи Firefox просто добавляют плагин под названием «Awesome Screenshot». Чтобы загрузить это дополнение, перейдите по ссылке https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Пользователи Chrome могут перейти на https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=en

Это дополнение позволяет пользователям делать снимки экрана с видимой частью, а также с полной страницей, вы можете обрезать, вставлять фигуры и т. д., не переключаясь на другую программу.

— user22557
источник

1

Недавно я начал использовать Pagelayers для Mac, и я очень доволен этим.

Некоторые вещи, которые я люблю:

Psd могут быть созданы на произвольной ширине и бесконечной высоте.
Сгенерированные psd разбиты на группы и слои.
Можно сохранить в PNG напрямую

Некоторые вещи, которые меня беспокоят:

Требуется, чтобы страница была загружена в приложение. Нет расширения хрома. Это может быть довольно утомительно, особенно если вам нужен простой скриншот. (Моя самая большая жалоба на это)
Сгенерированный файл psd может быть довольно большим.

Вещи, которые вам могут не понравиться:

Цена: £ 20

У меня есть другой вариант использования для этого, поэтому я могу обосновать цену, однако вы не можете, если вам просто нужны простые скриншоты.

Надеюсь это поможет.

— trylife
источник

1

На тот случай, если кто-то захочет прочитать все ответы и не будет удовлетворен вышеперечисленными, что тоже отлично, есть еще один плагин для скриншотов для Firefox: «Screengrab!» , Я не знаю, какое разрешение вы можете получить, но на скриншоте будет показана вся текущая страница, а не только видимая часть. Кроме того, вы можете пойти и захватить указанный выбор или только видимую в настоящее время часть вашего экрана, он сохраняет в формате PNG.

— Яромир Гринхорн
источник

Получаемое разрешение зависит от конфигурации дисплея используемого вами монитора.

— Рафаэль