Tell me more ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.
up vote 1 down vote favorite

I prototyped my web page directly in HTML/CSS, using custom fonts for header text.

The font rendering however is very different on Windows, so I would like to export some parts of the Web page to bitmap, but with a transparent background.

Is there any way to do that?

share|improve this question
1  
And this came to you by surprise? – Joonas Jun 8 '12 at 11:40
@Lollero Well, I knew it would be different, but not that broken. – julien_c Jun 8 '12 at 11:41
If it's text, why not just copy&paste to photoshop and get the right font? When designing a website, I sometimes use this plugin that brings google web fonts to photoshop webink.com/webfontplugin works quite well, though it is tad slow fetching the fonts at times.. – Joonas Jun 8 '12 at 11:45
@Lollero The font rendering from Chrome is different from the one from Photoshop as well (albeit only slightly) so I was hoping to get to use the one from Chrome. Actually, even Safari looks different from Chrome! (isn't is supposed to be the exact same font rendering?) – julien_c Jun 8 '12 at 11:58
1  
Webkit does have a render engine.. but Chrome has it's own render engine (check Activity monitor with Chrome running). Firefox doesn't render type worth a **** and IE is horrid. Each browser employs it's own method regardless of what is included in some of the common libraries, like WebKit. – Scott Jun 8 '12 at 13:05
show 10 more comments

3 Answers

up vote 1 down vote

Simple. Take a screen shot of your webpage, then use the background eraser tool in Photoshop to get rid of the background.
Easier still, would be re-creating your marquee text completely in Photoshop, minus the background and any other distractions, then using an <img> tag to place the PNG-24+transparency background (or PNG-32, as it's known in Fireworks), inside the <div> where your title would otherwise be.
You can also make a non-transparent version for older browsers (like IE6), which don't support transparent images.
If you know a little PHP, you can even set up a script to detect the user agent (browser), then use the appropriate image, transparent image, or, for modern browsers, lack of image, and instead, use of an actual font.

share|improve this answer
Sounds interesting -- will give it a try... – julien_c Jul 16 '12 at 8:56
I'm sure that a few minutes of Googling will wield a practical script; that failing, I'm sure the nice folks at StackOverflow will be more than happy to help you out. Just try to raise your accept rate; 50% is kind of low. – Jules Mazur Jul 16 '12 at 14:00
up vote 1 down vote

No there isn't any way to save screen shot with a transparent background. you have to do all manual...

share|improve this answer
up vote 0 down vote

I'd:

  1. take a screenshot of the page as is

  2. set the text to black and the background to white, take another screenshot

  3. use the screenshot from (2) as an alpha transparency mask over the original screenshot from (1).

You should then have a colour screenshot with a transparent background. Sure you'll probably need to do a bit of extra manual masking as well to get perfect results, but it sounds like it should cover your need to extract images of the header text.

For more general use, you might be able to put together a more sophisticated stylesheet to give better results (ie replace images with solid fill).

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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