How to create crisp image-based type with transparency background

Discussion in 'Web Design and Development' started by macaddict23, Mar 9, 2008.

  1. macaddict23 macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #1
    In the past, I used to set my type in Photoshop and then export them either as a JPGs or GIFs via "Save For Web". Then I realized I could get sharper results by setting the type in InDesign (document view at 100%), taking a screenshot, and then pasting the screenshot into Photoshop. Cool. Works great. But now I need to create type graphics with a transparent background. What's the best cleanest way to do this? Thanks in advance.
     
  2. Kaliemon macrumors member

    Joined:
    Apr 30, 2006
    #2
    You can try create the graphics in Illustrator and use the "Save for Web" option, and save them as PNG files with transparency.

    I use this method. I posted some examples below. I don't think it has transparency though.

    [​IMG]

    [​IMG]
     
  3. IC3D macrumors regular

    IC3D

    Joined:
    Feb 15, 2008
    Location:
    Fairfield County, CT
    #3
    Transparent png's work best.... BUT for those still using IE6 you don't see the transparency via web. :(
     
  4. Kaliemon macrumors member

    Joined:
    Apr 30, 2006
    #4
    Here's one method of getting transparency to work in IE 6. I don't know if it still works since I don't have IE6, but it used to.

    Add this to the <head> section.

    <!--[if lt IE 7.]>
    <script defer type="text/javascript" src="pngfix.js"></script>
    <![endif]-->

    And place this file in your web directory or where ever you keep scripts. Just make sure the "src" above matches the location of the script.

    pngfix
     
  5. Coolnat2004 macrumors 6502

    Coolnat2004

    Joined:
    Jan 12, 2005
    #5
    I use this and yes, it works.
     
  6. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #6
    Thanks guys. Can you tell me your settings for PNG? Also, which is best, PNG-8 or PNG-24?
     
  7. Puzz macrumors newbie

    Joined:
    Sep 3, 2006
    Location:
    California
    #7
    PNG's for text

    Use PNG-24 (without interlacing) for transparency effects.
     

    Attached Files:

  8. macaddict23 thread starter macrumors 6502

    macaddict23

    Joined:
    Jun 20, 2006
    Location:
    MacVille, USA
    #8
    Thanks, Puzz.
     

Share This Page