4 Replies Latest reply on Nov 6, 2009 12:08 PM by pixlor

    How to expand images




      I am new to Fireworks use Photoshop - but thought I would try Fireworks - so far it's brilliant.  I have a question that is bugging me -

      I have an image, which I am using as an optin form, but I know there is a way to make the image expand when inputting text - how is this achieved.  I can get a fixed image and slice it and get it to work great - but I have seen these expanding images and would love to know how to create one.  Any help would be greatly appreciated.

        • 1. Re: How to expand images
          pixlor Level 4

          Can you post a link to an example of the effect you're trying to achieve?

          • 2. Re: How to expand images
            digital48 Level 1

            Hi  Thanks for answering so quickly.  I have attached file so you can see what I mean.  I need to know how to to get the border to expand when you insert text.


            Thanks very much



            • 3. Re: How to expand images
              pixlor Level 4

              Edit...oh! Wait...NOW I get it...




              Hang on...

              • 4. Re: How to expand images
                pixlor Level 4

                You have a table with fixed-sized images as borders. When you add text, the table breaks. This is a standard problem with using HTML export from a graphics program. What you need is to have fixed-sized images for the top and bottom and repeating images for the sides so that as the text expands (vertically) you have an element with a repeating graphic that accomodates it. Currently, you have a table. If you want to stick with using a table, then I would recommend slicing your design like this (it's a Fireworks .png):


                I opened your .psd, flattened it, and then put slices over the flattened image. You would need five rows and five columns. The outer columns would be for the shadows on the page. You need three columns in the middle because of the placement of the button.


                1. On the top row, you could have blank outer columns, and the aligator (or crocodile) as a single image spanning the three middle columns. Alternatively, you could have a single image spanning all five columns.
                2. The second row has the tops of the page in the outer columns, then the "special offer" text spanning the three center columms. Again, you could make this one single image.
                3. The third row would have repeating images for the page sides in the outer columns and the the center area (spanning three columns) would be for your text and sign-up form.
                4. The fourth row would have the outer edges of the page shadows in the outer columns, the left and right sides of the bottom of the page in columns 2 and 4, and your button in the middle column.
                5. The fifth row would be a single graphic, spanning all five columns of your assurance text.


                To make an image repeat in a cell, you create a class in CSS and apply that class to the cell. I set the slice to be 5 pixels high, but you really only need 1 pixel. It's just easier to see 5. You might define a class like so:

                .shadowleft { background-image : url(images/shadowleft.png); background-repeat : repeat-y ; }

                Then you would add class="shadowleft" to your td tag.


                An option for the third row would be to make a wide image that encompasses both edges and making that cell span all five columns. Or...if you did it that way, you probably only need three columns, anyway.


                Also, rather than using a table, you could use divs and CSS background images. In some ways, this would be simpler.


                So...what next?