[Eric]

Hello,

I need to round the corners of the flash pics/slides at the very top of this page. http://goo.gl/ZVt2U

I believe to do this I need to use an image on the span nested in #intro span {yada}. #intro div surrounding the flash has fixed width/height of 600 width 139 height (same as the flash). So how do I make this image with a transparent center and ONLY corners? Thanks!

[coollew]

Could you just make the flash movie with rounded corners?

[Eric]

no no flash editor.

[coollew]

Eric:
I'm no flash pro by any means but ive been dabling
I gave it a shot for ya, shoot me an email from my profile and ill send ya the swf.

[Eric]

Cool thanks!!

[Ben]

If you're doing this with photoshop, I would start with a square image with one layer. That layer would initially be filled with white or whatever your background color is... and then you would use the circle select tool to remove the center of the square, leaving only the corners (hold down shift to ensure the selection is a perfect circle.) Then use the eraser to remove any additional corners that you don't need.

Make sense?

[Eric]

Ben, on 20 March 2011 - 09:49 AM, said:

If you're doing this with photoshop, I would start with a square image with one layer. That layer would initially be filled with white or whatever your background color is... and then you would use the circle select tool to remove the center of the square, leaving only the corners (hold down shift to ensure the selection is a perfect circle.) Then use the eraser to remove any additional corners that you don't need.

Make sense?

Thanks Ben. However I cant find a circle select tool? I was attempting to do this with the rounded rectangle tool. Are you talking about the elliptical marque tool?

[Eric]

coollew, on 20 March 2011 - 09:06 AM, said:

Eric:
I'm no flash pro by any means but ive been dabling
I gave it a shot for ya, shoot me an email from my profile and ill send ya the swf.

Hello, so I tested the swf you sent. Thank you! But it has a white background, no borders, and it shows a loading bar initially. If you could add that stuff that would work. The rounded corners should be around 5px.

[Ben]

Eric, on 20 March 2011 - 11:30 AM, said:

Thanks Ben. However I cant find a circle select tool? I was attempting to do this with the rounded rectangle tool. Are you talking about the elliptical marque tool?

Yeah, sorry.

You could also do it with the rounded rectangle tool -- put the rounded rectangle in place, right click on it, and select "Make selection." Then, delete the rounded rectangle layer, and delete the selected area from the background layer.

[Eric]

Ok thanks Ben I will give that a go tommorrow morn. I havn't used PS in a long time and have forgotten most of what I new. Now I'm a monkey hitting random keys again. Still at this CSS makeover I'm doing. Now I know why I put it off for so many years. At two hours each morning, this is probably going to take me another two months at least.

[coollew]

Hi Eric:
Gave it another shot, got rid of the preloader and made the background transparent.
Hope i got the corners and the border color right.

In the html change
<param name="wmode" value="opaque"> to <param name="wmode" value="transparent">
Hope it helps.

[Eric]

Thanks a lot for your effort coolew. I'll throw it up tommorrow morn and see how it plays. Thanks!

[Eric]

Ben, on 20 March 2011 - 12:57 PM, said:

Yeah, sorry.

You could also do it with the rounded rectangle tool -- put the rounded rectangle in place, right click on it, and select "Make selection." Then, delete the rounded rectangle layer, and delete the selected area from the background layer.

God I'm retarded. How do I delete the rounded rectangle layer?

[Ben]

Go to the layers palette, select the layer, right click on the name of the layer ("Shape 1" or whatever it's called, not the layer preview/mask) and select "Delete Layer."

[Eric]

Man I hate to drag out this simple question but. So when I right click on the name in the layer palet and select delete layer it deletes the layer from the layer palet but the selected rectangle remaines but now in the original layer. I must be missing something - usually am.

[Eric]

Ben you could use this web based screencast software. The video is stored on their servers and you just share the link. http://screencastle.com/ or any of these http://www.slimmity....encasting-apps/

[BeeDev]

I hope I'm understanding your problem correctly. But are you trying to create a rounded-corner-rectangle with a transparent fill, but has colors around it?

It seems really hard to do it in Photoshop from what Ben is saying. If you have Fireworks however, you just select the Rounded Rectangle tool, choose "Transparent" as the fill color, choose a border color, then draw the rectangle, adjust the corners if you have to, then Flatten the image so you can fill the corners with a color with the paint bucket tool

[Eric]

BeeDev, on 21 March 2011 - 09:28 AM, said:

I hope I'm understanding your problem correctly. But are you trying to create a rounded-corner-rectangle with a transparent fill, but has colors around it?

It seems really hard to do it in Photoshop from what Ben is saying. If you have Fireworks however, you just select the Rounded Rectangle tool, choose "Transparent" as the fill color, choose a border color, then draw the rectangle, adjust the corners if you have to, then Flatten the image so you can fill the corners with a color with the paint bucket tool

That's right. Or any other way you can think of how to round that flash. I can also just AP some corners too. But one image would be easier. Unfortunately I only have photoshop. Im quite sure there is a easy way to do it. I'm just slow.

This post has been edited by Eric: 21 March 2011 - 11:35 AM

[Eric]

Coolew. Thanks for trying but unfortunately that second attempt was not much closer. Still has a white background and the borders stop at the corners. No worries I'll just AP an image over as soon as I can figure out how.

[Ben]

@BeeDev - It really isn't that complicated, it just sounds complicated when you try to write out the steps.

@Erik - Here's a quick screencast. Hopefully it will be a bit more clear. I am using CS4, but I'm hoping that the steps won't be different if you are using an older version of Photoshop.

http://www.falkencre...rum/corners.mov

[Eric]

Awesome! Thank you very much Ben. If I can't get it from that then I have no business even opening up PS.

[Ben]

Since I didn't include audio (sorry, I have a cold and don't sound the greatest at the moment), here are text instructions to go along with the screencast:

-- Start with a blank canvas. Turn on the grid if that helps ensure you get the correct size corners
-- Using the rounded rectangle tool, create your rectangular area
-- select the bottom layer by right clicking on the rounded rectangle and selecting "Make Selection"
-- By default, the initial layer in a Photoshop document doesn't allow transparency, but you can double click on the layer and press OK to convert it to a regular layer
-- Select the bottom layer and press "delete" on the keyboard to delete the selected area from the background layer
-- Delete the rounded rectangle (or just hide that layer)
-- save the image

[Eric]

Ok that worked. I almost had to ask another but I figured it out. I was having a dickens of a time trying to add a border and a drop shadow to that transparent layer.