SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Transparent background for jpeg..?

    I know JPEG doesn't support transparency, but i was wondering if their are any tricks i can use to achieve a transparent background for a photo of a wine bottle.

    The image is basically a wine bottle on a white background. The web page I want to place this image on uses a two-colour (2x2 px GIF) background.

    So you get my problem...any solutions?

    Cheers

  2. #2
    SitePoint Enthusiast emplynx's Avatar
    Join Date
    Apr 2003
    Location
    West Virginia
    Posts
    50
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could save it as an adaptive GIF (that doesn't use websafe colors) and set it to 256 colors. Or you could use a transparent PNG, but the file would likely be too big.

  3. #3
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    PNG is out of the question - As you mentioned, it'll be too big (yep it was huge!)

    Problem using Adaptive GIF with 128 or 256 colours is that it makes the file more than 3 or 4 times larger than if it was a JPEG - so 14-18k as opposed to 4k.

    Is there a method I could use to save the bottle as JPEG and the background as a GIF (to get transparency)? I need a way of isolating the shape of the bottle though..

  4. #4
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you could use software such as fireworks or photshop...they have a tool called "magic wand" that smart selects areas of color....you can change the tolerance to adjust how much color it selects...hope that helps!!

  5. #5
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by RockNRollPig
    you could use software such as fireworks or photshop...they have a tool called "magic wand" that smart selects areas of color....you can change the tolerance to adjust how much color it selects...hope that helps!!
    Hey there.....

    I have Photoshop and I know/use the Magic Wand but I'm not sure how this (above) helps me achieve a transparent background in the photo.

    could you please expand on this?

    - keep in mind the image is a wine bottle on a WHITE background, therefore selecting the background isn't the issue. I want the background to be transparent so the colour of the web page (on which i'm placing this image) shows through

    Thanks

  6. #6
    Formerly known as RockNRollPig Shpigford's Avatar
    Join Date
    Dec 2002
    Location
    Denver, CO
    Posts
    2,877
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just so you know....i typed out a good 2 page reply and then my computer froze and now i have to go...crap....dang computers....hopefully i'll get around later to replying again....sorry

  7. #7
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    LOL... I know what you mean. Happens when I use web-based email all the time!

  8. #8
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vargz
    I know JPEG doesn't support transparency, but i was wondering if their are any tricks i can use to achieve a transparent background for a photo of a wine bottle.

    The image is basically a wine bottle on a white background. The web page I want to place this image on uses a two-colour (2x2 px GIF) background.

    So you get my problem...any solutions?

    Cheers [img]images/smilies/smile.gif[/img]
    How big is the wine bottle? Does it have a lot of color and detail in it? You may try saving it as a png with an 8 bit color pallete, then only keep the colors you need. You can select colors and "lock" them into place then reduce the number of colors in the pallete as much as you can handle. You can save some major bytes with that. You could also use fewer colors in a .gif (keeping as few colors as you can get away with) -- you'd just need to be sure the background color is the same as the dominant background color of your 2px image so you don't get a white fringe.

    Whatever route you take, if you simplify the pixel varation in the horizontal rows you may get a smaller file size. Use discreet blurring, use scan lines over the pic, make it monochromatic, edit out uneeded detail... etc...

  9. #9
    SitePoint Addict KelliShaver's Avatar
    Join Date
    Mar 2003
    Location
    Morehead, KY
    Posts
    308
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Open the background gif in photoshop, select all (ctrla) edit - define pattern.

    Now open up the wine bottle. Use the pen tool to draw a clipping path around the bottle*. Ctrl+Click on the path to load the selection, Ctrl+Alt+D and give it a slight feather (.5 or something). Now Ctrl+Shift+I to invert the selection. Then Edit - Fill - Pattern, and select the background pattern you just made.

    No, it doesn't make anything transparent, but it gets the background pattern onto yoru image instead of the white space.

    * using the pen tool and making a clipping path will give you a much smoother, cleaner look than the tragic.. er... magic wand tool will.

  10. #10
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KelliShaver
    Open the background gif in photoshop, select all (ctrla) edit - define pattern.

    Now open up the wine bottle. Use the pen tool to draw a clipping path around the bottle*. Ctrl+Click on the path to load the selection, Ctrl+Alt+D and give it a slight feather (.5 or something). Now Ctrl+Shift+I to invert the selection. Then Edit - Fill - Pattern, and select the background pattern you just made.

    No, it doesn't make anything transparent, but it gets the background pattern onto yoru image instead of the white space.

    * using the pen tool and making a clipping path will give you a much smoother, cleaner look than the tragic.. er... magic wand tool will.
    He or she probably needs it transperant to work on a webpage.

  11. #11
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by KelliShaver
    No, it doesn't make anything transparent, but it gets the background pattern onto yoru image instead of the white space.
    Quote Originally Posted by Novapages
    He or she probably needs it transperant to work on a webpage.
    I think rather than achieving a transparent bg for the image, KS is suggesting to use the same bg pattern as my webpage for the bg of the wine bottle.

    I have tried jus tried. Unfortunately it didn't come out to well. It still leaves a visible box around the wine bottle. The is probably because the rendering of the bg pattern as a GIF (for the web page) is slightly different to how it renders as a JPEG (behind the bottle).

    Oh well, it was worth a shot anyway

    I have decided to make it a <256 colour GIF, reducing colours till its acceptable. Seems there is no other workable option . Oh well, its no big deal...

    Thanks all for your help and suggestions

  12. #12
    :) Have a nice day! james34's Avatar
    Join Date
    Jun 2000
    Location
    KY, USA
    Posts
    137
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have taken jpg's and cut part of it out and then save it as gif with transparent background. Is this what you want done?
    james34
    My Site

  13. #13
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by james34
    I have taken jpg's and cut part of it out and then save it as gif with transparent background. Is this what you want done?
    I thought about doing this, but I'm not sure if this is possible with curved/rounded shapes such as a wine bottle, given that slices can only be straight shapes.

    Anyway, I have saved the image as a 256 (approx) colour GIF. It looks a little better than a JPEG but is about 3-4x larger. Seems the only workable way to get a transparent background...

  14. #14
    SitePoint Enthusiast Novapages's Avatar
    Join Date
    Mar 2003
    Location
    Utah
    Posts
    84
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vargz
    I thought about doing this, but I'm not sure if this is possible with curved/rounded shapes such as a wine bottle, given that slices can only be straight shapes.

    Anyway, I have saved the image as a 256 (approx) colour GIF. It looks a little better than a JPEG but is about 3-4x larger. Seems the only workable way to get a transparent background...
    I noticed you tried to attach the image -- I got a post reply notification that said it was attached -- but I couldn't find that post here.. If you can show me the finished .gif I may be able to show you a few places where you can reduce the file size.

  15. #15
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No worries, i'll try attach it again
    Attached Images Attached Images

  16. #16
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I tried again in the msg above. Shouldn't the attachment show up as a link? What am i doing wrong?

  17. #17
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,289
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Attachments need to be approved before they're visible...
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  18. #18
    SitePoint Zealot vargz's Avatar
    Join Date
    Apr 2003
    Location
    South Australia
    Posts
    161
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh i see...

    Do you know how long approval usually takes?

  19. #19
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,289
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by vargz
    Oh i see...

    Do you know how long approval usually takes?
    Whenever the forum moderators get a chance to approve it.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •