Conversion of Photoshop to HTML

Hi guys,

I need help. I buyed a template in templatemonster.com, but when i convert the PSD file to HTML, no its generating pure html code, only images. How i can convert a PSD file to a pure html file ? (with tables, editable text, etc) There are any utility to do this ?

Regards,

Cris

image ready


at the bottom of the ps toobar, click the bottom button, it goes to image ready

from image ready file>save optimized as

Originally posted by hobowitharolex
image ready


at the bottom of the ps toobar, click the bottom button, it goes to image ready

from image ready file>save optimized as

Thank you hobowitharolex, i followed your instructions but the html that the software created me is a html without text editable only one structure of png files. I want that the software create me a complet html with tables and with editable text. how i can do it ? help

thankyou

ps/image ready can only creat your layout

the next step in creating your website is opening the html that image ready made in dreamweaver

go in dreamweaver and open the html

select the area you want to add text

press delete

and then at the bottom toobar of dreamweaver, set the image you deleted as the backround image you deleted in the previous step

you will then be able to type over that area

Automatically converts a layered Photoshop file to HTML. Has a simple naming scheme for designating interactive buttons.

http://www.photowebber.com



It's made by Media Lab, (http://www.medialab.com) the company that makes the Photoshop to Flash (.fla) plug in.


Chris

Cris

To get text editable areas in your HTML, this is what you have to do. When you're in Photoshop and you're ready to save. Go to FILE>SAVE FOR WEB. Here you look at your layout.

Then what you need to do is take the slice tool (it's in the window that opens up when you go to "save for web"). Double click on the area with this tool and you'll get a pop up box stating "text". Simply type in the text you want, or just put in a word, such as "text here..." Be sure to pick "no image" from the drop down menu at the top of the pop up box.

Then when you open up that area in Dreamweaver or whatever you use, even if by hand coding, you'll be able to edit the text.

Photoshop, however, doesn't create tables. Only cells. It's one entire table, unless I haven't seen this before. But to my knowledge it only creates cells.

But you can also use the color picker to pick the background color for cells that you are using, and this way when the HTML file is opened, you have all the empty spaces you need.

Now let's say you choose, "No Image" and you don't use any text. What photoshop does is fill it with an invisible spacer. This spacer can be resized later when you tweak the HTML File.

So:
- Save for Web
- New Window opens with it for options.
- Take the slice tool, double click on any text area slice
- New Pop Up Window comes up
- Choose "No Image" in drop down menu.
- Fill in text area and choose it's position (ie. left, top)
Pick slices with solid colors and choose "no image" again and fill with eyedropper color from the picker on bottom right hand corner.

One last thing, when you finally save, check your fields at the bottom of the save box, and pic, HTML and All Slices.

I hope this helps you out a bit, if not, you can email me and we can have a go at it.

Cheers!

I don't think anyone mentioned that you have to slice the image, too. You have to use the slice tool to partition it off into sections. Then you can delete areas and add text later.

Also, I don't know why people use Imageready for saving slices as sites. Photoshop works just as well, except for the few times when you need some slices .gifs and others .jpgs. But how often is that?

cperkins: Whats the point? Photoshop is professional grade - just use that. I havent used that program you mentioned, but I don't think it is as flexible as Photoshop. Very few of us here use programs that are "as easy as 1-2-3..." - its too noobish.

tom

The point is productivity and freedom.

Using PhotoWebber is _fast_. You can take a Photoshop design, complete with buttons, rollover layers, popup menus, etc. and have the slices and HTML in a matter of seconds. Great for throw-away comps as well as production.

Sometimes designs are limited to boxy rectangle-like arrays of buttons and graphics and menus not for the sake of the design but for the sake of slicing. Lots of semi-overlapping circular popup menu items are not easy to slice - it's a difficult puzzle. But, if the computer can do it for you (as it can when you use PhotoWebber), then you don't have to limit your design for the wrong reasons.

You should try it out - PhotoWebber does a lot, including some very hairy HTML programming, and it's output works under all major (and minor) browsers including Opera, Safari, and Netscape 4.

That said, PhotoWebber's age is showing. It does XHTML and inline CSS, but other than that it hasn't kept abreast of modern web page techniques.

And you are mistaken about the Nooby part. Web page design and web page programming is where the action is. But slicing, graphic export, and table juggling is mind numbing monkey work. PhotoWebber won't design a page for you, and beyond layout, buttons, and menus, won't program your page for you. But it will bridge the gap between _real_ design and _real_ programming. PhotoWebber let's you spend your time well, on the cool things.

Chris

P.S. I am passionate about this because I am one of the authors of PhotoWebber and PSD2FLA. I'm also working on a new completely different version of PW that does the same sort of thing but in a new direction. http://www.medialab.com
http://www.photowebber.com

Web page design and web page programming is where the action is. But slicing, graphic export, and table juggling is mind numbing monkey work.

according to this statement, Frontpage and notepad are equally powerful site coding programs.

Which of course is absolute crap. Notepad does absolutely nothing for you. You have to know the language, and you have to do everything. Frontpage is just drag and drop. You don't have to know jack to make a site with it. And look.. generally, sites that are made with frontpage are generally crap whereas sites with notepad can be beautiful.

the point is that coding is just as much of an art as the graphic part, and thus it requires just as much freedom in order to make something creative. After all, there are more than one way to code a design, and thinking about which will do it the most effectively, the most efficiently, and etc etc is an important part of the webdesign.

saying that the coding is "monkey work" is even insulting to people who handle backend/frontend coding as a living. i mean, come on. no need to put down people like that.

honestly if you're advertising your product I suggest you take a different approach.. you're not gonna get many customers by calling coding "monkey work"...

I agree, coding a page _is_ an art, and I said as much:

"Web page design and web page programming is where the action is. But slicing, graphic export, and table juggling is mind numbing monkey work. "

What I'm referring to "monkey work" is a very specific subtask of web page design. In this particular case, if you have _already_ laid out a design in Photoshop, and if you are simply trying to reproduce that same design in HTML, then the final output of slice, export, and table creation is inevitable and automatable. And, if you are doing by hand something that can be done equally well (if not better) by machine, than you are doing monkey work.

I am not implying a carte blanche endoresement of mindless cookie cutter tools like FrontPage.

PhotoWebber is a very specific tool for a very specific job, but it does that job very well and has a lot of features focussed on making its output as useful as possible. It doesn't replace web coding, it _enables_ it.