Rounded Corners for images problem

by David

Posted: 11 years ago 6 replies

WEB DESIGN

I need to make rounded corners of images, from what I've been able to garner: a PNG can have rounded corners, a JPEG can not

the work around is said to be to add a border to the rectangular jpeg, then round the edges of said border, then color the border the same as the web background

(effectively creating round corners of an object that really has 90° right angles)

So... I load up my rectangular image... then..
what are the steps to create a border (one that will permit me to do as described above)?

I do not have Photoshop installed:
I do have the free Photoscape
and Xara Web Designer 9 Premium

(The youtube tutorials I've been able to find thus far, seem to be for older versions of Xara software and/ or they include some kind of ClipView tool that apparently the Web Designer does not include
I might have gotten bum information: I probably should have purchased Xara Photo and Graphic Designer MX 2013 but instead I bought Web Designer 9 Premium (someone told me all of the graphics stuff is included in the web versions)

#corners #images #problem #rounded

lem0n

11 years ago

If you search 'rounded corners for jpeg' the first result you get is RoundPic - rounded corners for avatars and images [web 2.0 style]

Would that fit your need?

But if you need to do it in a image editor, try doing a selection with rounded corners (smaller than the original image), then invert the selection so it selects the outside and fill with background color. Photoshop has the 'select inverse' option and I think other editors should have a similar one too. http://www.devppl.com/forum/how-do-i...ro-vt3385.html

Another way would be using css3 rounded corners but it would only work for modern browsers: http://flauntyoursite.com/rounded-co...ss-only-trick/

Thanks
1 reply

{{ DiscussionBoard.errors[8068533].message }}

David

11 years ago

didn't work, thanks for replying though

this graphic is still rectangular and does not have rounded corners (yet)

https://www.dropbox.com/s/p3wo1tu2wj...1368385992.jpg

Thanks
1 reply

Signature

David Bruce Jr of Frederick Web Promotions
Lawyer Local SEO - |

{{ DiscussionBoard.errors[8068557].message }}

lem0n

11 years ago

Originally Posted by David

didn't work, thanks for replying though

this graphic is still rectangular and does not have rounded corners (yet)

https://www.dropbox.com/s/p3wo1tu2wj...1368385992.jpg

does it have to be a jpg? I'll round it for you. One min.

What color do you want the corners to be? As in what is your bg color?

Thanks
1 reply

{{ DiscussionBoard.errors[8068573].message }}

David 11 years ago

background color is: #31b0de

it is destined to go on this site:
Car Detailing in Frederick MarylandCar Detailing in Frederick MD

there are a few 90° corners that I'm wanting to round as it was suggested to me that the sharp angles had a "jarring" effect
and thanks
- Thanks
Signature

David Bruce Jr of Frederick Web Promotions
Lawyer Local SEO - |
{{ DiscussionBoard.errors[8068609].message }}

lem0n 11 years ago

PM sent with rounded image!
- [ 1 ] Thanks
{{ DiscussionBoard.errors[8068621].message }}
SmallBizWebsites 11 years ago

You shouldn't try to match ANY background color- you should make the rounded part of the image the color you have defined as transparent. Then it will work no matter what the background color is, or if the background color changes or if it is a pattern. That means the image has to be a .png or a .gif
- Thanks
{{ DiscussionBoard.errors[8072654].message }}

Rounded Corners for images problem

Trending Topics

Google Ads, landing pages, and Clickbank links

Carry out better target audience research

YouTube gets shopping display tools and affiliate partnership updates

Membership area with multiple income streams

A Very Strange Internet Problem