Skip navigation
Currently Being Moderated

Is there a way to make a graphic for web site that has selectable text after publishing?

Jan 3, 2013 8:59 AM

I'm thinking that I learned this once in a tutorial but is this possible?  I know you can use the SAVE FOR WEB and make a link but can you also do something else to just make the text IN the graphic so that it's selectable or still becomes visible to search engines or searches?  I made a graphic in Illustrator but really want the text to be selectable on the site still....

 

Thank you in advance!

 
Replies
  • Currently Being Moderated
    Jan 3, 2013 9:18 AM   in reply to fourwhitesocks

    You could try Muse istead of Illustrator if you insist on WYSIWYG editing

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 5:52 AM   in reply to fourwhitesocks

    Text that is composed of pixels within a raster image can never be selectable in a web browser. You could use the image without text as the background of a table cell or div and then set live text "in front" of it.

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 5:58 AM   in reply to fourwhitesocks

    See online help about Slices (which are really just Adobe-glorified HTML table cells).

     

    You can:

     

    1. Create a textframe object.
    2. Select it.
    3. Object>Slices>Make.
    4. Slelect the Slice.
    5. Object>Slices>Slice Options.
    6. Set the Slice Type to HTML Text.

     

    Depending on VERSION, you can use Save For Web & Devices, using the HTML and Images option in the Save Optimized As dialog. The text will be ordinary HTML text contained in a table cell.

     

    In CS6, the HTML and Images option has been removed, so you have to preview the page from the Save For Web dialog and then capture the HTML from the previewed page.

     

    ALWAYS state what version you are using.

     

    But frankly, I'd use another program. For example, if you want a far more elegant way to use a drawing program to turn your page layouts into web pages/sites in an entirely WYSIWYG environment, download a demo of Xara Designer Pro and find out how simple it can be.

     

    JET

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 6:14 AM   in reply to fourwhitesocks

    I'm totally not looking for a WYSIWYG environment...

    You totally  are. You want to "made a graphic in Illustrator but really want the text to be selectable on the site still...." In other words, you want to set text as part of an overall design in Illustrator (a WYSIWYG drawing program), export the page as HTML, and have the text objects treated as ordinary HTML text in the resulting HTML export. That is working in a WYSIWYG environment.

     

    And there's nothing wrong with that. But again, Xara Designer Pro is far more capable than Illustrator in this regard (and others), and costs much less, to boot. You can literally build your layout pretty much any way you want, and export it as web page(s) that will look almost identical, with the text surviving the trip as live text (and with all the stylized formatting retained)--all with much less bother.

     

    JET

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 6:45 AM   in reply to fourwhitesocks

    OK. If you are a DW user, then create the background portion of your image, place it in a proper div for that image (that itself is controlled by CSS). Then create the text that is styled and positioned by CSS.

     

    Anything other than that is not going to have selectable text.

     

    Take care, Mike

     
    |
    Mark as:
  • Currently Being Moderated
    Jan 4, 2013 6:52 AM   in reply to fourwhitesocks

    Not quite sure what you actually mean. In all this discussion the most critical point is missing: What kind of selectebale text and what do you want to do with it? Your "needs to be visible in search engines" doesn't really make sense to begin with. that's what the ALT, TITLE, DESC and LONGDESC attributes you can apply to an IMG tag are for, no matter what format that image actually is. If it needs to be HTML text, then do it in DW and place it inside its own DIV on top of your image or whatever. If it needs to be an SVG with dynamic text, then edit the SVG code accordingly to include your JavaScript.

     

    Mylenium

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points