8 Replies Latest reply on Mar 6, 2011 9:30 AM by quality11

    Creating bg from deisgn with gradiant / textured bg

    quality11 Level 1

      I am still confused about how to create a bg.jpg file from a design file with a textured or gradiant bg.  Here is a jpg of the PSD design file that was sent to me (bg is the red and textured gradiant).  First, if I import it into FW, the texture disappears.   Equinection-Placeholder1.jpg

      So, I took a slice from PSD and brought it into FW.  I created a 23x1440 or so file.  Here's the slice I used below.  The  problem is that when I repeat-x, it's wavy and it shouldn't be (see horizontal lines,  etc) on the website.    How do I create bg so it looks like the original design; just textured and gradiant? Designer gave me the texture files  she used if that's hepful.  Thanks soooo much!

       

      bg.jpg

        • 1. Re: Creating bg from deisgn with gradiant / textured bg
          Jim_Babbage Level 4

          If you are importing the desisgn from a PSD and the bg is disappearing, it means that some effect used for the BG is not supported by Fireworks. The default options when openign or importing a PSD are set to maintain as much editability as possible, but this means that the appearance of certain layers/effects may be different.

           

          Check your Import and Open options  from the Preferences panel or when you try opening the PSD and change the settings so effects are flattened on open/import.

           

          I can't tell you which ones to change because I don't have access to your PSD file. You'll need to do some experimenting.

           

          psd_prefs.gif

           

          If you want to build this yourself in FW, create your gradient in a rectangle, and then try linking the texture file from the Textures list

           

          texture.gif

           

          Or you could try just adding Noise to the gradient, from the Live Filters menu. A value of 3 or 4 should do it.

           

          noise.gif

           

          Noise, probably like the texture supplied by your designer, is random, though, so getting a decent repeating background tile may be difficult.

           

          HTH

          • 2. Re: Creating bg from deisgn with gradiant / textured bg
            quality11 Level 1

            Thanks so much Jim.  I hear what you're saying. The only thing about flattening it is that I need access to the layers but now I see why that happens. Thanks!

             

            The only thing about recreating the bg myself is that I don't know what I'd do.  I don't understand why my bg didn't work by taking a slice of her PSD file (23x720) and then pasting it into a 23 x 1440 new file, rotating the slice by 180 degrees (b/c the gradiant goes from light on top to dark on bottom so it looks more natural) and pasting it again won't work.  So, I'm not sure what to do or how to make it work by scratch and how it wouldn't be wavy again when I got it from her original file.  Does that make sense?

            • 3. Re: Creating bg from deisgn with gradiant / textured bg
              Jim_Babbage Level 4

              Can you better describe what you mean by "not work"? Are you unable to paste? Is it just visually not working as a repeating background image?

              • 4. Re: Creating bg from deisgn with gradiant / textured bg
                quality11 Level 1

                No.....I mean what I already created does not look right on the site so I'm not sure how to recreate one from scratch that would look right w/o the waves.  Does that make sense?

                • 5. Re: Creating bg from deisgn with gradiant / textured bg
                  Jim_Babbage Level 4

                  Yes as I said earlier - that probably has to do with the random  tedture being applied to the gradient. It will be difficult-impossible  to be able to match the left edge of the textured gradient with the  right edge, when using a random texture. You could try  a thicker slice, but I don't know if that will help.  You can try finding another more regular texture where you can more reliably find a seamless repeat, or delete  the texture completely, or (worst case) generate a large background  image wide/tall enough to ensure that even widescreen monitors won't show the edges.

                  • 6. Re: Creating bg from deisgn with gradiant / textured bg
                    quality11 Level 1

                    Thanks Jim!  I just found a techie/web/design friend who figured it out in PS and remoted in and showed me how.  Stretched the borders down, changed the gradiant so light to dark would show correctly, took a slice, created a filter cut it by 50 to take care of the seam and then saved it.  It looks beautiful.  Give it a look.  I would never ever have known how to do that.

                    • 7. Re: Creating bg from deisgn with gradiant / textured bg
                      Jim_Babbage Level 4

                      Glad you got it sorted out1

                       

                      Jim Babbage

                      • 8. Re: Creating bg from deisgn with gradiant / textured bg
                        quality11 Level 1

                        Thank you!  I would never have figured out what he showed me!