What's up guys?
My name is TechNobo, here for TroubleChute
And today, I've got an amazing video for you
if you create video, or need screenshots of webpages.
If I go to something like wikipedia.org
You can see that if I take a screenshot of something
using any software.
Then open it up.
If I zoom in, you can see it gets very pixelated very quickly.
Usually to the left is an orangey-reddish tint,
and to the right is a blue.
So, that occurs because the screenshot is not of a very high resolution.
Usually you might zoom into the webpage to try and make your screenshots a bit higher quality.
But, if you're going to zoom into them quite far,
in something like a video editor, or a presentation
or anything for that matter.
Then it can get very pixelated very quickly.
So, there's a simple way to fix that.
You'll need Firefox.
Unfortunately, Chrome doesn't have this feature.
Or, I don't think they plan to add this feature in the future.
Hit Ctrl+Shift+I, and you'll see this pop up at the bottom.
At the very bottom is a set of blue greater than signs.
Simply click next to them.
Now, if we enter colon SCR,
you can see that it types out screenshot for us.
Just hit tab and it will autocomplete that.
Otherwise you can type it out yourself.
Space.
And now we can enter some more things.
So, if we do --fullpage,
And hit enter.
It takes a screenshot of the entire webpage
and you can see that it saves to your Downloads folder
by default.
So if I go ahead and open that up
You can see tha here's an image of the full page.
Of course, if we zoom in
it does get pixelated quite quickly.
So, before we get into fixing that
there's another command, which you can add to the end of this
or replace --fullpage for that matter.
By entering --clipboard.
When you hit Enter, it won't save to a file
it instead saves to your Windows Copy/Paste or Mac Copy/Paste.
So, if I go ahead and open up somehting like MSPaint
and paste it in.
You can see that here is the image, pasted.
If we get rid of the --fullpage argument
So, simply hit up to get to your previous command
get rid of --fullpage, hit Enter.
And then
paste it into MSPaint, you can see that it only
screenshots what is visible.
So, let's say you want to screenshot just one element,
such as the "Welcome to Wikipedia" block up here.
Simply right-click on it and hit Inspect Element.
Now you'll see that it highlights something here where all the code is
and if you hover over it, it will highlight things on the page above.
Simply go to the line that's highlighted, hover over it
and head up, until you're happy with what you're going to screenshot.
The blue box is what you're going to screenshot.
So
I'll click this line over here
which highlights the "Welcome to Wikipedia"
and a bit of space around it.
And now is where things get a little bit confusing.
If you see an "id="
such as here
"id=test"
Double-click on "Test"
Hit control-C, and copy it.
If there isn't an id, then you might see a "class=".
Simply double-click the text inside the inverted commas
and copy that.
There might be multiple elements on the page with the same class,
so, preferrably use ID when you have it.
Next, at the bottom, click next to those greater than signs.
Enter: ":scr", Tab, Space, "--selector"
and then in two inverted commas, paste what you copied.
If you copied it from a class, before your text enter a full stop.
If you copied it from id, enter a hash instead.
So, I copied this "test" text from a "class=" up here.
So, I'll enter a full stop.
And, if I hit Enter, you can see that it screenshots the page.
And if I go to my Downloads,
there's a screenshot of just this element.
If there are multiple elements on the page with the same class,
then it will take a screenshot of the first one that appears.
So, let's say that inside of "class" there are multiple things.
There can be different things, seperated by a space.
Simply copy the most unique looking one
or, just hope that it works.
Otherwise, if you don't want to do that,
let's just say that this element does not have an ID.
It can or can not have a class.
It doesn't matter, because we're going to be giving it a unique ID.
Simply right-click on the element. Edit as HTML.
The first letter should be a smaller than sign,
followed by 2-3 letters to even more letters.
Usually "div" or"p" for paragraph.
etc, etc. What you want to do is click next to that first set of words,
press the Spacebar, type in "id=", followed by two inverted commas.
And inside of it, enter something unique like "aaa".
Simply click somewhere else in here, that isn't inside of this block
and it will set.
Now that we've done that, we can click next to these grater thans at the bottom,
hit the up arrow to get to the previous bit of text
and, we can enter inside of the --selector's inverted commas
we can enter "#aaa".
Hit enter, and it will screenshot just that element.
So, now for the more interesting part now that we've got through all of the basics.
How to capture higher quality screenshots.
So, let's hit up again.
Press the spacebar.
Now we'll enter two hypens, followed by DPR and then a number.
So, this will be a multiplier based on the resolution of your screen.
So, if I have a 1080p screen, and I enter 2, it will be 2K.
If I have a 4K screen and enter 2, it will be an 8K image.
Because we're screenshotting such a small element here.
That is only 308x81 pixels,
I'll enter a DPR of say, 10.
That should give us an image that's 3080 pixels wide, 810 pixels high.
Hit enter, and it will usually take a while to screenshot
if you're taking a high DPR screenshot of a rather big element on the screen.
Heading over to the downloads folder, we have another image.
And as you can tell, if I open up a previous one
it is already a lot bigger.
Zooming into a previous one, you can see these obvious outlines.
However, zooming in on this new image that we took
we can zoom in for quire some time, before we even start to see the borders of the pixels.
So this is a much higher resolution screenshot
that you should use when you're editing,
putting it into a Word Document
or anything else that you want it to be nice and blown-up, without being pixelated.
Now of course this isn't magic.
If there's an image on the page and it's not in Vector format,
usually .svg.
It means that it's not drawn by your computer and can not have the quality increased.
However there are images known as Vector images,
raster images are ones taken by a camera
that consist of pixels.
Vector images consist of mathematic equations and things like that.
Basically, letting your computer draw out a bunch of shapes
and sticking them together.
Those are a little bit more rare, but are still very common on the internet.
Those you can take screenshots of infinite quality,
and you'll never see any pixels if you take one that's high enough.
Just because you can squeeze as much quality out of it as you want.
So, I hope that really helps improve your workflow
and makes your screenshots look a hell-of-a-lot better.
Unfortunately it does only work in Firefox,
hopefully Chrome adds something similar in the future.
But, at least we can still do it.
So, my name has been TechNobo, here for TroubleChute.
I hope this helped you guys.
I'll see you guys around, ciao.