I have a site design as a PSD in photoshop right now and I need to slice it so that it can be placed into HTML. My designer wants to charge me 50 euros ($78) to slice it and then place it into HTML.

But to try to save some money I went into photoshop to see if I could figure out how to slice it myself (as I have never done it before) and it seems like it's VERY easy! And photoshop even puts it into HTML for you after slicing, amazing! I didn't even know it could do that :D

My question is... is it really this easy? Right now I am manually selecting each area to be sliced (isn't there some guide of guide I can use because this free handed slicing makes me feel like I'm making errors... I selected to view the "smart guides" but that doesn't show up).... I hope that photoshop's generated HTML can be trusted and that I won't cause any errors by doing it myself?

Anybody know of some good tips when slicing or am I already doing it correctly? Thanks.

Hey,

Check here:

http://www.partdigital.com/tutorials/convert-web/

http://www.psdtohtml.com/tutorial/art1.html

http://www.duclaux.net/blog/how-to-convert-your-photoshop-document-to-a-css-in-less-than-30-seconds-a-precise-tutorial-with-illustrations/2006/02/08/

My question is... is it really this easy?I suppose it depends on how important it is that the end product be high quality. If the quality of the engineering isn't important (if you're not concerned with usability, accessibility, search engine friendliness, load speed, data transfer consumption, design falling apart due to end user browser settings, etc.), then it really is that easy! If any of the aforementioned concerns are important to you, then you're going to disappointed in the quality of the end product. The biggest downside is that you generally won't see just how bad the end result of Photoshop slicing is until you've invested a ton of time into building your site using the markup that gets generated, and possibly until you've actually launched the site. If your designer is more adept at coding work, then pay the $78. If your designer was just going to do the same thing, then save yourself $78 - why pay for a bad result when you can get it for free?

By no fault of your own, you have a tool that is great for doing visual design work and abyssmal when it comes to translating that work to the Web. If you don't mind losing and/or inconveniencing some members of your audience (including the non-human audience members), don't sweat it!

the-pm,

Thanks for bursting my bubble :crap:

Yes, the designer was not going to use photoshop's generated HTML. I know he does his from scratch. After reading what you just wrote, you have talked me out of doing it myself with photoshop's generated HTML.

From now on I will only use photoshop's generated HTML if I want to simply test out my design and see how it functions... oh well :(

EDIT: But my design is VERY basic though. And after looking at the HTML photoshop generated it seems like it's all correct... except it named the tables in an odd way which I can easily fix. Are you suuuure it would be a bad idea to use phoptop's generated HTML? Because right now I am testing it out and it is showing fine in IE, firefox, opera and even netscape... I also changed the tables to stretch 95% (not fixed anymore as I dislike fixed widths) and I also have a CSS file... everything seems like it's showing fine though...

Here is my design I am talking about (it's not done so it's very ugly/sloppy!):

http://jpwear.com/menus.html

Well, if you share the actual HTML output, it will be easier to comment on where you're going to have problems. Upload it and let's see ;)

the_pm,

It's not ready yet for slicing/HTML... but when it is I shall post it :)

But since as you can see it is a very basic design... I HOPE the photoshop generated HTMl won't be bad.

I also have fireworks and also image ready. Do you recommend photoshop, image ready or fireworks for slicing and generating HTML? Which ones the best I wonder...

From my experience, ImageReady is the way.

I also have fireworks and also image ready. Do you recommend photoshop, image ready or fireworks for slicing and generating HTML? Which ones the best I wonder...They are all equally bad at this aspect of Web development. I happen to favor Fireworks the most for Web-based design (hands down best GUI, and plenty of the best tools from Photoshop and Illustrator to handle vector and bitmap editing). Photoshop is what it is - a fantastic bitmap editor with bad Web transference. ImageReady is obsolete and redundant now that Adobe owns Fireworks. It was never as good as Fireworks anyway, but now it is utterly worthless.

They are all fundamentally flawed in that they do not understand how to separate stylist components from structure components. They treat everything as structure, and this fundamental flaw makes their Web output unusable, across the board.

So you think that taking a crash course in doing a slicing of a psd file will save you some money? Think about this:

1. In the first place if you use an image straight from a psd file will only generate images that search engines will not be able to read.
2. Your site will never be searched properly.
3. Demand a search engine friendly web and this will even pay off the 78.00 bucks you are trying to save,.... don't be cheap if you want to make some money, this doesn't mean you can do it yourself but don't try to save a couple of bucks because you want to do it yourself...

you just spend a full day thinking what to do :) That alone is worth far more than €50,- :D

I purchased a design on here years back (not current one) which was sliced using photoshop, looked great to me but after a few weeks of web bliss the complaints on site issues started rolling in and I ended up having to hire someone to totally recode it which ended up costing me 2x what the actual template cost :)