Image with text

I have created an image with text (map with town names). The
text is 12px Verdana bold. When I export to a gif (only a few
colors) and show on a page I want to get the text to show clear
when the page is resized. But it does not it becomes more obscure
as it gets smaller. I have the image which I have styled
{width:100%;height:100%;} to stop the image expanding the td it's
in.
Can anyone advise how best to achieve good font clarity in
images that may be resized?
thanks.

ROGM wrote:
> Can anyone advise how best to achieve good font clarity
in images that may be
> resized?
Use Flash format, which is scalable. GIF's are not scalable.
Linda Rathgeber [PVII] *Adobe Community Expert-Fireworks*
http://www.projectseven.com
Fireworks Newsgroup:
news://forums.projectseven.com/fireworks/
CSS Newsgroup: news://forums.projectseven.com/css/
http://www.adobe.com/communities/experts/

Similar Messages

  • Importing images with text into Final cut pro

    I'm using FC Studio on a 15" Powerbook 1.67 GHZ 1.5 GB RAM OSX 10.4.9 with a 300GB external HD.
    I'm editing a short film and am using some still images. I've successfully imported and used photographs edited in photoshop. I'm trying to import what is essentially a screen shot of a MSword Doc consisting of boxes, text and graphics.
    I've exported the word doc to PDF and imported to photoshop with 300dpi and saved as both jpeg and png. When viewed in photoshop the resolution of the text appears normal. It imports sucessfully but when viewed in full size in the timeline or external monitor the resolution of the text is terrible. I've also tried adjusting the scale of the image in the Canvas.
    I've read up on this issue a little and have tried reducing and increased the image size and dpi. Has anyone else tried to import still images with text??
    I apolgise if this issue has already been addressed - I've tried using the solutions provided for still images (without text) but have come up against a wall!
    I would appreciate any help or feedback!

    I have used Adobe Illustrator saved out as.png with great results.
    Larry jordan has good info for you here;
    http://www.larryjordan.biz/articles/textindex.php

  • When converting word doc to pdf, my images with text only show the background color of the text box.

    I have a word doc that I am trying to conver to pdf.  I have jpegs with text boxes on top of them on one page.  It looks great on the screen but after I convert to pdf, the text boxes only have half the text, the first half of the text box is just white - the background color.  If I take the background color out of the text box, the text converts over fine but I need the background color.
    I have tried many things here on the print settings, standard, high quality print, unchecking the compression on the images.  Any help?

    Thank you for your posting. These forums are specific to the
    Acrobat.com website and it's set of hosted services, and do not
    cover the Acrobat family of desktop products. Please visit the
    following forums for any questions related to the Acrobat family of
    desktop products:
    http://www.adobeforums.com/cgi-bin/webx/.3bbeda8b/

  • How do I convert images with text that I add on to a .pdf pro document to text? Please help!

    Hey Adobe experts, I could really use your help.
    I have a couple screen shots from school lectures that I pasted onto OneNote. These screenshots have substantial amount of text I could use. I have created a big .pDF document where I have been saving my notes and text. Now - how do I convert the images I paste onto the document into text?
    It automatically happened a couple times when I tried saving the document immediately after I pasted the image - when I was under "edit PDF" I was able to edit and change fonts of the text. But how do I do this at will? Is there a special button somewhere?
    P.S. I already tried OCR - but this is only limited to pages without already "renderable text".

    You can use the Status-4-Evar extension to replace some functionality that was lost withthe removal of the Status bar in Firefox 4.
    Open the Customize window via "View > Toolbars > Customize" or via "Firefox > Options > Toolbar Layout" after you have installed the Status-4-Evar extension and drag the items (Status Text, Progress Meter, Download Status) upon the Add-ons Bar (View > Toolbars > [X] Add-on Bar)
    * Status-4-Evar: https://addons.mozilla.org/firefox/addon/235283/

  • Imessage sending images with text

    When i want to send an imessage as soon as i hit send it asks me to add an image so i have to send 2 messages at the same time
    Wish i could add screen shot to show you

    That should not be happening. 
    Note, the send button is all the way to the right of the message.  If you tap on theleft side, you are telling it you want to add an image.
    So.. Close i message.  Thrn double tap the home key and tough and hold any of the icons on the task bar until they jiggle.  Then delete them by touching the - sign.
    Then, reboot the pad.  Hold home and sleep until the apple logo appears. Ignore the red slider.  
    See if that clears it up.

  • JTabbed Pane Icon with Text at bottom of the image

    Hi,
    Is it possible to use image with text at the bottom of the image in JTabbedpane?
    can anyone help me to do this?
    Thanks in advance,
    Nandha

    that's not directly supported (alignments and relative icon/text position is hardcoded in the uiDelegate) - you need a little detour with a custom tab component:
         JLabel plainLabel = new JLabel("Custom Label", myIcon, SwingConstants.CENTER);
         plainLabel.setVerticalTextPosition(SwingConstants.BOTTOM);
         plainLabel.setHorizontalTextPosition(SwingConstants.CENTER);
         tabbedPane.setTabComponentAt(i, plainLabel);HTH
    Jeanette

  • I want to save a shape with text as a picture

    I am using Word for Mac. I want to combine images with text and save it all together as a picture or jpeg file.  I am using a shape and inserted the images and added the text.  I know I have done this before but I can't remember what I did. I thought it had to do with how the shape is formatted, but I have tried all the options and the option to "save as picture" is never available.  I also tried inserting shapes and texts together in a text box.  I tried grouping everything.  I hope one of you brilliant people can help!  Thanks.

    I am using Word for Mac. I want to combine images with text and save it all together as a picture or jpeg file.
    You could try a detour via a PDF document and Preview: 
    In Word use "File > Print" and press the "PDF" button in the lower left corner. Then select "Open in Preview".  This will open your image in Preview.  There you can crop it and export the cropped image as a png file or a jpeg using "File > Export". Select a different format in the "Format" pop-up menu:

  • Dreamweaver CC - Rollover image to text transition for Fluid page css/html5

    Hi All,
    I am using Dreamweaver CC, Windows 7, PC.
    Goal: To create a selectable text and colour overlay (not a second image with text in the image) that appears over the top of an image on rollover of the container that the image is located in, all inside a fluid page.  Also I would like to avoid jquery and javascript if it's possible.
    Please see the attached HTML5, CSS and 300x300jpg example of this page which should show what i'm trying to do, as you can see currently the text sits below the image on mouse hover and should be fitting nicely inside the image box.  I will replicate this through all the images once I have it working correctly also.  Please note the page fluid scaling at different sizes as I need the rollover to work at whatever size the window or device is.
    Thank you in advance for any answers, ideas, work arounds etc you may have or if i've missed this specific scenario covered elsewhere?
    Here is the HTML (apologies for my messy code):
    <!doctype html>
    <!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
    <!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
    <!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
    <!--[if gt IE 8]><!-->
    <html class="">
    <!--<![endif]-->
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link href="../boilerplate.css" rel="stylesheet" type="text/css">
    <link href="../Website_Testing/style.css" rel="stylesheet" type="text/css">
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
    <script src="../respond.min.js"></script>
    </head>
    <body>
    <div class="gridContainer clearfix">
      <article id="article" class="fluid">
        <div id="Examples" class="fluid">
          <div id="example1" class="fluid">
              <img src="images/300x300.jpg" alt=""/>
              <span class="text">TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT TEXT </span>
          </div>   
          <div id="example2" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
          <div id="example3" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
          <div id="example4" class="fluid"><img src="images/300x300.jpg" alt=""/></div>
        </div>
      </article>
    </div>
    </body>
    </html>
    Here is the CSS (apologies for my messy code):
    @charset "utf-8";
    img, object, embed, video {
        max-width: 100%;
    /* IE 6 does not support max-width so default to width 100% */
    .ie6 img {
        width:100%;
    .fluid {
        display: block;
        text-align: center;
        clear: none;
        float: none;
    .fluidList {
        list-style:none;
        list-style-image:none;
        margin:0;
        padding:0;       
    /* Mobile Layout: 480px and below. */
    .gridContainer {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        clear: none;
        float: none;
    #article {
        min-height: 160px;
        margin-left: 0;
        padding-left: 5%;
        padding-top: 16px;
        padding-bottom: 16px;
        padding-right: 5%;
        background-color: rgba(255,254,191,1.00);
    #Examples {
        text-align: center;
        padding-top: 16px;
        padding-bottom: 16px;
        margin-left: auto;
        margin-right: auto;
    .zeroMargin_mobile {
    margin-left: 0;
    .hide_mobile {
    display: none;
    #Examples #example1 {
        padding-top: 5%;
        padding-bottom: 5%;
        display: block;
        width: auto;
    #Examples #example2    {
        padding-top: 5%;
        padding-bottom: 5%;
        display: block;
        width: auto;
    #Examples #example3 {
        padding-top: 5%;
        padding-bottom: 5%;
        display: block;
        width: auto;
    #Examples #example4 {
        padding-top: 5%;
        padding-bottom: 5%;
        display: block;
        width: auto;
    .text {
        position: relative;
        display: none;
        background: #999;
        background: rgba(0,0,0,0.3);
        text-align: center;
        top: 0px;
    #example1:hover .text {
        display: block;
        background-color: rgba(12,109,242,1);
    #example1 {
        -webkit-transition: all 0.35s ease-in-out 0s;
        -o-transition: all 0.35s ease-in-out 0s;
        transition: all 0.35s ease-in-out 0s;
    #example1:hover {
        background-color: rgba(12,242,109,1.00);
    #example2 {
        -webkit-transition: all .35s ease-in-out;
        -o-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
    #example2:hover {
        background-color: rgba(12,242,109,1.00);
    #example3 {
        -webkit-transition: all .35s ease-in-out;
        -o-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
    #example3:hover {
        background-color: rgba(12,242,109,1.00);
    #example4 {
        -webkit-transition: all .35s ease-in-out;
        -o-transition: all .35s ease-in-out;
        transition: all .35s ease-in-out;
    #example4:hover {
        background-color: rgba(12,242,109,1.00);
    /* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
    @media only screen and (min-width: 481px) {
    .gridContainer {
        width: 100%;
        margin-left: auto;
        min-height: 100%;
    #Examples {
        text-align: center;
        min-height: 640px;
    .hide_tablet {
    display: none;
    .zeroMargin_tablet {
    margin-left: 0;
    #Examples #example1 {
        float: left;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
        width: 46%;
    #Examples #example2 {
        float: left;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
        width: 46%;
    #Examples #example3 {
        float: left;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
        width: 46%;
    #Examples #example4 {
        float: left;
        padding-left: 2%;
        padding-right: 2%;
        padding-top: 2%;
        padding-bottom: 2%;
        width: 46%;
    /* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */
    @media only screen and (min-width: 769px) {
    .gridContainer {
    #article {
        margin-left: 0;
    #Examples {
        text-align: center;
    .zeroMargin_desktop {
    margin-left: 0;
    .hide_desktop {
    display: none;
    @media only screen and (min-width:1024px){
    #article #Examples #example1 {
        width: 23%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 16px;
        padding-bottom: 16px;
    #article #Examples #example2 {
        width: 23%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 16px;
        padding-bottom: 16px;
    #article #Examples #example3 {
        width: 23%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 16px;
        padding-bottom: 16px;
    #article #Examples #example4 {
        width: 23%;
        padding-left: 1%;
        padding-right: 1%;
        padding-top: 16px;
        padding-bottom: 16px;
    #Examples {
        min-height: 340px;
    And here is a 300x300 grey image i'm using as an example holder:
    Thanks for taking the time all,
    Jeff

    Try this in a new, blank document:
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Pure CSS Rollovers</title>
    <style>
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    body {
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size:100%;
    #rollover a {
    display: inline-block;
    position: relative;
    margin-right: 2%;
    text-decoration: none;
    color: #FFF;
    #rollover a span {
    display: block;
    visibility: hidden;
    background-color: #3CC;
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    font-size: 13px;
    font-weight:bold;
    line-height: 1.2;
    color: #FFF;
    text-align: center;
    border: 5px solid orange;
    padding: 5px;
    width: 200px;
    min-height: 125px;
    #rollover a:hover span,
    #rollover a:active span,
    #rollover a:focus span { visibility: visible; }
    #rollover a:hover,
    #rollover a:focus { visibility: visible; }
    </style>
    </head>
    <body>
    <div id="rollover">
    <p>
    <a href="#"><img alt="description" src="http://placehold.it/200x125">
    <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. </span></a>
    <a href="#"><img alt="description" src="http://placehold.it/200x125">
    <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. </span></a>
    <a href="#"><img alt="description" src="http://placehold.it/200x125">
    <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. </span></a>
    <a href="#"><img alt="description" src="http://placehold.it/200x125">
    <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris vitae libero lacus, vel hendrerit nisi!
    Maecenas quis velit nisl, volutpat viverra felis. </span></a>
    </p>
    <!--end rollover--></div>
    </body>
    </html>
    Nancy O.

  • How can I move an image/file around inside a document with text already in it?

    I'm learning In Design on the job, and it's a real challenge.  One big problem I'm having is, after I've placed an image inside a document with text in it, how do I place it precisely where I want it?  Sometimes I need the image flush to the left, and sometimes I need to center it.  When I place it, it doesn't land where I need it to be.  Things I've tried work sometimes but not other times.  I've tried going to Paragraph and reducing the setting to zero to move an image flush to the left of the text frame/column (I'm working with a three-column page).  Sometimes that works, and sometimes it does not.  When it doesn't, I've tried using the Selection tool to drag the image, but it doesn't respond.  Could someone give me an idea of what I'm overlooking?  I'm finding that InDesign has many settings, and all it takes is for one setting to be what it shouldn't be for things to go badly wrong.  I'm having other issues too, but in this discussion I'll stick to this.

    Sounds like you are anchoring the images in the text flow. That's fine if you need them to move along with text during editing, but is usually not required and often counter productive. If you place your images as separate objects in their own independent frames they can be positioned anywhere and moved at will. If they need to be anchored, consider using Custom Positioned instead of inline.

  • How do I insert multiple images inline with text in Pages 5.0?

    I have over 20 images in my iPhoto library that I want to insert in a document one after the other (inline with text).
    How do I do this without having to insert them one by one and going into the image options to change the formatting? It's a pain to have to do it this way...
    I tried using the media browser in Pages, but it seems you can only add them one by one. So I exported the pictures from iPhoto into a folder, selected them all in Finder and dragged them onto my document. All the images appeared stacked on top of each other in a random spot on my page. I can't select them all for some reason. So again, I have to click on them one by one to the formatting? Why is this not simpler? Am I missing something?

    If you use the Help in your Pages 5 you will find the followings link http://help.apple.com/pages/mac/5.0/?lang=en#/tanca246d3ac

  • Error when adding image in-line with text

    When using some of my templates I have no problem in putting
    a small graphic (a pdf icon) in-line with text. Yet with others the
    insertion of the same small graphic forces a newline before and
    after the graphic.
    If the text and image is placed in an editable region of the
    template, but not within a table cell all is ok.
    If the text and image is place within a table cell within the
    editable region the problem arises. I am sure there is something I
    have specified incorrectly but cannot discover what it is.
    An example of where it works fine is:
    www.digitalfox.co.uk/parryassociates/products.htm
    An example of where it doesn't work is:
    www.bournemouthlittletheatre.co.uk/membership2.htm
    I am using Dreamweaver 8 within Studio 8 and run under
    Windows XP.
    Can anyone help please?
    Regards
    Roger Sansom

    Hmm -
    <style type="text/css">
    <!--
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    @import url("nav-bar-top/nav-bar-top.css");
    Is this the belt and bracers approach? 8)
    Anyhow, your problem is in the very first line of one of
    those (take your
    pick) -
    TD IMG {
    DISPLAY: block
    That causes images in table cells to behave as a block tag.
    Block tags
    force all adjacent content to the next line.
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.dreamweavermx-templates.com
    - Template Triage!
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    http://www.macromedia.com/support/search/
    - Macromedia (MM) Technotes
    ==================
    "RogerLS" <[email protected]> wrote in
    message
    news:[email protected]...
    > When using some of my templates I have no problem in
    putting a small
    > graphic (a
    > pdf icon) in-line with text. Yet with others the
    insertion of the same
    > small
    > graphic forces a newline before and after the graphic.
    >
    > If the text and image is placed in an editable region of
    the template,
    > but
    > not within a table cell all is ok.
    >
    > If the text and image is place within a table cell
    within the editable
    > region
    > the problem arises. I am sure there is something I have
    specified
    > incorrectly
    > but cannot discover what it is.
    >
    > An example of where it works fine is:
    > www.digitalfox.co.uk/parryassociates/products.htm
    >
    > An example of where it doesn't work is:
    > www.bournemouthlittletheatre.co.uk/membership2.htm
    >
    > I am using Dreamweaver 8 within Studio 8 and run under
    Windows XP.
    >
    > Can anyone help please?
    >
    > Regards
    > Roger Sansom
    >
    >
    >

  • Appending data(Image and Text) to a file written with RTFWriter2.

    I have file witten using RTFWriter2 which contains image and text.I nedd to modify the contents of that file at runtime through browsing and selecting the JFileChooser and append the data to existing selected file.
    I write inot the file for the first time using FileOutputStream("filename",ture)
    where true stands for appending data to current file,if does noes have any/not.
    But this does not work when i write the file using RTFWriter2,and i have to use this RTFWriter2 b'coz writing an image to a file is not done by any other way.
    If there is any do let me know and if not then what is the solution to this problem of appending data to existing file written by RTFWriter2.
    Your repkeis will be appreciated.Thank You.

    Mubin_Ahmed wrote:
    Hi,
    I want to write an application which can be used to read a file that contains both images and text.
    It must separate the images and text and write them in separate files..
    Can anyone help me with this please...
    My email id is [email protected]
    Thanks in advance...This forum is to use as a resource for your questions, not a place to enlist someone to program for you. If you have specific questions on what to do, not: "I've not a clue, so explain the wold to me." But specific questions on how to get your code to work or points about Java, then people from all over the world will be happy to help you in the context of the forum, and not through your private e-mail. E-mail defeats the basic purpose of having public forums for learning and exchange of information.

  • Want to send a email with images and text in the body of email in iOS

    In iOS, we have written a code to send an email,  with embedded images and text in the body of the email ( not attachment) using mail composer. It works well with iOS devices like iPhone and iPad, but does not work in window based OS. Can anybody help. The code is

    Thanks James !, do you have an idea how to  find the window resource which I belive will be included in our appllication pack.
    In above  I have missed to copy the code,below is the code. This might help you to help me.
    NSMutableString *imgContent = [[[NSMutableString alloc] initWithString:@"<html><body>"] retain];
    UIImage *imageData = [UIImage imageNamed:@"Midhun.png"];
    NSData *imageDataInBase64 = [NSData dataWithData:UIImagePNGRepresentation(imageData)];
    NSString *base64String = [imageDataInBase64 base64EncodedString];
    [imgContent appendString:[NSString stringWithFormat:@"<p><b><img src='data:image/png;base64,%@'></b></p>",base64String]];
    [imgContent appendString:@"</body></html>"];
    MFMailComposeViewController *emailWin = [[MFMailComposeViewController alloc] init];
    [emailWin setMessageBody:imgContent isHTML:YES];

  • When I import or drag/drop an image from Finder into Pages, it floats the image instead of keeping it inline with text

    I'm new to Pages and I've searched online for an answer to this question but haven't found anything quite what I need.
    When I import an image from Finder (or drag and drop from Finder) into Pages, the Text Wrap default is "automatic" which seems to be "in front of text." I have to manually click each image and then change it from "Automatic" to "Inline With Text." Is there a way to change the default so it's not "Automatic" but "Inline With Text" to save me these steps for every single image I import?
    (If importing from Media Browser would behave differently, I don't use iPhoto except for Photo Stream so I need to bring them in from where I've saved them in my Finder.)
    Thanks so much for any help!

    Good questions...  I'll have to try and figure out when the problem first happened - I was thinking it was when I upgraded to Safari 5.1.4 but that might not be the case...  I'll try your suggestions to see if any of them eliminate the problem (I have restarted recenlty and that didn't fix it) but I'll try repairing permissions,etc.  Thanks!
    hmmm... Mcbuffy: are you implying that you *don't* get the webloc when dragging an image out of Safari and that this isn't a caused by change to Safari but is a big/conflict in mine?

  • I can't rotate images or text with two fingers on my trackpad.

    I have the most recent version of Keynote, using iOS 10.9.1 and a bluetooth trackpad.  Everything was working fine with the various gestures and now the rotation (two finger twisting) won't rotate images or text boxes.  Anybody else having this issue?  Any fixes you've seen that work?
    I've turned my bluetooth trackpad on/off.  I've checked my trackpad preferences checked/unchecked/checked.  Nothing seems to work.

    give gesture back please as soon as possible!!!

Maybe you are looking for