SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Member
    Join Date
    Jul 2003
    Location
    USA
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Slicing with photoshop

    So I'm slicing with photoshop, and when I open it up in Dreamweaver to clean it up.. Photoshop has made about 20 small cells bordering the website design. Then theres a spacer.gif (1px) in each of the cells..

    Any ideas why this is?

    THanks!

  2. #2
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't slice it in photoshop/imageready for starters Learn how to code good HTML and then you can just select and save pieces of your design (and re-use them where possible), makes for very clean pages and faster laoding. Perhaps you could post the design and we can make some suggestions?

  3. #3
    Huh? What now? tntcheats's Avatar
    Join Date
    Aug 2003
    Location
    BC, Canada
    Posts
    719
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That was really confusing how you put your question, Designbin. I think that platinum's suggestion's a good one, both allowing us to help with your problem, whilst allowing us to possibly make suggestions on the overall design of the website (though for that you might want to go to the site review forums)

  4. #4
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's how I did it when I was starting, but nowadays you don't need tables atall. Anyway, to answer your question, the spacer.gif hacks are there to make sure that the table doesn't fall apart, and to keep all the image in position. You may or may not need them if you are keeping the table, you definatly don't need them (or half the rest of the code produced by Photoshop either) if you were to use a CSS based layout. Google "CSS layout" and you should learn something, or read everything on this site (There isn't much, but what there is is good) http://css-discuss.incutio.com/

    Regards,
    Douglas

    Another post on this: http://www.sitepointforums.com/showt...hreadid=131591
    Hello World

  5. #5
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    Don't slice it in photoshop/imageready for starters Learn how to code good HTML and then you can just select and save pieces of your design (and re-use them where possible), makes for very clean pages and faster laoding. Perhaps you could post the design and we can make some suggestions?
    So how would you slice the overall image up? Just by selecting certain pieces and then >Save As to the .jpg or .gif, then use them in your design?

  6. #6
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The 1px spacer.gif's are caused from Photoshop/ImageReady by you not correctly joining the slices. Make sure the slices all connect to each other, without leaving 1/2 px gaps between them.

    Tryst

  7. #7
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Can't you name slices in PS? That's how I do it in Fireworks, add slices, then as I do the XHTML right click on the one(s) I want, then "Export Slice".

    Douglas
    Hello World

  8. #8
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by koomann
    So how would you slice the overall image up? Just by selecting certain pieces and then >Save As to the .jpg or .gif, then use them in your design?
    Yeah - takes a couple of extra seconds, but worth it in the long run

  9. #9
    Huh? What now? tntcheats's Avatar
    Join Date
    Aug 2003
    Location
    BC, Canada
    Posts
    719
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't really use slicing; I just use the square selection tool, and select what I want, having a contrasting background to whatever I'm working on so that I'm able to select just the areas I want.

    ...never really have thought of using slices, either. I'm still not thinking about it

  10. #10
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by platinum
    Yeah - takes a couple of extra seconds, but worth it in the long run
    How would it be worth it in the long run ... it doesn't take that much time to slice them in ImageReady/export images and then code them in your own HTML ... ?

    Please, don't think I'm trying to start an argument or anything, I'm just a newbie seeking enlightenment =P

  11. #11
    Huh? What now? tntcheats's Avatar
    Join Date
    Aug 2003
    Location
    BC, Canada
    Posts
    719
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I build pretty large websites, so I don't even code... most of the time, though sometimes I will hand-code certain things on sites above 30 pages, yet still under 2,000 like meta-tags, and such.

  12. #12
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tnt, so you just use all of the code that's pumped out by ImageReady/Dreamweaver or whatever program you happen to use?

  13. #13
    + platinum's Avatar
    Join Date
    Jun 2001
    Location
    Adelaide, Australia
    Posts
    6,441
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by koomann
    How would it be worth it in the long run ... it doesn't take that much time to slice them in ImageReady/export images and then code them in your own HTML ... ?
    The code these programs put it is so bloated and crappy it's not funny. When you slice a template, you can reduce the coding and graphics space a heap by using methods of tiling background images, and saving parts as highly optimised fast loading gifs which can be used throughout your design for example. It also makes fluid sites far easier to create

  14. #14
    $postcount++; koomann's Avatar
    Join Date
    Feb 2003
    Location
    Posts
    428
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Aye. Thanks Platinum, every word helps =]

  15. #15
    SitePoint Member builtsmarter's Avatar
    Join Date
    Oct 2003
    Location
    Arizona
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I use imageready. Once I've got all my slices I take any large images that are a background color and specify it that way. Then I export and open in dreamweaver and it's pretty easy. Anytime I need to change a part of the graphic or image I just open up imageready make my change and export only those new images. Works great for me!

  16. #16
    Huh? What now? tntcheats's Avatar
    Join Date
    Aug 2003
    Location
    BC, Canada
    Posts
    719
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Tnt, so you just use all of the code that's pumped out by ImageReady/Dreamweaver or whatever program you happen to use?
    yep.

    I often will review the code, and try to simplify what I can, but my WYSIWYG editor does an okay job of that. I also don't get too bothered by the random spaces, etc. put in, but I think I need to find a way to turn that off; every byte counts
    Last edited by tntcheats; Oct 8, 2003 at 16:24.

  17. #17
    SitePoint Wizard DougBTX's Avatar
    Join Date
    Nov 2001
    Location
    Bath, UK
    Posts
    2,498
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by tntcheats
    yep.

    I often will review the code, and try to simplify what I can, but my WYSIWYG editor does an okay job of that. I also don't get too bothered by the random spaces, etc. put in, but I think I need to find a way to turn that off; every byte counts
    Yea, that is how I used to do it before I learnt CSS. It works for the most part. Really ugly code, but the user doesn't see the code.

    You could probably cut the size of the HTML down by 70-90% by moving to CSS though, as you seem to care about that sort of stuff

    Douglas
    Hello World

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2003
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I personally find ImageReady A WHOLE LOT better than photoshop for slicing! It's much more easier and clearer to work with...

    Also, maybe try repairing your site / optimizing it by hand?


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •