Professional Web Applications Themes

Creating an image from a text heading - Adobe Illustrator Windows

I want to create an image of a short text heading to use on a web page - the font I want to use is a non-standard web font. Obviously I want the file to be small but I want the final result on the web page (I'm using GoLive) to look good - crisp and smooth. The heading will be just two words, probably about 40 pt and tracked about 200, and on a transparent background so it sits on a web page with a background color. The way I have done it is to create the text in ...

  1. #1

    Default Creating an image from a text heading

    I want to create an image of a short text heading to use on a web page - the font I want to use is a non-standard web font. Obviously I want the file to be small but I want the final result on the web page (I'm using GoLive) to look good - crisp and smooth.

    The heading will be just two words, probably about 40 pt and tracked about 200, and on a transparent background so it sits on a web page with a background color.

    The way I have done it is to create the text in Illustrator, save for web as a gif file. But it is not looking sufficiently smooth or crisp. Clearly there has got to be a better way to achieve the result I want. I would appreciate some advice from you gurus out there.

    Thanks.
    Frank_Cahill@adobeforums.com Guest

  2. #2

    Default Re: Creating an image from a text heading

    Frank,

    Trying to avoid another GIF dispute in this forum, I will limit myself to referring to a post by a very knowledgable Golive user (and F/H):

    Daverj, "GIF files are poor quality" #1, 23 Mar 2005 9:55 pm </cgi-bin/webx?14.3bb8fb65/0>
    Jacob_Bugge@adobeforums.com Guest

  3. #3

    Default Re: Creating an image from a text heading

    The gray "user to user forums" text graphic at the top the page in these forums is a GIF. It's very easy to make something like that using save for web in AI. Is that not sufficiently "crisp and smooth"?

    Can you post a sample of what you're talking about?
    Harron_K._Appleman@adobeforums.com Guest

  4. #4

    Default Re: Creating an image from a text heading

    While the "user to user forums" graphic is a GIF, it does not have a transparent background, it is just gray on white.

    I suspect that Frank's problem is arising because the text is not getting anti-aliased against a background that is the same color as the web page background.

    Frank, what you want to do is put a rectangle behind your text in Illustrator that is exactly the same color as your web page background, if your page background is solid, or the same color as the predominate color in your page background if it is textured. Then select both the backing rectangle and the text when you do the Save for Web.

    If the page background is solid, it is best to just save the graphic out without transparency. But if the page background is textured, then when saving for web be sure to set the transparency color as the color you've used as your background in Illustrator.

    This applies to all GIF's with transparent backgrounds, not just those made from text. You have to ensure that the non-transparent content objects were anti-aliased against an appropriate background color.

    The titles on all these pages of mine are GIF's with transparent backgrounds against a textured web background:

    <http://tpettit.best.vwh.net/family/pettit/FG_TOC.htm>
    <http://tpettit.best.vwh.net/family/grisso/FG_TOC.htm>
    <http://tpettit.best.vwh.net/dolls/pd_scans/ss/pdbook/happy_house_book.html>
    Teri Guest

  5. #5

    Default Re: Creating an image from a text heading

    Many thanks for the tips. I tried two things you suggested. Both worked sufficiently well - putting a rectangle behind the text and filling it with the appropriate color. The other thing I did which worked just as well was to set the 'matte' color to the same as the background. Thanks for your help.

    I sent an email to Adobe support as well and the technician's response was:

    "You may try to convert the text to vector image first and save it as SVG file".

    I'll fiddle with that and see if you produces as good or better result.

    Thanks.
    Frank_Cahill@adobeforums.com Guest

Similar Threads

  1. Identifying image-only vs. image+text PDF files
    By Zamdrist in forum Adobe Acrobat SDK
    Replies: 6
    Last Post: December 16th, 08:25 PM
  2. Replies: 2
    Last Post: November 13th, 10:54 PM
  3. Creating Image Watermarks / Black and White Image
    By Craig Keightley in forum PHP Development
    Replies: 0
    Last Post: September 24th, 09:07 AM
  4. when creating text in a small image...
    By xnoto in forum Adobe Photoshop 7, CS, CS2 & CS3
    Replies: 4
    Last Post: July 31st, 11:21 AM
  5. Email Subject heading Derived from Form text field Value/s
    By Peter Allanach in forum Microsoft Access
    Replies: 2
    Last Post: July 1st, 05:12 PM

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
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139