Giving a snapshot of a web page a transparent background in Photoshop
February 7, 2014 8:59 AM Subscribe
Photoshop experts: What's the best way to take a snapshot of a web page, and put it into a Photoshop document as if it had a transparent background? So text and other anti-aliased elements composite smoothly into my Photoshop document without fringing or losing detail.
I'm surprised I'm asking this, as I've been using Photoshop for over 10 years and consider myself an expert. But I don't have any satisfactory way of doing this.
As a starting point, I use Firebug to change the web page's background to white, so all anti-aliasing is against a white background. But what do I do then to select the contents / remove the white background?
- The Quick Selection Tool (magic wand), with anti-aliasing, eats away too much of the pixels
- Select: Color Range has the same problem, and if I make it soft enough greys start becoming semitransparent
- Loading the RGB channel as a selection works fine for black text, but makes all non-black elements semitransparent
- The Darken layer blend mode also works fine for black text, and Lighten for white text, but everything else is unhelpfully semitransparent
Is there a way I could export a web page to a transparent PNG? Is there something in Photoshop that will do exactly what I want? Or what's the best compromise?
I'm surprised I'm asking this, as I've been using Photoshop for over 10 years and consider myself an expert. But I don't have any satisfactory way of doing this.
As a starting point, I use Firebug to change the web page's background to white, so all anti-aliasing is against a white background. But what do I do then to select the contents / remove the white background?
- The Quick Selection Tool (magic wand), with anti-aliasing, eats away too much of the pixels
- Select: Color Range has the same problem, and if I make it soft enough greys start becoming semitransparent
- Loading the RGB channel as a selection works fine for black text, but makes all non-black elements semitransparent
- The Darken layer blend mode also works fine for black text, and Lighten for white text, but everything else is unhelpfully semitransparent
Is there a way I could export a web page to a transparent PNG? Is there something in Photoshop that will do exactly what I want? Or what's the best compromise?
Can you manage a bit of programming? This thing looks like it does what you want.
posted by emilyw at 9:10 AM on February 7, 2014
posted by emilyw at 9:10 AM on February 7, 2014
The Darken layer blend mode also works fine for black text, and Lighten for white text, but everything else is unhelpfully semitransparent
For most browsers you can set default text colors for rendering the page (normal text, links, background color, etc.) and then turn on an option to force those colors no matter what the HTML specifies. That should give you a completely black and white version of the page, if that helps.
posted by burnmp3s at 9:14 AM on February 7, 2014
For most browsers you can set default text colors for rendering the page (normal text, links, background color, etc.) and then turn on an option to force those colors no matter what the HTML specifies. That should give you a completely black and white version of the page, if that helps.
posted by burnmp3s at 9:14 AM on February 7, 2014
There's no one-click way to do what you want, but my usual method is to use Multiply for the text, and for any parts that come out too dark (photos, buttons) duplicate them into a second Normal layer.
(Alternatively -- and sometimes this is faster -- if you have control of the web page, you can put a flattened version of your photoshop document into the html as a background layer and take a screenshot of that.)
posted by ook at 9:18 AM on February 7, 2014 [1 favorite]
(Alternatively -- and sometimes this is faster -- if you have control of the web page, you can put a flattened version of your photoshop document into the html as a background layer and take a screenshot of that.)
posted by ook at 9:18 AM on February 7, 2014 [1 favorite]
Response by poster: @emily - that looks promising, although it doesn't say what browser engine it uses. It reminded me of PhantomJS which is scriptable headless Webkit. Perhaps it can do what I want if I can figure out how.
A colleague pointed me to this technique which at the moment looks like my best bet. It copies the image into a layer mask, uses Threshold to adjust the degree of transparency, and then you can use paint tools on the layer mask to fix the bits that weren't supposed to be transparent.
posted by snarfois at 9:27 AM on February 7, 2014
A colleague pointed me to this technique which at the moment looks like my best bet. It copies the image into a layer mask, uses Threshold to adjust the degree of transparency, and then you can use paint tools on the layer mask to fix the bits that weren't supposed to be transparent.
posted by snarfois at 9:27 AM on February 7, 2014
You'll get a better result if you can render the page directly over a transparent background. Once the page is rendered onto a non transparent background you've lost information. That is, if you find a pink pixel there's no way to tell automatically whether it's a thing that is pink, or part of the antialiasing of a red thing to a white background. Thus, pink fringing on your red text.
posted by emilyw at 9:40 AM on February 7, 2014
posted by emilyw at 9:40 AM on February 7, 2014
Clipping Magic can remove the background without Photoshop.
posted by rada at 9:53 AM on February 7, 2014 [1 favorite]
posted by rada at 9:53 AM on February 7, 2014 [1 favorite]
This Stack Exchange comment suggests saving two versions of the webpage, the second with black background and white text, and using the white-on-black one as a layer mask. Which is interesting, but its success really depends on the nature of your page's content.
posted by misterbrandt at 11:11 AM on February 7, 2014
posted by misterbrandt at 11:11 AM on February 7, 2014
This Stack Exchange comment suggests saving two versions of the webpage, the second with black background and white text, and using the white-on-black one as a layer mask. Which is interesting, but its success really depends on the nature of your page's content.
Even if you had the exact right layer mask (which I think is actually the inverse of the difference between those two screenshots) you don't have a correct source of pixel data - it's always fringed with the background - it fades out as it gets more severe, but it's still not correct.
What if you take those two versions and darken with the white-background screenshot, and lighten with the black-background screenshot? Off the top of my head I think that should work, but I don't have photoshop handy here so I can't test it for you. (This doesn't require the layer mask from the first paragraph)
posted by aubilenon at 11:51 AM on February 7, 2014
Even if you had the exact right layer mask (which I think is actually the inverse of the difference between those two screenshots) you don't have a correct source of pixel data - it's always fringed with the background - it fades out as it gets more severe, but it's still not correct.
What if you take those two versions and darken with the white-background screenshot, and lighten with the black-background screenshot? Off the top of my head I think that should work, but I don't have photoshop handy here so I can't test it for you. (This doesn't require the layer mask from the first paragraph)
posted by aubilenon at 11:51 AM on February 7, 2014
Print the page to a PDF, open it in Illustrator or equivalent, delete the background.
posted by Sophont at 1:04 PM on February 7, 2014
posted by Sophont at 1:04 PM on February 7, 2014
Best answer: Got my solution - PhantomJS is perfect for the job. Generates a transparent PNG using the Webkit engine with a single command. Here's what I did:
- Downloaded Mac binary from here
- Created a symlink to it using the answer here
- Put a copy of rasterize.js from PhantomJS's examples directory in my project directory, edited the values for viewport size
- Added a temporary .phantomJS class to the
- To create my PNG, I run
Very glad I learned this trick; I'm sure I'll use it a lot. Thanks for the suggestions, folks! (Especially emilyw, who put me on the right track.)
MAJOR CAVEAT: This will of course only work with local sites where you can edit the CSS to make the backgrounds transparent. It won't work for 3rd-party sites that you want to isolate from their backgrounds. PhantomJS can probably inject a user stylesheet though, which will accomplish that, but I've not looked that up in the documentation yet.
posted by snarfois at 2:48 PM on February 7, 2014 [1 favorite]
- Downloaded Mac binary from here
- Created a symlink to it using the answer here
- Put a copy of rasterize.js from PhantomJS's examples directory in my project directory, edited the values for viewport size
- Added a temporary .phantomJS class to the
body element. This rule just contains all the elements I need to make transparent, with background-color: transparent !important;- To create my PNG, I run
phantomjs rasterize.js http://mywebpage.html filename.png in my project directoryVery glad I learned this trick; I'm sure I'll use it a lot. Thanks for the suggestions, folks! (Especially emilyw, who put me on the right track.)
MAJOR CAVEAT: This will of course only work with local sites where you can edit the CSS to make the backgrounds transparent. It won't work for 3rd-party sites that you want to isolate from their backgrounds. PhantomJS can probably inject a user stylesheet though, which will accomplish that, but I've not looked that up in the documentation yet.
posted by snarfois at 2:48 PM on February 7, 2014 [1 favorite]
Wow. Thanks for following up! I'd never heard of PhantomJS before and it is giving me all sorts of ideas.
posted by destructive cactus at 5:21 PM on February 7, 2014
posted by destructive cactus at 5:21 PM on February 7, 2014
« Older Research Help in Another City - Atlanta Crime... | Finding a workable entry level job ASAP, Seattle. Newer »
This thread is closed to new comments.
posted by snarfois at 9:08 AM on February 7, 2014