Jump to content


Photo

Arched Text


  • Please log in to reply
22 replies to this topic

#1 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 24 March 2009 - 03:24 PM

One thing you can't do with a simple filter in Fireworks is distort text, which can be used in some graphic apps to make typography a little more interesting at times. Well I just saw this clever Inkscape (opensource vector app) tutorial at Sixthings and thought: wow, that's really clever, you could use the same technique in Fireworks easily enough!

And attached is a quick walk-through on the distortion part in Fireworks (it's a Fireworks PNG so you can download to look at the final result in Fireworks.)

Attached Images

  • ArchedText.fw.png


#2 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 24 March 2009 - 06:21 PM

Reminds me of that old TypeStyler program that let you distort and style text like 15 years ago. It's back to the future!

#3 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 24 March 2009 - 07:26 PM

very nice thks.

#4 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 24 March 2009 - 07:50 PM

always wondered how to do that, =) so they use circles =) awesome

#5 blue2x

blue2x

    FireworksMaster

  • FwGurus
  • PipPipPipPipPipPipPip
  • 720 posts
  • Location:Cagayan de Oro City , Philippines
  • Interests:Adobe Fireworks , Business , Investing , Art , Technology

Posted 24 March 2009 - 08:34 PM

heres my try, =)

arched_text_example.png

#6 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 25 March 2009 - 12:41 AM

really cool blue.

#7 jdunning

jdunning

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 173 posts

Posted 25 March 2009 - 11:34 AM

If it didn't require so much bezier math, I'd feel a command coming on. Must be code out there for finding intersections with bezier curves...

#8 DaveH

DaveH

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 343 posts
  • Location:San Francisco CA USA

Posted 25 March 2009 - 08:28 PM

If Microsoft can do it for Word Art in MS Office, it must not be that difficult...


If it didn't require so much bezier math, I'd feel a command coming on. Must be code out there for finding intersections with bezier curves...



#9 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 26 March 2009 - 12:18 AM

Code for finding bezier curve intersections? Hehe... if you find it, let me know. :)

Hm, maybe a command wouldn't be too hard to get this specific effect if you just use some simple interpolation, translating each point's Y based on it's X position with applied interpolation, then decaying Y translation based on the point's Y distance from top of bounding box... hmmmm, I think I might...

#10 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 26 March 2009 - 12:44 AM

Heh, okay, so here's a faster way attached. :) Just enter Strength (max amount of Y distortion) and Offset (horizontal center point) to arc the bottom of your vector selection.

It's a bit sluggish in processing for some reason, not sure why... but it's more accurate, too, because it deforms every point instead of just every path.

EDIT: To install, just copy the file to your applications Fireworks/Configuration/Commands folder.

EDIT2: Made an update, now the command will automatically convert text to paths if you have text selected (with a confirmation prompt, of course.)

Attached Files



#11 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 26 March 2009 - 01:16 AM

great one abeall

#12 Zoe20

Zoe20

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 547 posts

Posted 26 March 2009 - 01:17 AM

Heh, okay, so here's a faster way attached. :)

It's a bit slow for some reason, not sure why... but it's more accurate, too, because it deforms every point instead of every path.


Tks a lot .How to install it ??

#13 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 26 March 2009 - 08:29 AM

Just download the .jsf and copy/move it to your Fireworks/Configuration/Commands directory:

Win: Program Files/Adobe/Fireworks [version]/Configuration/Commands/
Mac (not sure): Applications/Adobe/Fireworks [version]/Configuration/Commands/

Or I'll package it as an MXP someday and put it on my site...

#14 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 26 March 2009 - 09:02 AM

Or I'll package it as an MXP someday and put it on my site...


Great idea .Its cool one thanks a Ton.

#15 Brownspank

Brownspank

    Fireworks Sparkle

  • Members
  • Pip
  • 1 posts

Posted 26 March 2009 - 09:54 PM

Thanks for the credit, but moreover, thanks for the command: it works like a charm! Looking forward to the MXP version. :)

I think this deserves some linkage.

#16 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 27 March 2009 - 12:22 AM

Yes am also eagerly looking for the mxp version

#17 abeall

abeall

    FireworksNut

  • Administrators
  • PipPipPipPipPipPip
  • 523 posts

Posted 27 March 2009 - 10:12 PM

Welcome Brownspank, glad you like it, and thanks for the linkage. :)

#18 SiamJai

SiamJai

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 205 posts

Posted 02 April 2009 - 02:08 AM

This is awesome! First, it's a great idea and a neat tutorial, but above all, the implementation from idea to command is what makes this so cool. Almost like we watch your design process in real-time.

Congrats Aaron, and thanks for sharing this cool technique and tool! :thumbsup:

#19 raja

raja

    FireMonkey

  • Members
  • PipPipPipPipPipPipPipPipPipPip
  • 1,226 posts

Posted 27 April 2009 - 12:31 AM

any update on the MXP yet please?

#20 kelton

kelton

    FireworksNut

  • Members
  • PipPipPipPipPipPip
  • 471 posts
  • Location:Antigua
  • Interests:web design, logo design, user interface design

Posted 27 April 2009 - 12:35 PM

any update on the MXP yet please?



as long as u follow abeall instructions above there is no real need for the MXP.. it only installs it easier for u in one package.. in fact the time i took to replied, i could have already installed it manually.

#21 hamo

hamo

    Fireworks Ninja

  • Members
  • PipPipPipPipPip
  • 120 posts
  • Location:MANCHESTER .UK
  • Interests:GRAPHICS

Posted 01 May 2009 - 12:58 AM

thanks very much

#22 Mmike

Mmike

    FireworksCommander

  • Members
  • Pip
  • 7 posts

Posted 23 October 2009 - 09:08 AM

This is my first post, and this thread made me register cause i want to thank you for the tutorial and command! good work

#23 zilli

zilli

    FireworksCommander

  • Members
  • Pip
  • 8 posts

Posted 31 October 2009 - 11:38 PM

Welcome Brownspank, glad you like it, and thanks for the linkage. :)



Good work!