Edges on Slicing .PSD

Discussion in 'HTML & Website Design' started by jezzz, Feb 12, 2009.

  1. #1
    Hey!
    Friends

    I recently coded a simple theme from photoshop to dreamweaver which i designed myself. If you see here you may find Sharp Edges visible on all four sides of white rounded rectangle.

    I dont know why i m getting it! Firstly i used transparent layer to code theme.

    If i add any color in background or any image the edges looks visible!


    Someone please help me!


    Regards
     
    jezzz, Feb 12, 2009 IP
  2. fdoze

    fdoze Peon

    Messages:
    205
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Are you using Firefox or Photoshop?

    Thanks.
     
    fdoze, Feb 15, 2009 IP
  3. jezzz

    jezzz Notable Member

    Messages:
    4,884
    Likes Received:
    190
    Best Answers:
    0
    Trophy Points:
    200
    #3
    I m using both browser IE & FF

    I designed theme in Photoshop! its coded in HTML
     
    jezzz, Feb 18, 2009 IP
  4. fdoze

    fdoze Peon

    Messages:
    205
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    You should use anti-alias on you edges. Also provide correct color background or alpha when exporting slices.
     
    fdoze, Feb 19, 2009 IP
  5. eclipsemedia

    eclipsemedia Peon

    Messages:
    42
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I've done more rounded corners then I can shake a stick at. So I know exactly how to make great corners.
    This site will show you an example of my round corners http://www.actionposters.ca/

    This is the wrong way in my opinion.
    Creating a rectangle with the Marquee then Select -> Modify -> Smooth and set to 10. even if you feather, you will still get sharp edges.

    The way I do them.
    Create the rectangle and fill it with desired color. Use the Elliptical Marque Tool (circle) set the style to set size. Choose the size (ie 20 px by 20px)
    Click on the rectangle to make the marque, line it up flush to the corner of the rectangle, Select Inverse, then use the erase tool to delete the outer corner reveiling a rounded edge. ONLY make one delete pass. The more you pass the more it will get jagged.

    Now if you knew all of this and still get the jagged edge then you must of saved the corner image as a gif and set the background as transparent. Gifs don't do a very good job for transparencies. All todays browsers support PNGs so just save them as PNG 24 with the background layer check off (so its transparent)

    Although PNGs are generally larger file size then both gif and jpg. If you use them sparingly for corners, then you will be ok. I hope this helps
     
    eclipsemedia, Feb 19, 2009 IP