Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

I have created a website that i would like to add to my portfolio, but i'm having a hard time getting high quality screenshots of the full site. I tried to save the website as PDF, but that was full of errors, other online services cant recreate the images and so on. I've also just tried to take regular screenshots on the mac at put it all together, but it really lost a lot of quality when i scaled it down.

Any good ideas? :)

share|improve this question
    
Can you provide an example of what is happening, and perhaps a demo of what you are trying to achieve? –  cclark413 Apr 24 at 0:43
    
When you say "portfolio", do you mean a physical one (printed on paper), or a collection of pictures (JPG, PNG) that you can distribute on digital media or online? –  Daze Apr 24 at 9:39
    
I am very interested why the mac screenshots the OP has tried are not any better than the solutions below. I am not aware of any Hi Def screenshots, so if someone could please explain that one to me. Further, I am also interested in the scaling problem. Usually it is the other way around. Of course, when you scale something down - there is less space for pixels to represent the image, but a loss of "quality"? Maybe your zoom percent makes it appear this way? Try 100% –  cclark413 Apr 24 at 11:38
1  
1920x1080 screen resolution (1080p) gives an image for printing that is suitable for 6.4 x 3.6 inches –  horatio Apr 24 at 19:51

6 Answers 6

If you want to take a full page screenshot on a website you can use this Google Chrome Plugin.

This will makes several screenshots (while scrolling) and combine them into one .png image.

You just have to click on the plugin and choose "Capture entire page".

enter image description here

share|improve this answer
    
I personally use this one, it makes it quite easy to save the files. –  Yisela Apr 24 at 9:23
    
The screenshots should be used in the portfolio on my own website. I've tried both Awesome Screenshot and Webpage Screenshot, but they are not working on the page I'm trying to capture. The parallax effect ruins the screenshot and the elements that first appears when the user scrolls down to it, doesn't appear on the screenshot. I've looked at a few solutions that could convert the css to vector, which would be perfect, but they seems to ruin the structure of the page and can't handle the images. –  McKeene Apr 24 at 11:00
1  
parralax is an animation which cannot be captured in a still image. Try disabling the background images and then make a composite image using screencaps and the source files. –  horatio Apr 24 at 19:52
1  
I use this too. It is awesome. It doesn't work on local files though. You need to host the html page first. There is also goog ol' print screen too. If you want a quick screen capture tool to capture the motion/parallax try Screencast-o-matic. It is web based and the video output is pretty good quality. –  John Apr 25 at 14:07

In Firefox, you can open the console with Shift+F2 and use screenshot --fullpage.

To scale it to different dimensions and sizes while preserving text quality, use Ctrl+Shift+M to enter the responsive design viewer and resize as needed (you can also use this to get screenshots at higher resolution than your monitor supports, or get pictures of tablet/mobile views). No plug-ins necessary.

Large example

Small example

share|improve this answer

I recommend Faststone Capture, which you can also use outside the browser for anything else. Unfortunately, as mentioned by @McKeene, it has problems sticking the single images together to a big one because of the scrolling effect.

Version 5.3 is free (German download) for home users. Otherwise latest version is around $20.

FastStone Capture Screenshot

share|improve this answer

Firefox users just add a plugin called "Awesome Screenshot". To download this addon visit following link https://addons.mozilla.org/en-US/firefox/addon/awesome-screenshot-capture-/

Chrome Users can go to https://chrome.google.com/webstore/detail/awesome-screenshot-captur/alelhddbbhepgpmgidjdcjakblofbmce?hl=en

this addon allows users to take screenshot of VISIBLE part as well as FULL PAGE, you can crop, insert shapes etc without switching to another program.

share|improve this answer
1  
Welcome to GD. Your answer may be accurate but to be in scope as a quality answer do you mind telling us, posting a link, and add some screenshots in regards to the plugin you suggest? –  Matt Apr 24 at 17:32
    
Thanks for the kind advice, I have updated the answer accordingly. –  user22557 Apr 25 at 6:17

I recently started using Pagelayers for mac and I'm pretty happy with it.

Some things that I love:

  • Psd's can be generated at custom width & infinite height.

  • The generated psd's are broken down into groups and layers.

  • Can save to PNG directly

Some things that bother me:

  • Requires the page to be loaded on the app. No chrome extension. This can be quite tedious, especially when you just want a simple screenshot. (My biggest gripe with it)
  • The generated psd file can be quite large.

Things you might not like:

Price: £20

I have a different use case for it therefore I can justify the price, however you might not if you just need simple screenshots.

Hope this helps.

share|improve this answer

Just in case someone cares to read all the answers and wasn't satisfied with the above ones, which are also excellent, there is another screenshot plugin for Firefox: "Screengrab!". I don't know what resolution you can get, but the whole current page will be on the screenshot, not just the visible part. Aditionally, you can go and grab a specified selection or only the currently visible part of your screen, it saves to png format.

share|improve this answer

protected by Community Apr 25 at 8:33

Thank you for your interest in this question. Because it has attracted low-quality answers, posting an answer now requires 10 reputation on this site.

Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged or ask your own question.