Results 1 to 20 of 20
  1. #1
    Join Date
    Feb 2003
    Location
    AR
    Posts
    2,382

    Want to learn PSD slicing

    The title says it all. I've been in web development for over 8 years now, and have always hired out the HTML/CSS part of the job. But I want to dive in and learn it now. Where do I start? I've got a design in photoshop and want to turn it into XHTML/CSS. I know I can do it myself, but I also know that I will be terribly inefficient when I do.

    So what is your slicing and coding process?

  2. #2
    Join Date
    Jun 2011
    Location
    Toronto
    Posts
    123
    1. Photoshop
    2. DreamWaver

    Slice the layout and put it together in dreamwaver (That's the basic Part).

    More advanced sites require planning for Client Management Systems or some sites require special scripting depending how you want the site to function.

  3. #3
    I think you must refer the websites http://www.hiddenpixels.com/ and http://www.bestpsdtohtml.com/ for getting better knowledge about PSD slicing.

  4. #4
    I'm a web designer, and my advice is "NEVER USE SLICING" as slicing is a very bad technique that will increase the loading time of your site, and you may lose many visitors this way.

  5. #5
    Join Date
    Jun 2010
    Posts
    226
    I just use the Slice Tool and seperate it into the bits I want linked and the bits I don't. For more detail, a quick google search will bring up all you need to know

    Regards
    guernseyhosting
    PacketVM Limited
    Shared Hosting [UK/USA/SG] | SSD VPS [USA/NL] | Storage VPS [NL] | Dedicated Servers

  6. #6
    Join Date
    Oct 2002
    Location
    /roof/ledge
    Posts
    28,074
    Quote Originally Posted by GasArts View Post
    I'm a web designer, and my advice is "NEVER USE SLICING" as slicing is a very bad technique that will increase the loading time of your site, and you may lose many visitors this way.
    Are you sure you know what slicing is?
    Your one stop shop for decentralization

  7. #7
    Join Date
    Feb 2003
    Location
    AR
    Posts
    2,382
    Yeah, I was confused at that statement, too.

  8. #8
    Join Date
    Jul 2009
    Location
    UK
    Posts
    1,312
    Hmm. - A better way to do it rather than automated slicing

    I suppose the most simple way is to:

    Draw your site how you want it.. Make sure each part of your site is a new layer..
    For example, the MENU background could be one layer, The main content area could be another layer , so on..

    once your site looks nice, Either slice it into smaller bits as a whole OR ( what I do is.. )
    Save EACH layer as a new optimized image ( smaller file, into a jpg.. )

    Then use dreamweaver to create the <div>'s and use the images as DIV backgrounds.

    You can then move the divs around like a layer in the photo app.

    Bingo, Your site is done.
    Same as it looked in photoshop / fireworks but now fully done in html and you can move / change any image element freely.
    Last edited by lynxus; 07-08-2011 at 06:55 PM.
    Live Chat Support Software for your Business website - IMsupporting.com

  9. #9
    Join Date
    Feb 2006
    Location
    Kusadasi, Turkey
    Posts
    3,379
    I'm a web designer as well, and my advice is "NEVER USE SLICING" if you want to produce quality code

    Please note that there are two SLICING options, and one of them codes a garbage html, while the other one is just for separating the images into png files. Nothing wrong with the latter. However I still don't use slicing, personal preference. It just isn't flexible enough once you get used to coding.

  10. #10
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    1,800
    Quote Originally Posted by Harzem View Post
    It just isn't flexible enough once you get used to coding.
    This is exactly it. The slicing tool in PS simply isn't flexible enough for detailed, complex designs. It assumes your design consists of rigid rectangular shapes that can be pieced together like tiles, which isn't the case anymore as trends evolve, both design and front-end development wise.

    Say for example you have a button with rounded corners in your design. Ideally, you'd want to crop out just the button and save it as a PNG such that the corners are transparent. That way, the button can be reused anywhere without concerns of the background. The slicing tool won't do this for you. Taking this a step further, if you want to implement the sliding doors technique for this button, you'd have more manual slicing work which the slicing tool would simply be too tedious to use.

    At the end of the day, knowing how and what to slice comes down to your understanding of HTML/CSS. Once you truly understand how HTML/CSS "assembles" a website, you will naturally understand how to slice a PSD.

    Hope this helps.

  11. #11
    Join Date
    Mar 2010
    Posts
    4,533
    Quote Originally Posted by WickedFactor View Post
    This is exactly it. The slicing tool in PS simply isn't flexible enough for detailed, complex designs. It assumes your design consists of rigid rectangular shapes that can be pieced together like tiles, which isn't the case anymore as trends evolve, both design and front-end development wise.

    Say for example you have a button with rounded corners in your design. Ideally, you'd want to crop out just the button and save it as a PNG such that the corners are transparent. That way, the button can be reused anywhere without concerns of the background. The slicing tool won't do this for you. Taking this a step further, if you want to implement the sliding doors technique for this button, you'd have more manual slicing work which the slicing tool would simply be too tedious to use.

    At the end of the day, knowing how and what to slice comes down to your understanding of HTML/CSS. Once you truly understand how HTML/CSS "assembles" a website, you will naturally understand how to slice a PSD.

    Hope this helps.
    If you do not suggest slicing, What do you suggest after a design has been created using photoshop?

    I always slice each individual image and then code it all together to better optimize the images, but of course, it only slices in squares and is unable to do round shapes which I always end up having to do manually.

  12. #12
    Join Date
    Jan 2010
    Location
    San Francisco
    Posts
    1,800
    I think the terms are getting confused a bit. There's slicing/cropping where you manually select a piece to save, one by one. Then there's the slicing tool in Photoshop where you "slice" up the PSD as a whole and then it'll save it all at once. I was saying the tool is what's lacking and that one should really have a solid understanding of HTML/CSS to be able to manually slice/crop a PSD into the necessary images to build a website.

  13. #13
    Join Date
    Mar 2009
    Location
    /home/ohio
    Posts
    264
    The best way IMO is to use the marque select tool after you combind the layers you want into a smart image. You can also select the layers that makeup the image part that you want and export them to a new document and layer>trim the transparent pixels, then you can save for web and optimize the image. The slice tool really isn't very useful.
    HostREA.com
    kirk[@]hostrea.com
    Shared / Reseller cPanel Web Hosting
    WHMCS Templates -Ready to go instant downloads.

  14. #14
    Quote Originally Posted by bear View Post
    Are you sure you know what slicing is?
    What I know about slicing a PSD is to use the Photoshop slicing tool to turn your PSD template into slices, and then rearrange them using HTML, and CSS in order to make your website looks exactly the same as your PSD file. If that's what you mean then this will increase the loading time, because it's like you are loading one big image to your browser, which will take much time to load.

  15. #15
    Join Date
    Mar 2010
    Posts
    4,533
    Quote Originally Posted by WickedFactor View Post
    I think the terms are getting confused a bit. There's slicing/cropping where you manually select a piece to save, one by one. Then there's the slicing tool in Photoshop where you "slice" up the PSD as a whole and then it'll save it all at once. I was saying the tool is what's lacking and that one should really have a solid understanding of HTML/CSS to be able to manually slice/crop a PSD into the necessary images to build a website.
    Oh okay, I figured it was the same tool just people used it differently. I always do the manual slicing/cropping as you mentioned.


    I took an HTML/CSS course in a school in New Hampshire and although you learn the basics (Mostly outdated items that are not used much but it does give a slight understanding of how it works) You do not learn nearly enough to be able to go off on your own and be a success at it. So I am having to learn more using free online guides which is much more useful but there's still missing pieces on almost all of them which makes the whole proper design and exportation techniques still a "foriegn" thing to me.
    Last edited by techjr; 07-08-2011 at 08:58 PM.

  16. #16
    Quote Originally Posted by WickedFactor View Post
    This is exactly it. The slicing tool in PS simply isn't flexible enough for detailed, complex designs. It assumes your design consists of rigid rectangular shapes that can be pieced together like tiles, which isn't the case anymore as trends evolve, both design and front-end development wise.

    Say for example you have a button with rounded corners in your design. Ideally, you'd want to crop out just the button and save it as a PNG such that the corners are transparent. That way, the button can be reused anywhere without concerns of the background. The slicing tool won't do this for you. Taking this a step further, if you want to implement the sliding doors technique for this button, you'd have more manual slicing work which the slicing tool would simply be too tedious to use.

    At the end of the day, knowing how and what to slice comes down to your understanding of HTML/CSS. Once you truly understand how HTML/CSS "assembles" a website, you will naturally understand how to slice a PSD.

    Hope this helps.
    **THUMBS UP**

  17. #17
    Join Date
    Feb 2003
    Location
    AR
    Posts
    2,382
    I wasn't referring to the slice it up and export as HTML tool. I was simply wanting to know your process for taking a full PSD and getting your individual images out of it and turning it into HTML/CSS. That's all.

    Thanks to everyone's input, I've got my answer.

  18. #18
    Quote Originally Posted by techjr View Post
    Oh okay, I figured it was the same tool just people used it differently. I always do the manual slicing/cropping as you mentioned.


    I took an HTML/CSS course in a school in New Hampshire and although you learn the basics (Mostly outdated items that are not used much but it does give a slight understanding of how it works) You do not learn nearly enough to be able to go off on your own and be a success at it. So I am having to learn more using free online guides which is much more useful but there's still missing pieces on almost all of them which makes the whole proper design and exportation techniques still a "foriegn" thing to me.
    I think HTML/CSS are easy to learn online. There are many tutorials that will guide you step by step until you become an expert. The point is to practice while learning. The tutorials teach you ONLY the basics but to get to know how to achieve the results you want, you will need to practice much. When you feel you have solid understanding of HTML/CSS, open some template, and test yourself. Say I will code a template that looks exactly the same like this one without looking at its source code. If you succeed, try another one with different style. This way you will get more designing experience, and also more self confidence. One more thing, when you finish learning HTML/CSS, make sure you validate your templates. This adds your designs more value.

  19. #19
    Join Date
    May 2004
    Location
    Pflugerville, TX
    Posts
    11,231
    If you want to take things a step further regarding just how antiquated traditional slicing is, because of speed concerns for both human an search engine visitors, a popular technique has emerged for combining CSS imagery into single files. So, if you have a handful of patterns that repeat horizontally, you could put a half dozen into a single file and use negative background positioning to display six different background image fills using one file (reduces server calls). Make a file for vertical backgrounds and a file for fixed size elements (sprites). We've taken layouts that normally contain 50+ images and reduced the number down to five or less.

    None of this is possible using slicing in any form. I like to think of this as strategic image exporting, no matter if the images are combined or separate. You have to think in layers, and you have to think in terms of flexibility. Slicing, whether you're talking about the Photoshop tool or the concept in general, is greatly lacking when it comes to creating lean, efficient, effective code.

    I was simply wanting to know your process for taking a full PSD and getting your individual images out of it and turning it into HTML/CSS.
    For me at least, the process involves bringing the canvas into Fireworks and managing the strategic exporting from there. It's SO much more precise, quick and intuitive than "slicing" canvases up in Photoshop.
    Studio1337___̴ı̴̴̡̡̡ ̡͌l̡̡̡ ̡͌l̡*̡̡ ̴̡ı̴̴̡ ̡̡͡|̲̲̲͡͡͡ ̲▫̲͡ ̲̲̲͡͡π̲̲͡͡ ̲̲͡▫̲̲͡͡ ̲|̡̡̡ ̡ ̴̡ı̴̡̡ ̡͌l̡̡̡̡.__Web Design

  20. #20
    Join Date
    Feb 2003
    Location
    AR
    Posts
    2,382
    I already use sprites thoroughly when I come through and optimize imagery and CSS. I've just never (When I posted this thread, anyway) gone from a regular PSD to HTML/CSS. After I posted this thread, I just jumped in and have been pleased with the results.

Similar Threads

  1. PSD Slicing
    By No1Resource in forum Employment / Job Offers
    Replies: 2
    Last Post: 04-16-2010, 06:47 PM
  2. Help with slicing a psd
    By ilyash in forum Web Design and Content
    Replies: 3
    Last Post: 11-11-2007, 10:01 AM
  3. slicing a PSD
    By Derrick in forum Web Design and Content
    Replies: 1
    Last Post: 05-12-2004, 11:59 PM
  4. Need PSD Slicing
    By LPHosting in forum Employment / Job Offers
    Replies: 6
    Last Post: 10-29-2003, 01:42 PM
  5. PSD Slicing
    By LogicChris in forum Other Offers & Requests
    Replies: 3
    Last Post: 03-31-2003, 01:44 AM

Posting Permissions

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