SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How are those curves at each corner of a table created? You know, sometimes the navigation bar has each corner curved or sometimes it's almost the whole page that has each corner curved. How is it done? Are they graphics or this something else?
    fade

  2. #2
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    They are graphics. It isn't hard to create something like that either. Determine the height on the cell you want to put the curve in. Create a new image with that height, you can go as wide on it as you want. Then just create like a circle or rounded rectangle(depends on what program you're using) and that should be it. Just make sure that your background on the image is the background color of the rest of the page or it's gonna look a little funny.

    speedracer

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2000
    Posts
    41
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks.

    I'm using Paint Shop Pro and I guess it can be done in there? I find it a little tricky when I drag a circle over it.
    fade

  4. #4
    SitePoint Enthusiast
    Join Date
    Jun 2000
    Location
    WA
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using PSP just create a rounded rectangle. (go get some cofee, this is long-winded)

    1. Start with a new image (about 300x300) with the background color you need.

    2. Select the Preset Shapes tool and pick Rounded Rectangle. Select filled, anti-alias and vector. This opens a new layer to draw the rectangle on. This allows you to change background colors without worrying about any anti-alias artifacts showing up later.

    3. Draw a small rectangle (50x50 or so) and drag the corners until you get the corner radius you want.

    4. Select the Vector Object Selection Tool (arrow in square icon) and left-click outside your rectangle.

    5. Save the image in PSP format. Once it's saved merge all the layers together.

    6. Use the Selection Tool (rectangle icon- rectangle, 0 feather, anti-alias not checked) click and select a corner from the image. Copy it (Ctrl-C or Edit|Copy) and paste it as a new image (Ctrl-V or Edit|Paste|As New Image).

    7. Export the new corner image as a transparent gif using the export wizard. You can go cut the other corners out if you want, but being lazy, I just flip & mirror the one new image and re-export it for the other three corners.

    8. Close the original rectangle image and make sure you select "no" when it asks if you want to save the changes. This preserves the layers for later use.

    If you decide the radius is wrong you can go back to the original, change the size of the vector and repeat the steps above. You can add as many layers to the original with different color rectangles as you want.

    Need green corners? Add a green rectangle to a new layer and there you go! Change the background color to match the page background and you always have corner that blend into the page background properly.

    Resist the urge to flood fill the first rectangle with a different color as the anti-alias will show up around the edges, destroying the transparent effect.

    You can also use the slice tool in the beta release of PSP 7 to slice up your image to create the corners and table code in one shot. I couldn't get it to save gifs though. I had to save as jpg and export those as trans gifs.


    hth


Bookmarks

Posting Permissions

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