11 Replies Latest reply on Jan 13, 2009 1:30 PM by IanJG

    A few questions with regards to slicing text

    IanJG
      Hi there,

      I have been busy slicing my image up in fireworks and i am very happy with it, i am using the extended script for slicing... Anyway, all is going well :-) After some help yesterday...

      But i have come across a small issue, i am going to try and explain it without rambling too much .. i hope somebody understands :-)

      I have a sort of rounded rectangle (well it round on the right hand side) .. and this has text over the top.. They are both on a different layer (fireworks layer).. i.e. square with round corners on right and text that sits in it = 2 fireworks layers

      I highlight the left part of the graphic and Edit, Insert, Slice and the little bit on the right for my rounded part, i draw the slice in, my idea is to have a div and the left not a graphic just a color and the right is an image (background)..

      and then obviously the text within the left part (which is only a color) - the text needs to be kept as html text as they will be anchors

      Problem is.. the right part is ok.. (my rounded corners).. but my left part i have set to Background image and it exports it as an image with the text as an image..

      Actually thinking about that ... thats pretty logical!! ah ah... How do i say export this has a background color only?

      I tried chaning the slice type to HTML, do i need to enter something in here???

      And how would i get the text also to be entered in

      I hope i sort of made myself understood, if not i can post a few screenshots....????

      They do say a picture is worth a thousand words :-)

      Thanks alot in advance

        • 1. Re: A few questions with regards to slicing text
          Level 7
          IanJG wrote:
          > Hi there,
          >
          > I have been busy slicing my image up in fireworks and i am very happy with it,
          > i am using the extended script for slicing... Anyway, all is going well :-)
          > After some help yesterday...
          >
          > But i have come across a small issue, i am going to try and explain it without
          > rambling too much .. i hope somebody understands :-)
          >
          > I have a sort of rounded rectangle (well it round on the right hand side) ..
          > and this has text over the top.. They are both on a different layer (fireworks
          > layer).. i.e. square with round corners on right and text that sits in it = 2
          > fireworks layers
          >
          > I highlight the left part of the graphic and Edit, Insert, Slice and the
          > little bit on the right for my rounded part, i draw the slice in, my idea is to
          > have a div and the left not a graphic just a color and the right is an image
          > (background)..
          >
          > and then obviously the text within the left part (which is only a color) - the
          > text needs to be kept as html text as they will be anchors
          >
          > Problem is.. the right part is ok.. (my rounded corners).. but my left part i
          > have set to Background image and it exports it as an image with the text as an
          > image..
          >
          > Actually thinking about that ... thats pretty logical!! ah ah... How do i say
          > export this has a background color only?
          >
          > I tried chaning the slice type to HTML, do i need to enter something in here???
          >
          > And how would i get the text also to be entered in
          >
          > I hope i sort of made myself understood, if not i can post a few
          > screenshots....????
          >
          > They do say a picture is worth a thousand words :-)
          >
          > Thanks alot in advance
          >
          >
          >

          Hide the text, do your export. Ideally, add your text in a web page
          editor. I think you may be pushing FW beyond it's capabilities.It is
          still a graphics app, after all.

          As for the HTML slice, CSS and Images ignores that slice type, as far as
          I know, so don't bother with it. The whole idea with CSS and images is
          that you are not supposed to slice the text; it should be recognized as
          text. If FW isn't doing it, refer to paragraph 1 ;-)

          If you disagree, then yep, a link to the PNG file would be quite helpful.

          --
          Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
          http://www.communityMX.com/
          CommunityMX - Free Resources:
          http://www.communitymx.com/free.cfm
          ---
          .:Adobe Community Expert for Fireworks:.
          Adobe Community Expert
          http://tinyurl.com/2a7dyp
          ---
          .:Author:.
          Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
          Peachpit Press -
          http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
          Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
          • 2. Re: A few questions with regards to slicing text
            IanJG Level 1
            Thanks Jim,

            Still learning, but after reading your msg, i have managed to do it... But i am unsure weather i am doing it correct. Here is what i am trying to accomplish ...and what i did, any guidance would be really great.

            This is what i am trying to acheive - its a demo PSD i got from the web to practice with.. i imported it to fireworks (I have inserted RED arrows showing what i am doing) http://drop.io/iangregson/asset/whatiamtryingtoslice-png

            So basically I placed the slices in place http://drop.io/iangregson/asset/slicesinplace-png Notice 2 slices, one on the left (which will end up being HTML background color - i figured no point in exporting the graphic as its only a color - i presume i am correct here??) and the one on the right which is the rounded bit

            Hence i have 2 slices, you will notice that the text is still in place

            So here i hidden the TEXT layer (in fireworks) http://drop.io/iangregson/asset/sliceinplacewithouttext-png

            and i exported... I looked at the css and you will notice I have commented out the background image and replaced it with a COLOR property in css.. I presume i need to do this manually as i am doing?

            So here is my CSS with the comment and the new property, and i deleted the SLICE of the left on the disk as i am now using the color

            #Backgroundstuff {
            margin-left: 3px;
            margin-top: 229px;
            /*background-image: url(images/Backgroundstuff.gif); NOT USING*/
            background-color: #4A7DA2;/* NEW PROPERTY*/
            overflow: hidden;
            display: inline;
            float: left;
            height: 21px;
            margin-bottom: 0;
            width: 324px;
            }

            So did it work ... Yes it did!! http://drop.io/iangregson/asset/sliced-png

            My question is, am i doing this correct, ???

            I presume i am forced to export the SLICE (which i will not use) so it creates the DIV?

            I suppose what i could do is add the size (width) of the left + the right and make one DIV and then enter a background image (of the right) and change horizontal position to RIGHT - maybe this is even better.

            Any comments you have would be really helpful, as i say .. i have done it... but i don't know if i am doing this MANUALLY when i should be doing this automatic??

            And should i merge the 2 slices together?? and maybe not even have 2 slices and just expert one slice (left + right together)..

            Any comments really appreciated

            Thank you once again


            • 3. Re: A few questions with regards to slicing text
              Level 7
              HI Ian:

              Give me a little time to look this over and I will get back to you.

              --
              Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
              http://www.communityMX.com/
              CommunityMX - Free Resources:
              http://www.communitymx.com/free.cfm
              ---
              .:Adobe Community Expert for Fireworks:.
              Adobe Community Expert
              http://tinyurl.com/2a7dyp
              ---
              .:Author:.
              Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
              Peachpit Press -
              http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
              Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
              • 4. Re: A few questions with regards to slicing text
                Level 7

                Ian can you upload the actual FW png file? The png's I downloaded were
                all flattened versions of the design

                --
                Jim
                • 5. Re: A few questions with regards to slicing text
                  IanJG Level 1
                  Hi Jim,

                  yes sure, yes they were not fireworks png's there we just to sort of illustrate what i was doing... below you will find links to the original PSD and the PNG which is really the PSD opened in fireworks... 2 slices applied and saved as a fireworks PNG..

                  Thanks again for your help, coming from a development background i have learned so much in the last couple of days... still learning!

                  If i can provide any more info .. please let me know... as i say the PSD and PNG are not important.. they are free psds i found on the web that i am using to learn the art of slicing ... etc

                  The hope is after this small lesson and the things i have learned i am able to create my own design and slice that up :-) - heres hoping!

                  http://drop.io/iangregson/asset/svtemplate04-psd

                  http://drop.io/iangregson/asset/svtemplate04-png-2

                  please tell me if these are ok... i have use the drop.io system for uploading..
                  • 6. Re: A few questions with regards to slicing text
                    IanJG Level 1
                    Jim ok.. i think all ok.. just checked them and they appear to have uploaded ok.

                    once i am ready to export for the web, i presume i should do what you said before and HIDE all text before export and insert the text via HTML..

                    SUch things as AUTOSLICES / USERSLICES don't really exist in fireworks then?? Sorry no expert but playing around with photoshop (of course not as powerful for slicing as fireworks) it sort of created Autoslices were slices needed to be made..

                    I presume i need to slice every little bit of the document.. rather than depending on autoslices

                    Again thanks... if i have missed something or not explained something welll... please let me know

                    Regards
                    • 7. Re: A few questions with regards to slicing text
                      IanJG Level 1
                      Oh and i almost forgot i am using the upgraded script (export) by matt stow which is available here.. http://www.adobe.com/devnet/fireworks/articles/standards_compliant_design.html

                      i don't know if this makes a difference but i thought i would mention it
                      • 8. Re: A few questions with regards to slicing text
                        Level 7
                        Hey Ian:

                        Auto slices do exist, but they are only an issue if you export HTML and
                        Images. CSS and Images ignores any unsliced areas (other than text or
                        simple rectangles)

                        So if you're going the CSS route, yes, you will need to slice all the
                        pieces you need, which need to remain as graphics. The advantage to this
                        method is that you do not end up with a whole bunch of unnecessary auto
                        sliced graphics,which you would get from exporting as HTML and images.

                        Also, slicing gives you the ability to individually optimize each slice
                        graphic AND give them useful names. Auto slices in FW have
                        auto-generated file names, which you cannot customize.

                        As I've mentioned, CSS and Images will respect rectangles and export
                        them as DIV's. The catch is the rectangle must be created in FW for this
                        to work. PS vectors (or bitmap boxes) are not respected as true
                        rectangles for export.

                        So, what I did with your template was create a new rectangle, edit it so
                        the one corner was rounded, and delete the main navigation bar slice. I
                        restructured the objects in the Layers panel (gawd love poorly organized
                        templates - so many objects, all called layer-something-or-other)so my
                        new rectangle was underneath the navbar text. I left the text visible.
                        And I gave the new rectangle a name: navbar.

                        I created slices for the other obvious graphics, as well.

                        Went to File > Export and chose CSS and Images.
                        The export produced a page layout relatively similar to the design,
                        including a DIV called "navbar" for the submenu, and real text.

                        Is it perfect? No. Just try adding a couple more links and you'll see
                        what happens.

                        All this is great from a mock up perspective, but I'm betting that you
                        will want different submenus to dynamically appear depending on the main
                        menu choice. That cannot be done using Fireworks. You'll want to look at
                        other solutions, perhaps from Project 7, for CSS-based pop up menus,
                        which work with Dreamweaver to simplify the creation of pop up menus.

                        I hope this helps. email me off-list if you like, and I will send you
                        the updated PNG file.

                        IanJG wrote:
                        > Jim ok.. i think all ok.. just checked them and they appear to have uploaded ok.
                        >
                        > once i am ready to export for the web, i presume i should do what you said
                        > before and HIDE all text before export and insert the text via HTML..
                        >
                        > SUch things as AUTOSLICES / USERSLICES don't really exist in fireworks then??
                        > Sorry no expert but playing around with photoshop (of course not as powerful
                        > for slicing as fireworks) it sort of created Autoslices were slices needed to
                        > be made..
                        >
                        > I presume i need to slice every little bit of the document.. rather than
                        > depending on autoslices
                        >
                        > Again thanks... if i have missed something or not explained something welll...
                        > please let me know
                        >
                        > Regards
                        >
                        GE

                        --
                        Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                        http://www.communityMX.com/
                        CommunityMX - Free Resources:
                        http://www.communitymx.com/free.cfm
                        ---
                        .:Adobe Community Expert for Fireworks:.
                        Adobe Community Expert
                        http://tinyurl.com/2a7dyp
                        ---
                        .:Author:.
                        Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                        Peachpit Press -
                        http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                        Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                        • 9. Re: A few questions with regards to slicing text
                          IanJG Level 1
                          Hi Jim,

                          Great!, and thank you for emailing me the template (updated), i thought i would reply here so that if anybody else was reading it may help them.

                          I understand everything and i have seen your updated template, wow ... its really that easy!!! I was slicing oll sorts of things!! ah ah.

                          1 little question, more curiosity really than anything else, how did you recreate the the navbar with the lower right curved ONLY...

                          I was thinking 2 ways, the pen tool... or the other way i tried was using the UNION PATH by create a square and a square with rounded corners and joining them... I presume messing around with things like path joining etc still exports ok --- just interested in what you did to do this?

                          Again a big thank you....

                          • 10. Re: A few questions with regards to slicing text
                            Level 7
                            IanJG wrote:
                            > Hi Jim,
                            >
                            > Great!, and thank you for emailing me the template (updated), i thought i
                            > would reply here so that if anybody else was reading it may help them.
                            >
                            > I understand everything and i have seen your updated template, wow ... its
                            > really that easy!!! I was slicing oll sorts of things!! ah ah.
                            >
                            > 1 little question, more curiosity really than anything else, how did you
                            > recreate the the navbar with the lower right curved ONLY...
                            >
                            > I was thinking 2 ways, the pen tool... or the other way i tried was using the
                            > UNION PATH by create a square and a square with rounded corners and joining
                            > them... I presume messing around with things like path joining etc still
                            > exports ok --- just interested in what you did to do this?
                            >
                            > Again a big thank you....
                            >
                            >
                            >
                            Hey Ian:

                            I drew the rectangle.
                            Went to Modify > Ungroup
                            Opened the Path panel.
                            Selected the Subselection tool
                            Clicked on the bottom right vector control point
                            Chose Fillet Points from the Path panel
                            Set the corner radius to 50
                            You're done!

                            :-)

                            --
                            Jim Babbage - .:Community MX:. & .:Adobe Community Expert:.
                            http://www.communityMX.com/
                            CommunityMX - Free Resources:
                            http://www.communitymx.com/free.cfm
                            ---
                            .:Adobe Community Expert for Fireworks:.
                            Adobe Community Expert
                            http://tinyurl.com/2a7dyp
                            ---
                            .:Author:.
                            Lynda.com - http://movielibrary.lynda.com/authors/author/?aid=188
                            Peachpit Press -
                            http://www.peachpit.com/authors/bio.aspx?a=d98ed798-5ef0-45a8-a70d-4b35fa14c9a4
                            Layers Magazine - http://www.layersmagazine.com/author/jim-babbage
                            • 11. Re: A few questions with regards to slicing text
                              IanJG Level 1
                              cool! thanks jim.. all the best! off to slice an dice now... :-)