8 Replies Latest reply on Sep 10, 2007 3:41 AM by Newsgroup_User

# Rectangle with 45 degree rounded angle? How?

Does anyone know how to (or a tutorial) design a rectangle which has a 45 degree corner and the two edges of the 45 degree corner to be rounded? If you go to http://groups.msn.com/ - im talking similar to the menu bar with the 2 msn heads.
• ###### 1. Re: Rectangle with 45 degree rounded angle? How?
~Billy~ wrote:
> Does anyone know how to (or a tutorial) design a rectangle which has a 45
> degree corner and the tow edges of the 45 degree corner to be rounded? If you
> go to http://groups.msn.com/ - im talking similar to the menu bar with the 2
>
One way is with the pen tool. Here is a good start for learning to use it.

http://tinyurl.com/2v33gn

SKB
• ###### 2. Re: Rectangle with 45 degree rounded angle? How?
Another is this:

Create the triangle.

Create a circle with the right size for your rounded corner. Let's say it's 30x30px.

Create a square - half the size - 15x15. Put the circle on top of the square - so that the square is positioned in the bottom left quadrant of the circle. Then do: Midofy - Combine Paths - Punch.

Now put the resulting shape on top of your triangle - so that the curve of the shape is where you want the curve in your triangle. And do another Modify - Combine Paths - Punch - and it will punch a curve into your triangle.

- Greg

• ###### 3. Re: Rectangle with 45 degree rounded angle? How?
What version of FWs are you using? If it's CS3 do you have the Paths panel
which you should be able to find under > Window > Others > Path, if you do
I'll continue this later :-)

Peter
___________________
"~Billy~" <webforumsuser@macromedia.com> wrote in message
news:fc1r8v\$ddj\$1@forums.macromedia.com...
| Does anyone know how to (or a tutorial) design a rectangle which has a 45
| degree corner and the tow edges of the 45 degree corner to be rounded? If
you
| go to http://groups.msn.com/ - im talking similar to the menu bar with the
2
|

• ###### 4. Re: Rectangle with 45 degree rounded angle? How?
In the meantime here is a FWs png file which you can open and pull apart.

http://www.fasterthanu.com/misc_images/MSNtab.png

"PJR" wrote in message ...
| What version of FWs are you using? If it's CS3 do you have the Paths panel
| which you should be able to find under > Window > Others > Path, if you do
| I'll continue this later :-)
|
| Peter
| ___________________
| "~Billy~" <webforumsuser@macromedia.com> wrote in message
| news:fc1r8v\$ddj\$1@forums.macromedia.com...
|| Does anyone know how to (or a tutorial) design a rectangle which has a 45
|| degree corner and the tow edges of the 45 degree corner to be rounded? If
| you
|| go to http://groups.msn.com/ - im talking similar to the menu bar with
the
| 2
||
|
|

• ###### 5. Re: Rectangle with 45 degree rounded angle? How?
Yes PJR I have version CS3.
• ###### 6. Re: Rectangle with 45 degree rounded angle? How?
PJR the png is exactly what i want..how did you create it!?

Im amazed!
• ###### 7. Re: Rectangle with 45 degree rounded angle? How?
Ok - To start drag out a Rectangle the size you want your base image, I used
500x50px. Then drag out another over the top for your tab 500x40 ( I would
make these contrasting colours, just for ease of working, you can change
them later) Ungroup the Tab rectangle (Ctrl+Shift+G)

Drag out a couple of Guide lines where you want your curves using the
original as a template. Now with the Pen tool add two anchor points where
your Guide lines intersect the top of your rectangle. ( It may help to zoom
in to do this)

With the Subselect tool (white arrow) select the top left anchor point, and
with the down arrow key on your keyboard click untill you have the
approximate height you require for the left end of your tab. Now select the
next anchor point on the top of your tab and do the same.

At this point it should look like your tab but without the curved corners.
To create the curves select the second anchor point of your tab with the
subselection tool and click to select, then open your Path panel, which you
can find under Window > Others > Path. In the Point, Edit section of the
Panel (third down) go to the last button and you should see a Tooltip that
says Fillet points, click it and enter 10 in the box. Repeat the last
operation with the next anchor point, and there you have it.

Peter
_______________

• ###### 8. Re: Rectangle with 45 degree rounded angle? How?
We aim to amaze :-)

If you open the file in FWs Billy, you should be able to see the various
steps I took to create it. I've labelled them so it should make sense. Look
in the Layers panel.

Peter
____________________
"~Billy~" <webforumsuser@macromedia.com> wrote in message
news:fc361o\$t95\$1@forums.macromedia.com...
| PJR the png is exactly what i want..how did you create it!?
|
| Im amazed!