16

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? :)

Improve this question
4
  • Can you provide an example of what is happening, and perhaps a demo of what you are trying to achieve?
    – cclark413
    Commented Apr 24, 2014 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
    Commented Apr 24, 2014 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
    Commented Apr 24, 2014 at 11:38
  • 1
    1920x1080 screen resolution (1080p) gives an image for printing that is suitable for 6.4 x 3.6 inches
    – horatio
    Commented Apr 24, 2014 at 19:51

6 Answers 6

Reset to default
15

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 (or Cmd+Opt+M on OS X) 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

Improve this answer
0
7

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

Improve this answer
4
  • I personally use this one, it makes it quite easy to save the files.
    – Yisela
    Commented Apr 24, 2014 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
    Commented Apr 24, 2014 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
    Commented Apr 24, 2014 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
    Commented Apr 25, 2014 at 14:07
1

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

Improve this answer
1

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.

Improve this answer
0
1

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.

Improve this answer
0
1

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.

Improve this answer
1
  • The resolution you get depends on the display configuration of the monitor you are using.
    – Rafael
    Commented May 29, 2017 at 18:43

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