8

I want to put a (non-image) portion of my website on a t-shirt, and to do so I need a high-resolution image of the relevant part. My thought is to tell some utility "take a screenshot of this webpage at such and such resolution" and then cut out the part that I want.

Is this the right approach? Does anyone know of such a utility?

Franck Dernoncourt
  • 20,384
  • 48
  • 186
  • 322
Tom Lehman
  • 523
  • 2
  • 9
  • 12

10 Answers10

16

You could print the page to a PDF document. This way, the text is rendered using vectors and will hold up much better in high resolution print.

Most print is done in 300dpi. Text will go as high as 1200 or even 2400dpi sometimes. Your screen on the other hand is typically 72 - 96dpi. So, if your page is text-heavy, it'll end up looking a lot sharper and crisper printed compared to its on-screen version.

More information about DPI here: http://www.nikon-euro.com/nikoneuro_en/hit/general/en/HIT_gen_en_17.htm

CaptainKeytar
  • 884
  • 6
  • 6
5

You don't need external programs.

Magnify the webpage by zooming in (big enough till you want it), then make firefox into full screen mode. Press Print Screen button to take a screenshot, open mspaint and paste the screenshot in.

Probably the screenshot you like is not big enough, if so, you can zoom in even more, take more screenshots and meld multiple screenshots together to form a big one.

deddebme
  • 3,754
  • 4
  • 28
  • 28
  • 1
    You will just be limited by the actual resolution of the thing being zoomed in on. At some point it will start looking grainy. – dagorym Aug 27 '09 at 18:25
  • 1
    @dagorym, since he specifies it's a non-image portion, everything should maintain hi-res while scaling. And in Chrome it scales linearly, looks good. – hyperslug Aug 27 '09 at 18:28
  • 3
    Also, be sure to set your display resolution to the highest setting prior to taking the screenshot. [Right click the desktop select properties (2k/XP) or Personalize (Vista/7).] – Duey Aug 27 '09 at 18:28
  • 1
    @hyperslug: Don't you love WebKit? Apple wrote the rendering engine for Chrome. I don't like Apple, but I love their work on WebKit. – John Gietzen Aug 27 '09 at 18:42
  • @John Gietzen: Apple is not the sole developer of Webkit, there are many others (including Google): http://en.wikipedia.org/wiki/WebKit – EvilChookie Aug 27 '09 at 18:46
  • This would work, but the page doesn't fit in my browser at the zoom level I need. Is it possible to take a screenshot of the parts of the page that fall outside my screen? – Tom Lehman Aug 27 '09 at 19:21
  • yes you can zoom-in all the way in modern browsers such as firefox/chrome. As far as I know, Safari will only make text bigger when zooming in. – deddebme Aug 27 '09 at 19:23
  • @Horace Loeb, zoom in till you reach the size you want, then by doing multiply scroll+screenshot+paste, you can then resemble the whole page. – deddebme Aug 27 '09 at 19:24
  • "then by doing multiply scroll+screenshot+paste, you can then resemble the whole page" -- hence my desire for an external utility ;) – Tom Lehman Aug 27 '09 at 20:23
3

The best way to take a high resolution screenshot without any external tool is using the developer tools in browser:

  1. Open Developer Tools (Ctrl+Shift+I or Command+Option+I or Right click + Inspect)
  2. Toggle Device Emulation/Responsive Mode (Click the icon, or press Ctrl+Shift+M or Command+Option+M)
  3. Click on the Responsive drop-down and click "Edit..." ("Edit list..." on Firefox) to create a custom screen resolution.
  4. This will open a new window. Click "Add Custom Device".
  5. Type in any Device name like "High-Res Screenshot" and choose Width = 1920 & Height = 1080 and Device Pixel ratio (DPR) = 4 and click "Add".
  6. Choose the newly created device "High-Res Screenshot" in the Responsive drop-down
  7. On Chromium-based browsers, click on the 3 dots in top-right corner to open the options and choose Capture Screenshot. On Firefox, click the screenshot button.
  8. This will download the screenshot in a PNG format

Checkout the instruction with images in the following link.

Note: This works in Chrome, Microsoft Edge, and Firefox.
zx485
  • 2,170
  • 11
  • 17
  • 24
Gangula
  • 481
  • 4
  • 13
  • Definitely the best solution! – IsoBar Aug 08 '23 at 04:30
  • Folks using this: You can use ctrl+ or ctrl- to "zoom" in/out so things aren't stretched out to 4k. – txyoji Aug 22 '23 at 20:33
  • @txyoji, I suggest resizing the browser window to your desired size rather than zooming. Because most of the websites these days are responsive, so resizing the window will responsively move the elements, zooming will not do that. – Gangula Aug 24 '23 at 04:54
  • normally yes but device emulation puts it at a fixed dimensions. can't resize without loosing pixels. Blowing your site up to 8k and zooming in 500% will make it look like 1080 but with more pixels. Fortunatly my target site was using rem units instead of px or pt units so zooming worked ok. ymmv. – txyoji Aug 24 '23 at 10:30
3

I love MWSnap. It will keep the current screen resolution and allows you to select the sections you want, or crop later.

AFAIK, you cannot take a screenshot outside the resolution you are already using. For a website, increasing the resolution should not have any effect.

(And it is free) http://www.mirekw.com/winfreeware/mwsnap.html

EDIT: If you designed it in photoshop and have not rasteurized the image yet, you can increase the resolution there, but not from the browser.

RiddlerDev
  • 489
  • 1
  • 6
  • 18
  • I like MWSnap too. The only "complaint" I have about this is that there are no newer versions coming out. – Isxek Aug 27 '09 at 18:20
  • I agree... the fact that it only works on the primary monitor for multiple monitor set ups drives me insane some days. – RiddlerDev Sep 01 '09 at 22:25
3

If using Vista, Start->Run SnippingTool

Inisheer
  • 307
  • 1
  • 4
  • 9
3

We had a Norwegian student that only wanted to print some of a very long webpage (http://www.wilsonminer.com/posts/2006/may/10/are-you-generic/ this was the actual page). PrintWhatYouLike.com helped very much, is free and is very easy to use.

PrintWhatYouLike.com

It's a free website that lets you format any web page for printing.

You start by entering the URL of the page you want to print. The PrintWhatYouLike online editor lets you remove, resize, and rearrange the page elements quickly so you can print only what you want.

It works pretty well for me, I tested it in IE8, Firefox 3.5 and Chrome

Just use it to print to a PDF file and it's perfect!

Matt 'Trouble' Esse
  • 1,918
  • 5
  • 27
  • 35
2

You can only take a screen shot at screen resolution. Every operating system you might be using has screens-shot functionality built-in.

PRINT-SCREEN on Windows (then paste into MSPaint or whatever) or Command Shift 3 or F3 or something on Mac, and it poops the image onto your desktop.

jeffamaphone
  • 439
  • 1
  • 4
  • 10
  • 3
    Don't forget you can use ALT+Print-Screen in windows to capture just the window in question. This helps if you're on multi-monitor setups and don't want to have to worry about cropping the images from the second monitor. – Dillie-O Aug 27 '09 at 18:11
1

Paparazzi (for Mac) works really well for capturing webpages. Export as pdf, tiff, png, or jpg files.

Tom
  • 33
  • 5
user50109
  • 11
  • 1
1

Screengrab! It can copy/save the page/frame/visible portion/selection/window of Firefox.

voyager
  • 2,730
  • 3
  • 25
  • 25
1

If you zoom in and then use Abduction or CaptureIt!, it should work, they both auto-scroll. I do like the print to PDF idea though, assuming all you backgrounds are preserved.

dlamblin
  • 10,553
  • 8
  • 45
  • 53
  • Abduction doesn't work - it doesn't respect your zoom, and captures the page at original size. Don't know about CaptureIt!, I can't find it. – SamStephens Feb 01 '12 at 22:19