3 Replies Latest reply on May 9, 2012 9:41 PM by bnies813

    Best Way and Why to Slice an Image?

    bnies813 Level 1

      I'm exporting a Photoshop design into Dreamweaver. I know HOW to slice, but I'm having a hard time finding the reason WHY to slice an image for importing into Dreamweaver. Why not just import the whole image, as a single, whole image?

       

      I'm also having trouble finding the best way to slice an image. This is all very new to me. I looked at a webpage I created almost 5 years ago (my first exposure to web design) and I sliced the top of the page into 3 images - I had two prominent images on either side and the middle was the background. I then divided the middle bar (with the buttons) and made each of the buttons their own slice/image.

       

      However, I just came across a website where they ultimately have their design sliced into just three images - a logo, buttons and a top layer image.

       

      This is the site I came across: http://designshack.net/articles/graphics/how-to-make-slicing-suck-less-tips-and-tricks-for -slicing-a-psd/

       

      My slicing looks something like the opening image under the "Killing the Clutter" heading of this website, not the closing image (their goal) under the same heading.

       

      Why are they singling out the logo? Should I be doing this with my design?

      Why are they including all buttons within one slice, instead of individual slices? Is this OK to do? For purposes of the rollover image, I thought they had to be separated.

      They're not saving the background. Should they be? Unless they're importing the background as one large image.

       

      I appreciate those who might recommend not slicing an image and doing stuff with code instead, but I don't have the knowledge to go that route and I have to slice the image.

        • 1. Re: Best Way and Why to Slice an Image?
          Shan-Dysigns Level 2

          WHY is a relative question. The answer is it DEPENDS. It all depends on your layout. I never understood why people would divide an image say 800px x 800px into 10 images just to have them reconnected on the web page as a whole image (considering there were no buttons, links, hot spots, etc). 10 seprate images means the server has to send out 10 different requests in order to rebuild that image. I imagine most people get carried away with slices because they aren't for sure how to construct a website differently. Unless the image is gigantic, it's better to make one http request for an image than 10. If a page has tons of server resquests like this, that only slows down page loading.

           

          Why are they singling out the logo? Should I be doing this with my design?

           

          They may be doing that to create an image map or image rollover for their logo. You certainly don't want to use an image 400px x 400px if your image rollover hot spot is only 30px x 100px. Unless you are going to use some kind of image replacement on a rollover, sometimes it's a better idea to create a css div or class which defines the area for the rollover.

           

          Ok, I have to end my response here... the new forum layout is driving me CRAZY with all these "Internal Server Errors" -

           

          HEY ADOBE - do you not beta test changes before you throw them out???

          • 2. Re: Best Way and Why to Slice an Image?
            Shan-Dysigns Level 2

            Looks like the forum was reverted back to its previous design... so let me continue...

             

            Why are they including all buttons within one slice, instead of individual slices? Is this OK to do? For purposes of the rollover image, I thought they had to be separated.

             

            Unless they are going to have some rollover effect like an image swap, there is no need to have individual slices. Like I said above, you can create empty div's with defined classes to define the hot spots of the links.

             

            They're not saving the background. Should they be? Unless they're importing the background as one large image.

             

            Using one large image for the background is becoming more popular.

             

            Like I said, how/if you slice is relative to your layout and what (if any) rollover effects you may want to use. Do you have a particular layout of yours? I could tell you how I would slice it (if at all).

            1 person found this helpful
            • 3. Re: Best Way and Why to Slice an Image?
              bnies813 Level 1

              Thanks so much for all your help!!!