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.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post

    Slicing Question

    I really don't understand how you are supposed to go about slicing a PSD to prep it for coding. When it comes to things such as navigation bar slicing, backgrounds, etc. I really get confused. The example I am currently working with is: http://tinypic.com/view.php?pic=2ij3r6q&s=6

    Code is something that is straight forward... I can look at a book and find things I need, but slicing has given me the most trouble. For example, How do I capture the background of this PSD? Do I remove ALL text besides the navigation and then cut it up in parts, and then just arrange the text in my XHTML/CSS code later?

    Thanks for the help!

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,865
    Thanks
    6
    Thanked 1,029 Times in 1,002 Posts
    What would be really cool would be to see the source PSD to know how the layers are arranged. I suppose you have that gradient background (the brownish color) on a layer and the “abstract” graphic on another one?

    First you would export a one pixel wide strip of the brown gradient. You could make a slice (one pixel wide) at the right side, where nothing is in the way of the background from the top down until the end of the gradient is reached (i. e. where the color stays what it is). This would be the “back-background” that repeats horizontally across the top.

    You would then hide all layers except the one that has the abstract background graphic (you can even leave the gradient layer visible). Then you export that image. This would eventually be layered over the “back-background” in the HTML document. For example the 1px gradient image could be applied to the <html> element (repeat-x and background color set to the color of the bottommost pixel of the gradient (i. e. gradient end color)) and the abstract graphic can be applied to the <body> element.

    Next, you export a 2×2 image with that semi-transparent layer which you use for the navigation background (repeating bg). This wouldn’t quite work in IE 6 which doesn’t support alpha transparency natively but there are workarounds. In all other browsers this is no problem.

    And that’s it for this one. The rest looks like solid colors.

  • Users who have thanked VIPStephan for this post:

    JJackson (02-04-2010)

  • #3
    New Coder
    Join Date
    Feb 2010
    Location
    North Carolina
    Posts
    71
    Thanks
    26
    Thanked 1 Time in 1 Post
    Can't find the PSD to that one... but I think I see what you're saying.

    Thanks!


  •  

    Posting Permissions

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