...

View Full Version : .psd to html help slicing gone bad



dantra
08-07-2005, 02:34 AM
I designed a template in Photoshop but cannot get it to slice properly. Iíve been at it for days now. (I can hear some of you laughing at me from here) Iíve read the help files and also read some tutorials, wellÖ the ones that I can find, and I still canít get it to work for me. It seems that whenever I edit the template with text it turns white and my design is eliminated, what gives?

I would like to keep all three images, the header and the two smaller pictures on the bottom left in jpeg format, quality at about 80. The rest of the template I would like to keep in html.

Here is what I got so far:
http://img283.imageshack.us/img283/2433/blanktemplate0ye.th.jpg (http://img283.imageshack.us/my.php?image=blanktemplate0ye.jpg)

This is where I am trying to edit with text:
http://img56.imageshack.us/img56/6664/mytemplate9ap.th.jpg (http://img56.imageshack.us/my.php?image=mytemplate9ap.jpg)

Any suggestions or help would be great. I know for alot of you this is a piece of cake. but I just can't figure this out.

Pennimus
08-07-2005, 04:41 PM
Although I don't fully understand your problem, is it possible that you are simply exporting the sliced graphic as a table/html straight from photoshop, and then trying to enter text into the table? Because photoshop I believe sets up the images as actual images in the table, rather than background images. In which case the text could well end up replacing the image if you click in that table area and start typing.

Otherwise I think you'll have to elaborate.

dantra
08-08-2005, 04:37 AM
Although I don't fully understand your problem, is it possible that you are simply exporting the sliced graphic as a table/html straight from photoshop, and then trying to enter text into the table? Because photoshop I believe sets up the images as actual images in the table, rather than background images. In which case the text could well end up replacing the image if you click in that table area and start typing.

Otherwise I think you'll have to elaborate.


Yes, that is exactly what is happening. How do I preserve my templates background and still edit it with text. I have tried all I know to do and it seems that slicing it properly eludes me. Can anyone direct me to a tutorial that shows images and also explains how to slice it and save it so I can edit it with text?

Again, if this sounds remedial to you guys I apologize. I just canít seem to get it.

_Aerospace_Eng_
08-08-2005, 05:45 AM
What version of photoshop do you have? I personally never use the html that photoshop gives because its never good. When you save for web, change the default saving options, you have one option to save as background images.

dantra
08-08-2005, 07:22 AM
Aerospace_Eng_, I have cs2 thanks for your help but I tried that as well and it didnít help either. Dude it has to be me, I think I am overlooking one step thatís mucking everything up. This is soon becoming a pain in my ***.

Any other suggestions?

mrruben5
08-08-2005, 10:30 AM
http://www.slicingguide.com

You could use that as a start.

davulf
08-08-2005, 08:13 PM
I just delete the file, set cell background, and reselect the file... seems to work for me.

dantra
08-08-2005, 08:24 PM
http://www.slicingguide.com

You could use that as a start.

Thanks, just what I was looking for.


I just delete the file, set cell background, and reselect the file... seems to work for me.

:confused: :confused: :confused:

Pennimus
08-08-2005, 11:43 PM
The root of your problem is using the HTML that photoshop gives you. While you might be able to solve this problem some other way, you might as well get out of that habit now. When you export your slices for web, just set it to save as images only, not images and HTML. Then assemble the table yourself with the images as backgrounds.

If you don't know HTML, then this is a pretty good place to start.

Then again, if you don't know HTML, you should probably start learning CSS layouts instead of tables anyway!

I assume you are using a WYSIWYG editor, which one?

dantra
08-09-2005, 12:46 AM
The root of your problem is using the HTML that photoshop gives you. While you might be able to solve this problem some other way, you might as well get out of that habit now. When you export your slices for web, just set it to save as images only, not images and HTML. Then assemble the table yourself with the images as backgrounds.

If you don't know HTML, then this is a pretty good place to start.

Then again, if you don't know HTML, you should probably start learning CSS layouts instead of tables anyway!

I assume you are using a WYSIWYG editor, which one?


Thanks for the advice, especially assembling the table with the images as background (different approach from most). I'm using Dreamweaver MX 2004.

dispector
08-09-2005, 12:26 PM
I have the weirdest way of coding layouts...I duplicate the .psd, merge the layers then use the marquee tool. I select what I want to be an image, ctrl+x, ctrl+n, ctrl+p, file>save for web. Then, I open up Dreamweaver and table the hell outta it. (I said that to piss off CSS enthusiasts, lol).

Thatís the easiest way for me to do it, plus it helps me see what parts of the layout I have in a different image and it gives me different ideas for the coding strategie as I go along.

(P.S....very stylish layout, I like it)

And if you donít feel like coding it...ill do it for free. I LOVE CODING LAYOUTS

Tristan Gray
08-09-2005, 01:48 PM
As much as I am a CSS enthusiast... I am first and foremost a Photoshop and graphics enthusiast and I must say that for a lot of stuff involving slicing up templates I might still use tables. Probably not though just because I've spent so much time with CSS lately that it is much fresher in mind. But the one good thing about tables is that they are displayed almost universally the same no matter what browser.

dantra
08-09-2005, 09:48 PM
dispector, I just may give that idea a go. Oh,thanks for the compliment about the site and for your your generosity. :thumbsup: :cool:



I am first and foremost a Photoshop and graphics enthusiast. Exactly... Tristan Gray notices my death grip on Photoshop. :D

_Aerospace_Eng_
08-10-2005, 02:27 AM
Using tables for layout is not recommended. My current job is to take templates that were made in tables using Photoshop and convert them to tableless layouts. If you don't know CSS, then its time that you start taking the step forward. Tables were never meant for web design, they were meant to display data.

Tristan Gray
08-10-2005, 02:56 PM
Yeah, I hear the standards noise all the time and there is certainly a truth to it. I never use tables except for tabular data now, but I do often find myself using old stuff like target="_blank" because although it might not be standards compliant it is less javascript on my page.

I see all the stuff about accessibility and it makes me laugh. Putting a 9000px negative margin bit of text for screen readers? Yeah, the cure is sometimes worse than the disease. I say support standards so far as they support you in what you want to do but no further. A list apart has a great little article written by the WC3 quality assurance team about custom doctypes and the standards zealot phenomenon.

What I am saying is that for slicing up a fully browser compatible photoshop layer I can think of instances where tables would do a better job. Maybe that wasn't their intended use, but it would be at least as foolish to do something a more complicated and troublesome way if it can be done more simply. Which is the idea behind standards. I am a big fan of CSS but some people absolutely refuse to acknowledge that it still has limitations that need work. Like the collapsing margins thing, ugh. I would rather not validate and have a site that displays properly cross-browser now than validate and use a bunch of wonky hacks.

dawn
08-10-2005, 03:09 PM
I don't know if any of you are aware of this but you can get Photoshop to generate CSS rather than tables.

In the save box go to Settings > Custom

Go to the Slices settings and click on Generate CSS

This helped me to understand CSS a lot without having to build a site from scratch in CSS.

_Aerospace_Eng_
08-10-2005, 06:23 PM
But it generates it using absolute positioning. Absolute positioning really isn't the best thing because if it isn't used properly it can give you problems in different resolutions.

mrruben5
08-11-2005, 12:06 PM
I have the weirdest way of coding layouts...I duplicate the .psd, merge the layers then use the marquee tool. I select what I want to be an image, ctrl+x, ctrl+n, ctrl+p, file>save for web. Then, I open up Dreamweaver and table the hell outta it. (I said that to piss off CSS enthusiasts, lol).

Thatís the easiest way for me to do it, plus it helps me see what parts of the layout I have in a different image and it gives me different ideas for the coding strategie as I go along.

(P.S....very stylish layout, I like it)

And if you donít feel like coding it...ill do it for free. I LOVE CODING LAYOUTS

You should just use the slice tool, you can select safe for web and then just user defined images. Don't use the generate css option, absolute positioning should be used only when needed.

Tristan Gray
08-11-2005, 01:48 PM
None the less it is good to see that Adobe made an effort since it would have been more or less impossible to generate a perfect CSS construction. Maybe in future revisions the CSS it generates will be useable (doesn't bet on it).

dispector
08-15-2005, 06:32 AM
i dont know if you still need help with this...or if you want me to code it or what.

post something to let me know...

dantra
08-17-2005, 04:00 PM
Dude I appreciate your help but I finally got it working. Thanks :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum