Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I've seen this trick on lots of websites, but I don't know how I could create this myself easily. It's basically text or a logo which is saved on a transparent background with a small border, to minimize the file size.


For example on Postmarkapp, they have this transparent logo, with a yellow border:

Postmark logo

and there are a lot more of these examples on the web.


What's an easy way to create such a png file with a small border so your text or logo will seamlessly blend into the background color?

share|improve this question

1 Answer 1

up vote 6 down vote accepted

Unless I'm missing something couldn't you just use Photoshop to create the image with a transparent background and then use CSS to position it appropriately (through various different techniques)?

share|improve this answer
    
:\ Just found the expand selection option in Photoshop, nevermind –  Harmen Oct 28 '10 at 19:27
2  
For seamless edges: use the Save for Web... option and select a Matte color to blend semi-transparent anti-aliased pixels with the background color you plan to use. –  danlefree Oct 28 '10 at 19:41
    
@danlefree, Thanks, that's where this question was about, how I could easily get a small border at places where the image was semi-transparent –  Harmen Oct 28 '10 at 19:58
    
Pretty much all desktop browsers support alpha channel transparency these days, so you don't even need to use a matte color. But I don't know how things are with mobile browsers. –  Lèse majesté Oct 28 '10 at 20:09

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.