PicnicTutorials Posted March 20, 2011 Report Share Posted March 20, 2011 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! Quote Link to comment Share on other sites More sharing options...
coollew Posted March 20, 2011 Report Share Posted March 20, 2011 Could you just make the flash movie with rounded corners? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2011 Author Report Share Posted March 20, 2011 no no flash editor. Quote Link to comment Share on other sites More sharing options...
coollew Posted March 20, 2011 Report Share Posted March 20, 2011 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2011 Author Report Share Posted March 20, 2011 Cool thanks!! Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2011 Report Share Posted March 20, 2011 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? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2011 Author Report Share Posted March 20, 2011 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? Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2011 Author Report Share Posted March 20, 2011 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 20, 2011 Report Share Posted March 20, 2011 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 20, 2011 Author Report Share Posted March 20, 2011 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. Quote Link to comment Share on other sites More sharing options...
coollew Posted March 21, 2011 Report Share Posted March 21, 2011 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 Thanks a lot for your effort coolew. I'll throw it up tommorrow morn and see how it plays. Thanks! Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 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? Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 21, 2011 Report Share Posted March 21, 2011 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." Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 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. Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 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.com/2010/02/web-based-screencasting-apps/ Quote Link to comment Share on other sites More sharing options...
BeeDev Posted March 21, 2011 Report Share Posted March 21, 2011 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 (edited) 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. Edited March 21, 2011 by Eric Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 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. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 21, 2011 Report Share Posted March 21, 2011 @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.falkencreative.com/forum/corners.mov Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 Awesome! Thank you very much Ben. If I can't get it from that then I have no business even opening up PS. Quote Link to comment Share on other sites More sharing options...
falkencreative Posted March 21, 2011 Report Share Posted March 21, 2011 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 Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted March 21, 2011 Author Report Share Posted March 21, 2011 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.