PSD to HTML (how to make a sliced file)

It's been a while since I did this in Photoshop (I mostly use Fireworks for slices these days), so I might not have this precisely right:

In Photoshop CS4, the slice tool shares a space on the toolbar with the crop tool.

Using the Slice Tool, you can create a slice and give it a name. I usually set guides first, then make sure Snap to Guides is checked (in the View menu) so that when I use the slice tool, the slice will snap to the guides.

Duplicate the layer to change the colors.

You can then select the slice (using the slice selector tool) and output first one layer in color, then the other layer in an alternate color.

Again, it's been so long since I've used Photoshop for this that I may have explained it wrong, so forgive me if that is the case. However, this should at least get you started on the right path.

 

Once ou made your image and slice it in Photoshop, you can then Save for web, where you can save optimize for web version of you images along with the HTML code for the page.

Than you need to edit the file in a HTML editor like Dreaweaver...

 

There is no convert to html button if that's what you are looking for. You have to code it. If you have iweb, it'll be easier.

 

Wouldn't it be easier to just create this with HTML and CSS?

Anyways, here is a tutorial on how to slice and code it:
http://sixrevisions.com/tutorials/w...clean-web-20-style-web-design-from-photoshop/

 

You should learn HTML and CSS if you want to make a website.

 

Agreed, simple thing in css (a:hover) I think, I've probably put it wrong and embarassed myself .

 

For sure HTML and CSS is the way to go when it to comes to building a website although you can do it in Flash (I hate Flash but that's my opinion).

You could also try using RAGE MapDesign I've played around with the software but never thoroughly tested it and I don't know if it accepts PSD but it's worth a try.

 

Let me know if you need any help and I will do if for you for free

 

i highly recommend you not developing a site like this. if you have photoshop cs2 on hand. plop youre layout into photoshop, save, then open in image ready. slice it up, assign links, create animations, etc and then file> save optimized as -- it will place an html file + images folder where ever you specify. you may need to tinker w/ the code a bit to recognize the location of the images folder...

 

That is a very old fashioned/ poor way of building a site. The proper way is to hand-code thus maximizing browser support in xhtml strict.
If you build your site via photoshop and very little code you will have poor/ non-existent Search Engine Optimization (Google).

 

no kidding.