|
|
| Author |
Message |
MattInSD73
Joined: 02 Sep 2011
Posts: 4
Location: United States
|
 Posted: Fri Sep 02, 2011 1:39 pm Post subject: solid shapes with rounded corners |
 |
|
Hi! Welcome to my first post on this forum site!
So I'm having a bit of difficulty getting photoshop to behave. What I want to do is recreate this image but instead of creating the rounded corner shap on black, I want to do it over transparency. I'm doing this for the web and I want to be able to change the color behind the image in the future, without having to re-edit this widget.
When I try to recreate the shape (40x40px), I get estimations of the horizontal and vertical edges - which are unpalatable at this low resolution. I really just want the corner estimated and I can't figure out how to accomplish this.
Thanks in advance,
~Matt |
|
|
|
|
 |
jerryb4417
Joined: 20 Dec 2008
Posts: 710
Location: Oklahoma
PS Version: photoshop cs5
OS: win7 pro 64 bit, i7-3.2g, GTS 450,
|
| Posted: Fri Sep 02, 2011 2:06 pm Post subject: |
|
|
hi,
don't what size your image is your working with other than your sample says 300 pixel
now one way to do this.....
new file and it transparent
click ractangle rounded tool
there at the top put in the radius for the corners
and then make your rectangle ..
you'll find the corners rounded and transparent....
a variation of this is click the round racktangle tool
then at the top click the the pen button and then draw your
box , this will make a path without the color fill ...
now when you go to save in order to maintain the transparency on the corners
make sure you save either in gif or png... they retain transparency...
now it seems like i was reading a few weeks ago you can accomplish the rounded corners with htm code in your browser.... but i am unfamiliar with that..
oh ialmost forgot... there was another thread on the board with similar and different suggesion on doing it...
http://www.photoshopforums.com/please-help-me-round-my-image-corners-vt22922.html?highlight=rounded+corners |
|
|
|
|
|
MattInSD73
Joined: 02 Sep 2011
Posts: 4
Location: United States
|
| Posted: Fri Sep 02, 2011 2:14 pm Post subject: |
|
|
| jerryb4417 wrote: | hi,
don't what size your image is your working with other than your sample says 300 pixel
|
40x40pixels bub. If you have zoomed way into an image in photoshop in the past, you'll recognize that grid as an automatic function of photoshop.
I am using the shape tool, it's just not behaving nicely at that resolution. I'm going to try starting very large and when I "save for web" to shrink it down to 40x40 and see if that works! Thanks again. any other ideas would be just as appreciated.
I'm running photoshop CS5 and I would say I am an advanced user. I've taken Photoshop I at UCSD extension, but we didn't cover this sort of web-widget iconography.
Thanks,
~M |
|
|
|
|
|
jerryb4417
Joined: 20 Dec 2008
Posts: 710
Location: Oklahoma
PS Version: photoshop cs5
OS: win7 pro 64 bit, i7-3.2g, GTS 450,
|
| Posted: Fri Sep 02, 2011 3:13 pm Post subject: |
|
|
hi,
i definitely would start out large...
don't forget you need to save it in gif or png if you want those corner transparent...
i did a little testing starting off with a 300x300 ...
i used a radius of 30 .... by the time i resized to 40 pixels i couldn't really see the the round edge... so i change to about 75-100 for a radius... and then shrink to to 40x40 the rounded edges were noticble.. |
|
|
|
|
|
MattInSD73
Joined: 02 Sep 2011
Posts: 4
Location: United States
|
| Posted: Fri Sep 02, 2011 3:26 pm Post subject: |
|
|
| jerryb4417 wrote: | hi,
i definitely would start out large...
don't forget you need to save it in gif or png if you want those corner transparent...
i did a little testing starting off with a 300x300 ...
i used a radius of 30 .... by the time i resized to 40 pixels i couldn't really see the the round edge... so i change to about 75-100 for a radius... and then shrink to to 40x40 the rounded edges were noticble.. |
Yes, that is a problem, you then have to scale your corner by the same factor that you scale the rest of the image. I can't help but think there is some setting I'm missing or that photoshop is the wrong program to use -- Illustrator, perhaps?
~M |
|
|
|
|
|
MattInSD73
Joined: 02 Sep 2011
Posts: 4
Location: United States
|
| Posted: Fri Sep 02, 2011 3:53 pm Post subject: |
|
|
Ok, so I found a way to do what I needed to do. I scaled everything up by a factor of ten and then when I saved for web, I set the size back down that factor of ten. Works great! I was just hoping I wouldn't have to kludge what I wanted out of the program.
Thanks for your help!
~M |
|
|
|
|
|
jerryb4417
Joined: 20 Dec 2008
Posts: 710
Location: Oklahoma
PS Version: photoshop cs5
OS: win7 pro 64 bit, i7-3.2g, GTS 450,
|
| Posted: Fri Sep 02, 2011 5:53 pm Post subject: |
|
|
hi,
the thing is your working with pixels instead of vectors...
i was thinking of another meathod....
although i don't know if that would help in your case..
and that is pick the drawing tool but also pick there at the top the
path button and draw you box ... and you have a vector path..
from that point you can i think more easily transform the path to the
size you want...
oh and your way ahead of me in knowing photoshop..... i am just a novice and self taught at that.. smiling...
good luck on your project |
|
|
|
|
|
|
