Web Hosting Talk : Web Hosting Main Forums : Web Design and Content : Turning PSD into HTML?

[adaml]

Hello and HELP!!!

How do i turn a PSD image into a html document ie. The graphics all in place like it looks in the image document into a html file were all the standard text is selectable?

Thanks

Adam

[Acid-Host.co]

You need to make it into slices so that it knows where to split the image, then click file save for web.

[adaml]

Thanks.

If anyone else reads this thread in Fireworks you have to change a value which is set to Images by default in the properies change it to HTML then click the edit button below and type in some HTML you will have to set the background colour as well!?! enless you change this under the HTML settings on the file menu.

[Argious]

Originally posted by adaml
If anyone else reads this thread in Fireworks you have to change a value which is set to Images by default in the properies change it to HTML then click the edit button below and type in some HTML you will have to set the background colour as well!?! enless you change this under the HTML settings on the file menu.

What?

[adaml]

Ok, so it isnt hard to follow. Heres the step by step guide to turning PSD or any other image file into a HTML document:

1. Open up Fireworks with your image document in (Normally Helps)
2. Make sure you have the properties and tools toolbar in view. With the selection of tools called Web (on the tools toolbar)
3. Click the slice tool, it should be a green box with a red border with a little knife on top of it.
4. Select the area you want to turn into text make sure there is no text underneath it.
5. In the properties tool bar there is an option called "Type" this is set to images as default change this to HTML then underneath that a small button will appear.
6. This button is called Edit click on this and a box will pop up with nothing in it.
7. Fill this box with your text rember to use HTML to make it look good i.e. the fonts and titles. ( a good way is to type what you want in dreamweaver with the correct syle then copy the HTML code in to the box)
8. Once this is done click "ok" If the background is white and you want to change it you can either add a HTML tag into the edit box to change the background, or: Click "File" "HtML Setup" and on the tab called "Table" change the Cell colour and remember if you do this to click off "use canvas background".

Hope it made sense!

(I have found the best way to explorer dreamwevaer and fireworks or any program is too open up a new document and mess around with all the options, and dont worry what happens to it. You can always reinstall the program."

[p2pfiles]

fireworks??? shouldnt it slice up using photoshop or imageready? im confused
help.

[JayNL]

You can just as well use FireNotWorks for that, but it's not very strange that 99,9999% uses Photoshop

[the_pm]

Originally Posted by amygdela

You can just as well use FireNotWorks for that, but it's not very strange that 99,9999% uses Photoshop

I guarantee your numbers are grossly incorrect. The fact that ImageReady was given EOL status in favor of Fireworks by Adobe should be enough of a clue about that one

Fireworks is probably the single best piece of software for turning layouts into Web-ready files. Photoshop and Fireworks can be used with equal adeptness for this job (if you don't like either one, it's because you don't know how to use them - the functionality is the same). But Fireworks has the most efficient rendering engine and most accurate color settings, making it far superior software.

The reason the majority of people use Photoshop is because it is more versatile - it is preferred software for bitmap editing for print, and most people who learn graphic design in school will learn the software that handles both print and Web layout. So Photoshop gets the press. It's the software everyone decides to learn and use, and it's not bad! But for what you're talking about here, Fireworks is superior across the board.

That being said, the methodology you're using sounds like it's going to return a problematic product no matter what software you use. No layout should be chopped into bits and spit out onto a page. Proper image exporting means looking for ways to build efficiency into your layout, using repeatable objects and strategically exporting images so your layout has at least vertical flexibility built into it. Don't use the HTML produced by Fireworks or Photoshop! It's mostly useless, because this is a task that machines were simply not meant to accomplish!

How familiar are you with HTML and CSS?

[JayNL]

I assume the whole reply above was directed at me, and therefore I elaborate. I just think that Fireworks has an interface that does not work for me. I tried, I really did, but I just couldn't get used to it. Photoshop is indeed my passion, and I always slice my layouts within PS. I make a mockup, export the images that I need and code the HTML and CSS for it. I do not ever use PS's HTML, because it's just a ridiculous amount of either spacer gifs or absolute positioned divs all over the place.

I've been a web developer for over 4 years now on a professional level.

[Fixago]

As a professional web developer, Fireworks is all I use because it's perfect for web graphics. Photoshop, on the other hand, is much too bloated for what I need to do (not to mention a huge resource hog).

Anyways, to the op, you could always find someone to convert your PSD to optimized, semantic, cross-browser HTML and CSS for a pretty low fee. You'll get much better results than using a program to export and write the code for you.

[simplyg123]

Dont make the same mistake i originally did and thank all you have to do is slice it and export as html, it has to be coded, <<snipped>>

[Mambug]

You can even use Microsoft's best programs notepad/paint to slice and edit a website...

It all depends on how you slice and what you rely on to slice. I usually just crop an image save it as a .gif/.jpg or whatever, then hard code it in.

That, and i'm a 100% CSS tableless designer. Can Fireworks do that?

[the_pm]

Originally Posted by the_pm

Don't use the HTML produced by Fireworks or Photoshop! It's mostly useless

Originally Posted by ATcomputers.us

That, and i'm a 100% CSS tableless designer. Can Fireworks do that?

No, but as you can see, we covered that earlier

No visual design software can write acceptable code for you. None of them!

[KentonNetworks]

Hi,

Now this is going to be a funny reply, but to get the most out of your design I suggest spending the hundred bucks or so and hire someone to do it right, to convert your design to a professional, valid markup.

Hundred bucks aint much, otherwise you could be using fireworks and spend couple minutes to hours slicing your design, than couple days, trying to fix all the issues fireworks created and other thing that you need to adjust. At last, your page looks just like your design did, yeah but is it valid and does it work on all browsers?

Just my two cents on this. It's good to use Fireworks, but unless you are willing to tweak few things in the markup code, don't bother starting.

Thanks.

[Conica]

Ive always used photoshop, and steadily grew to slice quite well.
incredibly easy once you know how, converts it to a HTML file straight off aswell =]