Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 21
  1. #1
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts

    .psd to html help slicing gone bad

    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:


    This is where I am trying to edit with text:


    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.
    Last edited by dantra; 08-07-2005 at 01:49 AM.

  • #2
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pennimus
    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.

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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?

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    http://www.slicingguide.com

    You could use that as a start.
    CATdude about IE6: "All your box-model are belong to us"

  • #7
    New Coder
    Join Date
    Aug 2005
    Posts
    22
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I just delete the file, set cell background, and reselect the file... seems to work for me.

  • #8
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by mrruben5
    http://www.slicingguide.com

    You could use that as a start.
    Thanks, just what I was looking for.

    Quote Originally Posted by davulf
    I just delete the file, set cell background, and reselect the file... seems to work for me.

  • #9
    Senior Coder
    Join Date
    Jul 2005
    Location
    UK
    Posts
    1,051
    Thanks
    6
    Thanked 13 Times in 13 Posts
    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?

  • #10
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Pennimus
    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.

  • #11
    New Coder
    Join Date
    Jun 2005
    Posts
    96
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    later

  • #12
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.

  • #13
    Regular Coder
    Join Date
    Aug 2005
    Posts
    132
    Thanks
    3
    Thanked 0 Times in 0 Posts
    dispector, I just may give that idea a go. Oh,thanks for the compliment about the site and for your your generosity.


    Quote Originally Posted by Tristan Gray
    I am first and foremost a Photoshop and graphics enthusiast.
    Exactly... Tristan Gray notices my death grip on Photoshop.

  • #14
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #15
    Regular Coder
    Join Date
    Jul 2005
    Location
    Halifax, Nova Scotia, Canada
    Posts
    392
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Once I thought I was wrong but I was mistaken.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •