Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Want to learn PSD slicing

[ThatScriptGuy]

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?

[comswww]

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.

[nancysmith]

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

[GasArts]

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.

[GH_Dom]

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

[bear]

Originally Posted by GasArts

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?

[ThatScriptGuy]

Yeah, I was confused at that statement, too.

[lynxus]

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.

[Harzem]

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.

[Hsunami]

Originally Posted by Harzem

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.

[techjr]

Originally Posted by WickedFactor

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.

[Hsunami]

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.

[KmacK]

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.

[GasArts]

Originally Posted by bear

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.

[techjr]

Originally Posted by WickedFactor

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.