7 Replies Latest reply on Nov 6, 2008 4:11 PM by jcbluesman

    How to import a .png as an asset file?

    RachelChi
      Hi,

      I'm new to Fireworks and would appreciate some help from here. I have a .png file which collects useful icons that I may reuse, and I wonder how I can import it as an asset (or something else) that I can just drag any icon element in the .png to reuse. Is there a way to do this in Fireworks? When I tried to open the .png file normally, I can't click on each icon element and use it as symbols, it's all just one big picture file. any suggestion?
        • 1. How to import a .png as an asset file?
          heathrowe Most Valuable Participant
          IF all the icon elements are on there separate Layers, then:
          - File > Export > Layers to Files option.
          Then in the Export dialog:
          -- Ensure 'Trim Images' is ticked.
          -- Change the 'Save In' location to <Drive>:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\Common Library\ folder
          -- Create a new folder in this Common Library folder
          - Then Save.

          All the Layered elements will be exported to this new folder.

          Open Window > Common Library, hit the Refresh icon to the lower right of the panel, and you should see your new folder collection. Double click this library folder to access your individual assets and then drag and drop to your document whwnever you want.

          h
          • 2. Re: How to import a .png as an asset file?
            RachelChi Level 1
            Thanks for your response heathrowe. I tried what you suggested and it didn't work. I'm using CS3, and perhaps what I said was a little confusing - what I have is a .png file that includes a number of UI elements that I want to reuse: a search box, an OK button, a Cancel button, a scroll bar, etc. What I can't do is to separate them as individual symbols that I can easily grab and drop. When I open the .png file, I don't get layers and anything in the library, it's just one image (although I'm pretty sure all individual icons used to be symbols). is there a way I can easily get the symbols out of the .png?

            Thanks again!
            • 3. Re: How to import a .png as an asset file?
              Level 7
              RachelChi wrote:
              > Thanks for your response heathrowe. I tried what you suggested and it didn't
              > work. I'm using CS3, and perhaps what I said was a little confusing - what I
              > have is a .png file that includes a number of UI elements that I want to reuse:
              > a search box, an OK button, a Cancel button, a scroll bar, etc. What I can't do
              > is to separate them as individual symbols that I can easily grab and drop. When
              > I open the .png file, I don't get layers and anything in the library, it's just
              > one image (although I'm pretty sure all individual icons used to be symbols).
              > is there a way I can easily get the symbols out of the .png?

              Is the PNG file one that has been saved as editable, from Fireworks, or
              has it been exported as a PNG file from Fireworks or another program,
              like Photoshop?

              --
              Linda Rathgeber - Adobe Community Expert
              http://www.adobe.com/communities/experts/members/8.html
              --------------------------------------------------------------
              • 4. Re: How to import a .png as an asset file?
                Level 1
                RachelChi,

                Many Fireworks users, particularly with new users, usually are confused about .png files.

                There are two kinds of PNG files. When you use Fireworks document, along with different objects or layers as you build or create objects in the document and you save that document file, Fireworks save native PNG file usually are very large file.

                Other PNG file, used for web use, you "export" or "save as" the Firework document as png file for web use.

                There is a big difference between those two.

                Does that help, no?
                • 5. Re: How to import a .png as an asset file?
                  Level 1
                  RachelChi,

                  I apologize for not including this link, that leads you to Adobe Fireworks Developer Centre,

                  http://www.adobe.com/devnet/fireworks/

                  Again, hope that helps.

                  • 6. Re: How to import a .png as an asset file?
                    heathrowe Most Valuable Participant
                    quote:

                    Originally posted by: RachelChi
                    Thanks for your response heathrowe. I tried what you suggested and it didn't work. I'm using CS3, and perhaps what I said was a little confusing - what I have is a .png file that includes a number of UI elements that I want to reuse: a search box, an OK button, a Cancel button, a scroll bar, etc. What I can't do is to separate them as individual symbols that I can easily grab and drop. When I open the .png file, I don't get layers and anything in the library, it's just one image (although I'm pretty sure all individual icons used to be symbols). is there a way I can easily get the symbols out of the .png?

                    Thanks again!


                    Your welcome Rachel, though as Linda /Deaf Web Designer hints at, it's possible you are no longer working with the original 'Layered' source file. Without the individual Layers, the method I mention will not work on a 'flat' file.

                    h
                    • 7. Re: How to import a .png as an asset file?
                      jcbluesman
                      Rachel, it sounds like you do have a flat file and those objects aren't really separate from one another. Do you have access to Photoshop (assuming you know how to use it) that you could use to make each one of them an individual file? I think that would solve your problem.

                      Jim