This is Interesting: Free Magazines for Graphics designers and webmasters  


Home > Archive > Computer Graphics with Photoshop > August 2005 > How do I make an 'S' curve?





You are viewing an archived Text-only version of the thread. To view this thread in it's original format and/or if you want to reply to this thread please [click here]

Author How do I make an 'S' curve?
Arcfus Barcwinkle

2005-08-11, 7:15 pm

I'd like to create a web graphic that includes a smooth 'S' curve. It
would primarly be a horizontal line separating the top header area from
the rest of the page, but it would have a curve in it.

Here is an extremely bad free-hand idea of what I want to do:

http://www.ssih.com/scurve.gif

I've had minor success screwing around with pieces of ovals and trying
to match them up, but I have to suspect that there is a better way.

Johan W. Elzenga

2005-08-11, 7:15 pm

Arcfus Barcwinkle <arcfus@flink.com> wrote:

> I'd like to create a web graphic that includes a smooth 'S' curve. It
> would primarly be a horizontal line separating the top header area from
> the rest of the page, but it would have a curve in it.
>
> Here is an extremely bad free-hand idea of what I want to do:
>
> http://www.ssih.com/scurve.gif
>
> I've had minor success screwing around with pieces of ovals and trying
> to match them up, but I have to suspect that there is a better way.


That is what the freehand tools (path tools) are for.


--
Johan W. Elzenga johan<<at>>johanfoto.nl
Editor / Photographer http://www.johanfoto.nl/
Flo Nelson

2005-08-11, 7:15 pm


"Arcfus Barcwinkle" <arcfus@flink.com> wrote in message
news:33omf1dhlvgkhds5kiid2s9flkhihpq6ls@4ax.com...
> I'd like to create a web graphic that includes a smooth 'S' curve. It
> would primarly be a horizontal line separating the top header area from
> the rest of the page, but it would have a curve in it.
>
> Here is an extremely bad free-hand idea of what I want to do:
>
> http://www.ssih.com/scurve.gif
>
> I've had minor success screwing around with pieces of ovals and trying
> to match them up, but I have to suspect that there is a better way.



Draw it with the pen tool. If you have Illustrator, I find it easier to do
with that program.

Flo


iehsmith

2005-08-11, 7:15 pm

On 8/11/05 9:31 AM, Arcfus Barcwinkle uttered:

> I'd like to create a web graphic that includes a smooth 'S' curve. It
> would primarly be a horizontal line separating the top header area from
> the rest of the page, but it would have a curve in it.
>
> Here is an extremely bad free-hand idea of what I want to do:
>
> http://www.ssih.com/scurve.gif
>
> I've had minor success screwing around with pieces of ovals and trying
> to match them up, but I have to suspect that there is a better way.


Almost hate to mention it, but if you want a quick sort of cheat:
make a wide, oversized rectangle for the top portion on a separate layer,
might want to make it larger than you need so you can play with rotation;
Sroke/Outside;
Then Filter:Distort:Twirl... maybe -90 or so;
Rotate if you want a different angle
(you can apply stroke after, but I think the results are smoother and more
'fluid' if applied first)

www.imagessence.com/imageviewer/s-curve.gif (unrotated)

inez

Gerard Verhoef

2005-08-12, 4:14 am

Reading the different answers here, I'm not sure
- if my simple solution is mentioned already
- if this solution is somehow "wrong", or not intenden by the OP

I just wondered.

I would draw a bezier path with the pentool and stroke it.
do do that follow these simple steps:

1 chose a brush size and foregroundcolor
2 with the pentool leftclick (windows) at the startingpoint of the curve
3 keep the leftbutton pressed and move a couple of inches in the right
direction
4 you will see two handles coming out of the starting point
5 release the left mousebutton and move the mouse to the end of the curve
6 again: leftclick and move the mouse
7 again the handles appear.
8 use the handles to adjust the curve. Its very intuitive
9 on the path pallet, chose the stroke path with brush icon at the bottom
of the pallet

done

Gerard


tacit

2005-08-13, 11:14 pm

In article <33omf1dhlvgkhds5kiid2s9flkhihpq6ls@4ax.com>,
Arcfus Barcwinkle <arcfus@flink.com> wrote:

> I'd like to create a web graphic that includes a smooth 'S' curve. It
> would primarly be a horizontal line separating the top header area from
> the rest of the page, but it would have a curve in it.


Easy as pie. Use the Pen tool to create an S-shaped path, then stroke
the path.

--
Art, photography, shareware, polyamory, literature, kink:
all at http://www.xeromag.com/franklin.html
Sean

2005-08-15, 7:14 pm

On Thu, 11 Aug 2005 10:31:50 -0400, Arcfus Barcwinkle
<arcfus@flink.com> reverently intoned upon the aether:

> I'd like to create a web graphic that includes a smooth 'S' curve. It
> would primarly be a horizontal line separating the top header area from
> the rest of the page, but it would have a curve in it.
>
> Here is an extremely bad free-hand idea of what I want to do:
>
> http://www.ssih.com/scurve.gif
>
> I've had minor success screwing around with pieces of ovals and trying
> to match them up, but I have to suspect that there is a better way.


Another solution using the Pen Tool again is to create a path that
outlines the S-curved shape you want. Then transform the path into a
selection (likely feathered by 1 pixel to prevent aliasing) and fill
the selection with the desired color.

Using Snap To and the Grid would make this version easier.

Albeit, I think achieving a uniform width for the S-curve would be
easier if you stroke the path.

enjoy,

Sean


"In the End, we will remember not the words of our enemies,
but the silence of our friends."

- Martin Luther King Jr. (1929-1968)

New Website
http://www.envisagement.com/
Last Updated 23 June 2005
tacit

2005-08-15, 7:14 pm

In article <8rs0g1tiron4kvbfhi37uj05v8oe3h34i9@4ax.com>,
Sean <sdemerchREMOVE@REMOVEhotmail.com> wrote:

> Another solution using the Pen Tool again is to create a path that
> outlines the S-curved shape you want. Then transform the path into a
> selection (likely feathered by 1 pixel to prevent aliasing) and fill
> the selection with the desired color.


By default, a selection made from a path is anti-aliased. Feathering it
simply makes it fuzzy, with a blurry edge. This is often undesirable.

--
Art, photography, shareware, polyamory, literature, kink:
all at http://www.xeromag.com/franklin.html
Sean

2005-08-16, 4:14 am

On Mon, 15 Aug 2005 13:31:13 GMT, tacit <tacitr@aol.com> reverently
intoned upon the aether:

> In article <8rs0g1tiron4kvbfhi37uj05v8oe3h34i9@4ax.com>,
> Sean <sdemerchREMOVE@REMOVEhotmail.com> wrote:
>
>
> By default, a selection made from a path is anti-aliased. Feathering it
> simply makes it fuzzy, with a blurry edge. This is often undesirable.


Not true in photo work. Unfeathered selections tend to leave
tell-tales of manipulation even with anti-aliasing turned on. Albeit,
in this case it is illustration and perhaps unneeded.

And my personal experience with anti-aliased selections from paths is
that they are badly aliased rather than terribly badly aliased.
Albeit, I mostly do photo work in PS so that affects what I see.

enjoy,

Sean



"In the End, we will remember not the words of our enemies,
but the silence of our friends."

- Martin Luther King Jr. (1929-1968)

New Website
http://www.envisagement.com/
Last Updated 23 June 2005
Sponsored Links


Copyright 2003 - 2008 forum4designers.com  Software forum  Computer Hardware reviews