최고 품질의 웹 사이트 스크린 샷?


16

내가 만든 웹 사이트 내 포트폴리오에 추가 할 것을,하지만 난 힘든 시간 전체 사이트의 높은 품질의 스크린 샷을 얻는 데 문제가 있습니다. 웹 사이트를 PDF로 저장하려고 시도했지만 오류가 발생하여 다른 온라인 서비스가 이미지를 다시 만들 수 없습니다. 또한 Mac에서 정기적으로 스크린 샷을 찍어 모아 보았지만 크기를 줄이면 품질이 크게 떨어졌습니다.

좋은 아이디어가 있습니까? :)


당신은 무슨 일이 일어나고 있는지, 그리고 아마도 당신이 달성하려는 것에 대한 데모를 제공 할 수 있습니까?
cclark413

"포트폴리오"라고 할 때 실제 용지 (종이에 인쇄 됨) 또는 디지털 미디어 나 온라인으로 배포 할 수있는 그림 모음 (JPG, PNG)을 의미 합니까?
Daze

OP가 시도한 mac 스크린 샷이 아래 솔루션보다 나은 이유는 무엇입니까? 나는 Hi Def 스크린 샷을 알지 못하므로 누군가가 저에게 설명 할 수 있다면. 또한 스케일링 문제에도 관심이 있습니다. 일반적으로 다른 방법입니다. 물론 크기를 줄이면 픽셀이 이미지를 표현할 공간이 적지 만 "품질"이 떨어 집니까? 확대 / 축소 비율이 이런 식으로 표시 될 수 있습니까? 100 % 시도
cclark413

1
1920x1080 화면 해상도 (1080p)는 6.4 x 3.6 인치에 적합한 인쇄용 이미지 제공합니다
horatio

답변:


16

Firefox에서는으로 콘솔을 열고 Shift+F2사용할 수 있습니다 screenshot --fullpage.

텍스트 품질을 유지하면서 크기와 크기를 다르게 조정하려면 Ctrl+Shift+M(또는 Cmd+Opt+MOS X)를 사용하여 반응 형 디자인 뷰어를 시작하고 필요에 따라 크기를 조정하십시오 (이 기능을 사용하여 모니터 지원보다 높은 해상도로 스크린 샷을 얻거나 사진을 가져올 수도 있습니다) 태블릿 / 모바일 조회수). 플러그인이 필요하지 않습니다.

큰 예

작은 예


7

웹 사이트에서 전체 페이지 스크린 샷을 만들려면이 Chrome 플러그인을 사용할 수 있습니다 .

그러면 여러 스크린 샷 (스크롤하는 동안)이 만들어지고 하나의 .png 이미지로 결합됩니다.

플러그인을 클릭하고 "전체 페이지 캡처"를 선택하면됩니다.

여기에 이미지 설명을 입력하십시오


나는 개인적으로 사용 이 하나 그것은 아주 쉽게 파일을 저장 할 수 있습니다.
Yisela

스크린 샷은 내 웹 사이트의 포트폴리오에서 사용해야합니다. Awesome Screenshot과 Webpage Screenshot을 모두 시도했지만 캡처하려는 페이지에서 작동하지 않습니다. 시차 효과는 스크린 샷을 망치고 사용자가 아래로 스크롤 할 때 처음 나타나는 요소는 스크린 샷에 나타나지 않습니다. CSS를 벡터로 변환 할 수있는 몇 가지 솔루션을 살펴 보았습니다. 완벽하지만 페이지의 구조를 망치고 이미지를 처리 ​​할 수없는 것 같습니다.
McKeene

1
parralax는 정지 이미지에서 캡처 할 수없는 애니메이션입니다. 배경 이미지를 비활성화 한 다음 스크린 캡과 소스 파일을 사용하여 합성 이미지를 만듭니다.
horatio

1
나도 이것을 사용합니다. 대단해. 로컬 파일에서는 작동하지 않습니다. 먼저 html 페이지를 호스팅해야합니다. 구글 인쇄 화면도 있습니다. 빠른 화면 캡처 도구로 모션 / 시차를 캡처하려면 Screencast-o-matic을 사용해보십시오 . 그것은 웹 기반이며 비디오 출력은 꽤 좋은 품질입니다.
John

1

브라우저 외부에서 다른 용도로 사용할 수도있는 Faststone Capture를 권장 합니다. 불행히도 @McKeene에서 언급했듯이 스크롤 효과로 인해 단일 이미지를 큰 이미지로 고정하는 데 문제가 있습니다.

일반 사용자에게는 버전 5.3이 무료입니다 (독일어 다운로드). 그렇지 않으면 최신 버전은 약 $ 20입니다.

FastStone 캡처 스크린 샷


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=ko 로 이동 하십시오.

이 애드온을 사용하면 전체 페이지뿐만 아니라 VISIBLE 부품의 스크린 샷을 찍을 수 있으며 다른 프로그램으로 전환하지 않고도 자르기, 도형 등을 삽입 할 수 있습니다.


1

최근 에 Mac 용 Pagelayers 를 사용하기 시작했으며 매우 만족합니다.

내가 좋아하는 것들 :

  • Psd는 사용자 정의 너비 및 무한 높이로 생성 할 수 있습니다.

  • 생성 된 psd는 그룹과 레이어로 분류됩니다.

  • PNG에 직접 저장할 수 있습니다

나를 괴롭히는 것들 :

  • 앱에 페이지를로드해야합니다. 크롬 확장이 없습니다. 간단한 스크린 샷을 원할 때 특히 지루할 수 있습니다. (내가 가진 가장 큰 그립)
  • 생성 된 psd 파일은 상당히 클 수 있습니다.

마음에 들지 않는 것 :

가격 : £ 20

다른 유스 케이스가 있으므로 가격을 정당화 할 수 있지만 간단한 스크린 샷이 필요한 경우에는 그렇지 않을 수도 있습니다.

도움이 되었기를 바랍니다.


1

누군가가 모든 답변을 읽고 싶어하며 위의 답변에 만족하지 못하는 경우를 대비 하여 Firefox의 다른 스크린 샷 플러그인 "Screengrab!"이 있습니다. . 어떤 해상도를 얻을 수 있는지 모르겠지만 현재 페이지 전체가 보이는 부분이 아니라 스크린 샷에 표시됩니다. 또한 지정된 선택 항목을 가져 가거나 현재 화면에서 보이는 부분 만 잡고 PNG 형식으로 저장합니다.


얻는 해상도는 사용중인 모니터의 디스플레이 구성에 따라 다릅니다.
Rafael
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.