rounded corners 2006. updated

Dec 30, 2005 04:42



note: usually when i make these tutorials i am thinking in a broader sense for a website or portfolio where everything is controlled, if you are anal about how your friends page will look, this may not work well with you.



select the rounded rectangle tool.
make sure your rectangle tool is on PATHS not shape or fill pixels.
you can change your radius to any size. the example photo is 20 px.


30 px 50 px



draw out your path. make sure to leave an even space on all 4 sides.

otherwise corners will look like this:


^ notice that there is no smooth transistion between points.



then just right click with either direct select or path select arrows, and make selection.

a tiny window will pop up asking if you want to feather and make new selection. if you feather you may come out with a cool effect


but unless you want that, just leave it at 0, then press ok.    



once your path is selected, inverse it. shift + ctrl + i or select > inverse.

create a new layer above that and erase, OR use your fill bucket to fill it with another color of your choice...
note: if you decide not to create a new layer over your photo, just remember that you wont be able to edit the erasing or fill bucket actions once you've made changes.

and you're done!
once you master this, it should only take you about 1 minute to do. but if you want the psd template, just ask me and i'll email it or something.









resize photo first. draw path. make selection.
inverse it. fill in with contrasting color.

save for web at GIF 256. select all colors that make up contrasting color and make each transparent. one by one.

and the final icon!






UNLOCKED means that your photo is above another layer that is transparent. highly recommended.




resize photo first. draw path. make selection.
inverse it. press "delete" to delete selected pixels.

save for web at PNG-8bit. then save. don't worry, you can also save it as a GIF, it's all about preference.

and the final icon!

i was real bored and just finished working on some photos, so i made this.

****included: rounded transparent corners for icons****

add this entry to your memories: rounded corners 2006.
Previous post Next post
Up