Jump to content
Killersites Forums

I'm having trouble visualizing this?


PicnicTutorials
 Share

Recommended Posts

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!

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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 :lol:

Link to comment
Share on other sites

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 :lol:

 

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 by Eric
Link to comment
Share on other sites

@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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...