3 Replies Latest reply on Feb 9, 2011 11:00 AM by pixlor

    Slicing to HTML struggles

    WestSide Level 1



      I can write code and work with databases, but  for some reason I just can't slice up a .psd file and get it in to my  HTML.  I posted this message in the Photoshop forum but I should have posted it here as I have Fireworks CS5. I can slice simple images but right now I'm trying to figure out  how to slice up this rectangular search bar that has a gradient and an  input box for the user to type in keywords. If possible, please look at  the attached image.




      The  search bar should span the width of the available space, the text  should be editable and I should be able to type into the input box.   Right now it's in PSD format layered.  How can I slice up this artwork  in a way where I can build the HTML. Ultimately, I'd like my HTML to be  something like the below and use CSS to handle the background images,  etc.  I just can't seem to figure how to do the Fireworks  part.


      <div id="searchbar">
             <h2>Search Product Catalog</h2>
           <input class="customInput" type="text" name="searchKeywords" id="searchKeywords" />


      Any help would be huge, and I  think if someone can help me I can just get it down from here on out.   I've Googled for tutorials but most are just showing how to slice, but  they don't take the slice all the way to the HTML side.  A few questions  I constantly struggle with:


      1. The above image has a gradient and I'm unclear on do I just take a vertical rectangle sample of it and make it repeat in CSS? Or do I export the whole gradient image?

      2. The search input box has a background gradient.  What would the  file look like that I would export from my graphics program to make this  work in the HTML? 

      3. The graphic has borders already in the .PSD file, should I  recreate those in CSS or do I retain the borders when I export it from Fireworks?

      4. How many slices would I need? I guess this varies?