Pixelated Text after Image Upload with Transparent Background

[rareeyes]

Hello! I just created a banner for my site with an image and text and a transparent background using photoshop and the "Save for Web" feature, saving it as a PNG. However, the text in the image looks pixelated on the site and the image that was placed into the photoshop file has a white border. I tried uploading the same image with a black background and it looks fine. Not sure what the problem is here. Please see the attached images to see what I'm talking about.

Another idea is to just upload the circular logo and use Google Fonts for the header text. This may be better for responsiveness... suggestions??

Thanks in advance!!

 

[Tom Mann]

I completely agree with using a real font, not an image for the header text. As I'm sure you know, this has numerous advantages. The slight differences between the font you want and the closest available font will likely be invisible to almost everyone. Probably you will be the only person who knows that a substitution was made.

WRT the circular logo (and surrounding text), it simply appears to be nothing more than a poor / rushed job cutting it out. A little more time spent on that should completely cure this problem. If you have problems doing it, post a full rez version of the logo here and we can likely give you some pointers.

Cheers,

Tom M

 

[inkpad.t]

did you enlarge the image when using the web design software when putting together the site ? and what resolution did you create the image in on Photoshop ?