Announcement

Collapse
No announcement yet.

making image semi-opaque or semi-transparent or whatever

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • making image semi-opaque or semi-transparent or whatever

    I'm not a graphic designer at all, but I know a bit about CSS, etc. I'm helping a really tiny non-profit try to put up a web presence, and one of the things they want on their homepage is this image behind some text (kind of semi-transparent or semi-opaque or whatever the terminology is). In looking around at tutorials and posts on other forums, I've found out you can use the following to adjust opacity in the various browsers:

    [quote]
    opacity:.5;
    filter:alpha(opacity=50);
    -moz-opacity:.5;
    </CODE>

    However, when I use that, it doesn't look so good. The image does become a little more opaque or whatever, but the text in front of the image starts looking nasty, so it doesn't seem to accomplish the effect they're going for.

    Another idea I've noticed on the home page of csszengarden.com and the following URL is that you can simply make the image kind of opaque or whatever to begin with and then it doesn't distort the text:
    http://csszengarden.com/?cssfile=/111/111.css&page=0

    However, I've been trying to figure out how to modify an image to kind of be like this:
    http://csszengarden.com/111/praeamble_bg.jpg

    I don't think I know the proper terminology, because I've been Googling around for help with Paint Shop Pro and transparency or opacity, but so far I haven't found out how to use it to make an existing image like this. Please let me know if you have any advice!

    Thanks... [img]/emoticons/frusty.gif[/img]

  • #2
    Semitransparent, semiopaque, etc. Are correct terminology. In terms of file formats that support it, it is know as alpha transparency.

    The PNG format is the only one that supports it, however IE doesn't support PNG. Go figure.

    Anyway, the way they did that was to cut out a piece of their background that they wanted to appear semi-transparent and brought it into photoshop. Then they put a new layer on top and filled it with a solid color, then they lower the opacity of the top layer until they get the look they want. Then you just save for Web as a JPG, GIF, or PNG.

    Also, this article might interest you. http://www.alistapart.com/articles/pngopacity/



    If it weren't for the last minute, nothing would ever get done.

    Never put off till tomorrow what you can avoid all together.
    ProudPenguin
    P r o d u c t i o n s


    Comment

    Search

    Collapse

    Sponsor

    Collapse

    Incredible Stock

    Latest Topics

    Collapse

    GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
    Working...
    X