Скріншот веб-сайту найвищої якості?

16

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

Якісь гарні ідеї? :)

website-design screenshot

— user22524
джерело

Чи можете ви навести приклад того, що відбувається, і, можливо, демонстрацію того, що ви намагаєтесь досягти?

— cclark413

Якщо ви говорите "портфоліо", ви маєте на увазі фізичну (надруковану на папері) або колекцію зображень (JPG, PNG), які ви можете поширити на цифрових носіях чи в Інтернеті?

— Daze

Мені дуже цікаво, чому скріншоти Mac спробували ОП - не краще, ніж рішення нижче. Мені невідомі жодні знімки екрана 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 зображення.

Вам просто потрібно натиснути на плагін і вибрати "Захопити всю сторінку".

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

— Стефан
джерело

Я особисто використовую цей , це дозволяє досить просто зберігати файли.

— Yisela

Скріншоти слід використовувати в портфоліо на моєму власному веб-сайті. Я спробував як Awesome Screenshot, так і знімок веб-сторінки, але вони не працюють на сторінці, яку я намагаюся зробити. Ефект паралакса руйнує скріншот, і елементи, що з'являються вперше, коли користувач прокручується до нього, не з'являються на екрані екрана. Я переглянув кілька рішень, які могли б перетворити css у векторний, що було б ідеально, але вони, здається, руйнують структуру сторінки і не можуть обробляти зображення.

— МакКійн

1

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

— horatio

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=uk

Цей додаток дозволяє користувачам робити знімки ЗІЗОБОЇ частини, а також ПОВНУ СТОРІНУ, ви можете обрізати, вставляти фігури тощо без переходу на іншу програму.

— user22557
джерело

1

Нещодавно я почав використовувати Pagelayers для mac, і я дуже задоволений цим.

Деякі речі, які я люблю:

PSD можна створювати на власну ширину та нескінченну висоту.
Згенеровані PSD розбиваються на групи та шари.
Можна зберегти в PNG безпосередньо

Деякі речі, які мене турбують:

Потрібна сторінка для завантаження в додаток. Без хромового розширення. Це може бути досить стомлюючим, особливо коли ви просто хочете простий скріншот. (Моя найбільша сила для цього)
Згенерований файл psd може бути досить великим.

Те, що вам може не сподобатися:

Ціна: 20 фунтів стерлінгів

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

Сподіваюсь, це допомагає.

— trylife
джерело

1

На випадок, якщо хтось поцікавиться, щоб прочитати всі відповіді, і не був задоволений перерахованими вище, що також є чудовим, є ще один плагін скріншоту для Firefox: "Screengrab!" . Я не знаю, яку роздільну здатність ви можете отримати, але вся поточна сторінка буде знаходитись на скріншоті, а не лише видимій частині. Додатково, ви можете перейти та взяти вказаний вибір або лише видиму на даний момент частину екрана, це зберігає у форматі png.

— Яромір Зелений Горн
джерело

Отримана роздільна здатність залежить від конфігурації дисплея монітора, який ви використовуєте.

— Рафаель