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

16

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

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

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.

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