Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 15
  1. #1
    Senior Member whippetkid's Avatar
    Join Date
    May 2010
    Location
    Scotland
    Posts
    123
    Member #
    22044
    Hi,

    I am looking to create a rounded corner rectangle but only as an outline and export as a png for use as a div background image in Dreamweaver, I can't work out how to do this? Can I put an angled corners on the marque tool?

    I have created this very thing in Fireworks but I am getting no smoothness to the line with the corners being much thicker as the attached image shows...any help with that might solve things!?

    Thanks
    Attached Images Attached Images

  2.  

  3. #2
    WDF Staff George Dolidze's Avatar
    Join Date
    Apr 2011
    Location
    Irvine, CA
    Posts
    2,487
    Member #
    27540
    Liked
    416 times
    Use the rounded rectangle tool. There's a tool bar up at the top, and you can type in the degree of the roundedness.
    Alternatively, use can use the border-radius property in your CSS to make rounded corners on pretty much all elements (images, divs, etc)
    My freelancer website: DolidzeDesign



    You only need a parachute if you plan on skydiving twice.

  4. #3
    Junior Member hantaah's Avatar
    Join Date
    Jul 2011
    Location
    UK
    Posts
    19
    Member #
    28404
    I also use fireworks and then find it very difficult to do similar things in photoshop as I'm just so accustomed to fireworks now.

    You could try doing it in fireworks first ( as it is so easy to use autoshape properties )

    Then........

    put fireworks and photoshop side by side and drag the object from fireworks to the photoshop document. Let me know if that works for you

  5. #4
    Member
    Join Date
    Aug 2011
    Posts
    64
    Member #
    28942
    Liked
    8 times
    I know this thread is a little bit old BUT

    I create the rounded rectangle then select the pixels, contract 1px (or however thick you want it) and delete the center.

  6. #5
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Everyone here has given very good ideas.
    I however suggest using Adobe illustrator... Dont worry its not that complicated. Its very, very similar to fireworks. Ai is mainly used for vector creation so you should have no problem creating the style you are after and it scaling to any size you want

    Hope this also helps
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  7. #6
    Senior Member chrisHPZ's Avatar
    Join Date
    Aug 2011
    Location
    Ohio
    Posts
    133
    Member #
    28760
    Liked
    31 times
    Quote Originally Posted by whippetkid, post: 211321
    Hi,

    I am looking to create a rounded corner rectangle but only as an outline and export as a png for use as a div background image in Dreamweaver, I can't work out how to do this? Can I put an angled corners on the marque tool?

    I have created this very thing in Fireworks but I am getting no smoothness to the line with the corners being much thicker as the attached image shows...any help with that might solve things!?

    Thanks
    You can use the border-radius CSS properties for this sort of thing. If there's one thing that important with web design it's knowing when to avoid images if you can do the same with code. This is one of those cases. Code is much less taxing than images are when it comes to kilobyte size. Here's a website that talks about how to implement the border-radius in CSS. Don't forget you can also assign different properties to the <div> containing the border-radius code such as border color, div background, etc.

    http://www.css3.info/preview/rounded-border/
    m3n0tu18 likes this.

  8. #7
    WDF Staff m3n0tu18's Avatar
    Join Date
    Jul 2011
    Location
    Devon, UK
    Posts
    1,467
    Member #
    28473
    Liked
    265 times
    Quote Originally Posted by chrisHPZ, post: 217620
    You can use the border-radius CSS properties for this sort of thing. If there's one thing that important with web design it's knowing when to avoid images if you can do the same with code. This is one of those cases. Code is much less taxing than images are when it comes to kilobyte size. Here's a website that talks about how to implement the border-radius in CSS. Don't forget you can also assign different properties to the <div> containing the border-radius code such as border color, div background, etc.

    http://www.css3.info/preview/rounded-border/
    Good idea there. The only issue is occasionally css3 doesn't work with some browsers *Cough - Internet Explorer*
    If you like my comments to your thread please click the LIKE button

    Check out my portfolio: Here!
    View my company Facebook Page
    View my company Website

    <<Plrease ignoer my typo's I have isdexlyia>>

  9. #8
    Member christopher_b's Avatar
    Join Date
    Aug 2011
    Location
    Pretoria, South Africa
    Posts
    69
    Member #
    29042
    Liked
    7 times
    People, you are giving suggestions, not actually helping the guy out!

    He most probably knows about border-radius and all that.

    Okay to do this on Photoshop is simple.
    You use the rounded rectangle tool (u), Select a bright color to fill the object, then you give it a stroke with the layer styling tools. ( let me know if you don't understand )

    Then you Convert the object to a Smart Object and Rasterize the object and use the wand tool to select the filled in color, you delete that color and and then you'll have a rounded rectangle with only a colored border.

  10. #9
    Senior Member chrisHPZ's Avatar
    Join Date
    Aug 2011
    Location
    Ohio
    Posts
    133
    Member #
    28760
    Liked
    31 times
    Quote Originally Posted by m3n0tu18, post: 217621
    Good idea there. The only issue is occasionally css3 doesn't work with some browsers *Cough - Internet Explorer*
    The newest version of IE9 does support this sort of code. Last week I was fumbling around with Dw, liquid layouts using percentages and ems. That's a whole other story. Anyway, I added a few divs using the border radius code and IE9 displays it just fine. I would upload my files here, but WDF doesn't allow for html and css uploads.

  11. #10
    Senior Member chrisHPZ's Avatar
    Join Date
    Aug 2011
    Location
    Ohio
    Posts
    133
    Member #
    28760
    Liked
    31 times
    Quote Originally Posted by christopher_b, post: 217647
    People, you are giving suggestions, not actually helping the guy out!

    He most probably knows about border-radius and all that.

    Okay to do this on Photoshop is simple.
    You use the rounded rectangle tool (u), Select a bright color to fill the object, then you give it a stroke with the layer styling tools. ( let me know if you don't understand )

    Then you Convert the object to a Smart Object and Rasterize the object and use the wand tool to select the filled in color, you delete that color and and then you'll have a rounded rectangle with only a colored border.
    We are helping this guy out by giving him more efficient options. Graphics are one thing, but when coding options can achieve the same thing as an intended graphic, and save time in the process, then multiple things are learned.
    m3n0tu18 and Ronald Roe like this.


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 02:59 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com