antialias strokes for images with transparent background.

Posted on 2006-06-03
Last Modified: 2012-06-21
I have some nice sharp pictures. I need 70px X 70 px eliptical parts of images. I have to place them on another image on a web page, so I want them with transparent background.
I need 2 px black stroke around the circular pictures. Now my problem is that whatever I tried it gives jagged edges around the pictures. I want them to be smooth, but somehow cant get it smooth. It looks smooth enough in photoshop, but when I place them on the webpage, the edges are not smooth.
How to achieve the smoothness of the strokes?  
Question by:soniya
    LVL 30

    Assisted Solution

    You won't be able to do that as a transparent image as it is too small..

    the best way is to sample the color of the image to use as a background color.  save the file as jpeg.
    LVL 26

    Accepted Solution


    irwinpks has given you the only practical solution.

    Here is a link that explains the problem.

    PNG is the file format that supports full transparency, but Internet Explorer does not (fully) support it. Since 9 out of 10 web surfers in the US use IE, your image will not be transparent on most computers. (Outside the US, it’s something like 6 out of 10)

    If, however, you are making a web page for a select audience such as only Mac users, or only people who use Mozilla or Firefox browsers, then save your image as a PNG-24 image and knock yourself out.

    There are CSS, HTML, and Java script hacks that can make PNG transparency work on IE, but none are without headaches. (google PNG IE)

    In the end, listen to irwinpgs.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Suggested Solutions

    Introduction When sharing photos, especially via e-mail, the large resolution images that most cameras take today make for extremely large file sizes. The time required to upload these files to forums, send in e-mails, post to blogs or even placi…
    Read about why website design really matters in today's demanding market.
    In this tutorial viewers will learn how to restore old photos in Photoshop (an introduction to the Clone tool) Zoom into a damaged area: Click on the "Stamp" icon to use the Clone tool. Hold the Alt key and click to select a region. Click again, and…
    In this tutorial viewers will learn a few layer organization tricks and tips to improve their workflow in Photoshop. Open a multi-layer document in Photoshop: View all your layers by going Window > Layers:  To make sure your layers can be identified…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now