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

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

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.

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? :confused:

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."

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

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

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?

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.

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.

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>>

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?

Don't use the HTML produced by Fireworks or Photoshop! It's mostly uselessThat, 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!

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.

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 =]

You must incorporate normal html or css or both as well into the design, if you use just what photoshop produces it will not be exactly right. The site in my sig is currently being coded, but at the moment it is merely a sliced photoshop html document, and notice how the sliced pieces load slowly its just not how it should be, it must be coded correctly to be fully operational, not to mention search engines would not be able to read any of the text because it is an image format

I once tried using Photoshop and Fireworks to slice designs automatically, but never again. I manually cut the images and code myself for the best(perfect) result every time. If you want it done right plan to spend a lot of time learning how it's done right, or pay a professionl.

Addressing my post above, its been coded now, my sites not a sliced photoshop doc any more

If you are using photoshop it is very easy. All you need to do is slice them , then do save for the web and get the pre-made html. Now , in order to have text written over pictures change the img src= to background= . and colspan or rowspan should not have a >

If you are using photoshop it is very easy. All you need to do is slice them , then do save for the web and get the pre-made html. Now , in order to have text written over pictures change the img src= to background= . and colspan or rowspan should not have a >

Adobe Photoshop exports very bad and unflexible HTML. I suggest you just export your images and code the HTML and CSS from scratch to get the greatest flexibility and overview.

Thank you for the comment. Do you happen to know a tutorial that might be able to teach me how to code it that way?

Thank you for the comment. Do you happen to know a tutorial that might be able to teach me how to code it that way?

Here are some tutorials:

http://www.stockvault.net/tutorials/pixelborders_from_photoshop_to_dreamweaver.php

http://www.celoxdesign.net/free-xhtml-tutorials/slice-and-code-a-layout/id/43 (http://http://www.celoxdesign.net/free-xhtml-tutorials/slice-and-code-a-layout/id/43)

http://www.sitepoint.com/article/get-cooking-photoshop-css

When using the slicing tool it only makes rectangles, how can I slice rounded rectangles?

When using the slicing tool it only makes rectangles, how can I slice rounded rectangles?Essentially, you create rectangles that contain the roundedness, you set the image(s) as background in a CSS document and you apply the appropriate margins to your content to insure it doesn't overlap where it shouldn't.

But if you're using the slicing tool in any piece of software, chances are you're not doing much in the way of CSS...

can that ^ be done in dreamweaver in the design part or do i actually have to go in and hand write the code?

Hand code it using an editor is my suggestion. We use Ultra Edit. Try to avoid tables unless you just have to use them. For example - feature comparison tables.

If utilized correctly - Dreamweaver can be a strong HTML editor but be careful with their WYSIWYG editor - they can do some serious nasty work with font styles.

Hello there,

WYSIWYG HTML editors are fine for beginners or if you want to create a web site quickly and don't want to fiddle around with HTML code. However, if you plan to produce high-quality product – professional hand coding is definitely the way to go. Let me explain why.

Using a dedicated coding service you will avoid certain problems which are inevitable by any automatic tools. Among them are the following:

The HTML code generated by several editors may not be compliant with existing web standards which are typical for the modern professional web-development.
You need to preview the page in different browsers to see if the page is so as you intended.
A WYSIWYG editor produces files of large sizes and as you will know, a large file downloads slowly that a smaller one.
Some WYSIWIG editors support CSS while editing and some don't still using HTML tables to layout a page.
Web pages designed using certain WYSIWYG editors may become inflexible. Then they do not stretch if you put more text or images on a page.
Any automatic tools simply do not provide enough support and help in optimizing your web site for search engines. You can have the most beautiful looking web site in the world but if no one's able to locate it...it doesn’t make any sense.

So it’s up to you will you waste your time trying to obviate all the issues mentioned above or maybe hire an expert that will deliver you professionally made markup.

Another reason why you should learn to hand-code is that if you develop sites you'll eventually need to learn to turn a design into a template usable by a CMS, database-driven site, etc. This may mean the code will be split into multiple files, contained in PHP files or database tables, etc. You need to know how it all works!