Welcome ... I'm glad you stopped by for
Graphic + Internet related tutorials . . . Vector Text on a Path

One example using Paint Shop Pro 6 or 7
to shape the path of words along the edge of an image


Version 6 and 7 of PSP© has vector text capability. PSP© has traditionally been a raster (pixel based) program. Vector based drawings have their image information based on mathmatical formulas of curves. You can resize (up or down) a vector drawing, and will have no loss of clarity or sharpness of the image.

This is very exciting! Possibilities are endless ... and here is one idea of how to use that vector capability to make unique web page buttons, signs, etc. I think the majority of those that have tried PSP 6 or 7 think this program is WELL WORTH the cost, I certainly do!


I didn't plan to write a tutorial, so I didn't 'document' every step of the way, and I don't have details here about all the tools I used in PSP 6, but there are some screen shots.

This example / demonstration was created in Paint Shop Pro version 6 (absolutely fantastic graphic program!) The steps shown here assume (yes, yes, I know *g*) that you would have a basic understanding of the tools in PSP 5. Only needing a little help in figuring out how to use the tools in PSP 6 or 7, since most are the same. If you aren't familiar with PSP's tools, please go to Mardi's Website to learn all about the different tools first.

Just playing around, took an image of a butterfly,
I duplicated it as a new image.
Always a good idea to keep your original safe!

You may not need the next three steps, but to make it easier for me to draw the line / shape that I wanted text to flow along, 1) made a copy of the butterfly image on a new layer. 2) Selected outside of the butterfly with the wand. Inverted the selection (selections | invert). 3) Did a flood fill with the match mode set to 'none' so it would fill the entire butterfly shape.


4) Create a new VECTOR layer. One way I've found, is to highlight any layer, then RIGHT click the mouse to get the menu ... and choose 'New Vector Layer'.

Create new vector layer


[ 5) Later, duplicate the filled shape layer and draw a different path if desired. ]
choosing the line draw tool to draw a vector line in PSP 6

On that layer, choose the Draw tool, "create as vector" checked, to draw the line / shape that you want your text to flow along.
Green line was one of my text paths for the butterfly images

Switch to the text tool, hold the curser near your new vector line until you see the 'A' underlined with a 'rocker curve' (as I've seen it called), click at that point.

(for this screen shot, I just drew a random curvy line)

Placing text on a vector line in PSP 6

The text box will come up, type your text. If you want to adjust the letter spacing (and odds are, you will) create your text as vector. You can always change it to a raster layer later.
(for drop shadow, beveling, etc.)

make your text as a vector object too, then you can re-edit spacing until you are satisfied with the 
look.

   

After text is typed, select all your text, and THEN choose the color and font desired.

If you RIGHT click the color box inside the text box, it will bring up the most recently used colors. AND, if you hold the dropper tool over a color, it will give you the hexdecimal coding.
i.e. if I wanted that color pink to be my font color for text on the HTML page, it would be written as
<font color="#FF48FF">

choose the color of your text, when right clicking, your most recently used colors will appear, plus you can get the hexdecimal color code for your HTML coding.
"Other" will display the full color
pallet available for 16 million colors.


In the examples shown below, I basically created one "button", then duplicated that layer, and re-edited the words.

Also "faded" the butterfly image to give a clearer view of the vector line and also my text. (see the 'btrfly' layer, the opacity is pulled down to 42, and it is placed over a solid white layer.) Of course, for your final image, you can choose to have your "object" full color, or faded.

To do this screen shot, I duplicated the entire image several times,
and brought up the different layers to be able to show each individual one.
Paint Shop Pro 6, showing several images with vector text applied to different path / lines.

I used two different sizes of butterflies in this experiment,
larger size suitable for a welcome sign, or similar. The smaller size for buttons.

 
In the text box, you can choose to have the text align left, center, or right. See image below - for location of text alignment control. When positioning my vector text, I sometimes needed to put a space or two BEFORE the text started, in order to position it where I wanted it to be, in relation to the butterfly image.
I hope when I get more experienced at drawing the vector lines I won't have to make as many adjustments *s*.

Depending on the curve of your text path, you will probably have to add kerning or reduce kerning between letters. Possibly, can add a space between letters, and that will make the correct size gap between tight letters on an inside curve, like the word 'Saying' is on below. You can only do this if your text is in vector format, too. You can always convert the text to raster later.
 

adding kerning (space) in text using PSP 6

The amount of space, or kerning, will all depend on your text and the curve it is on. You may
need to re-edit your text several times before you get the spacing to a point you are satisfied with it.

reducing kerning (space) in text in PSP 6

 
When you are satisfied with your text, you can make your vector line disappear by clicking on the eyeglass symbol for that part of the layer (see image6 in the collage image above) and convert the vector text layer to a raster layer.

A raster layer is one that can have image effects on it, like drop shadow, beveling, filters applied, etc. Another option is to duplicate that vector text layer and make the duplicate layer become a raster layer. In case you ever want to go back and edit the raster text later. Save as a PSP 6 image ... aahhhhh you should be saving right along, actually. You can duplicate that image, bringing each layer to the top and do a 'save as' for your final images. Especially if you need to reduce colors for .gif format. If something goes wrong, you can always do your adjustments and saves again later, since you have your 'original' in PSP 6 format.
 

draw an oblong selection around your text
use the magic wand to select inside of your selected box, the selection will *snap to* the edges of your text.
I wish I had known about this "little trick" earlier! It's really GREAT that PSP 5, 6, and 7 has the capability of "re-selecting" text with a couple of simple steps! This will ONLY work IF your text is on a seperate layer.

1) Select the layer that your text is on, use the rectangle selection tool, and make a box outside of your text.

2) Then use the magic wand to select INSIDE that box, the selection will "snap to" your text, even inside the closed letters! You can add drop shadow, beveling effects, whatever!

Thanks to whoever it was that wrote about it on the PSP news group!

 
One note, when doing my experiment with the text on paths above, I was lucky and didn't have a problem with PSP running out of memory. I have 128 MB of PC 100 Sdram, plus a separate 2 gig harddrive designated as the swap drive. But partway through I did save everything as a PSP 6 image. I would recommend that you don't wait that long *grin*, it's no fun to have lost a couple of hours work! (even if it is an experiment!)

If your swap drive is on the same harddrive as everything else, it can still be a problem and slow down your work and processing of the graphic program. It's because the heads have to move back and forth to different areas of your single harddrive. Swap runs faster, smoother, better when it's on a separate harddrive.

And run scandisk and defrag often! It's a weekly ritual on my C drive here, and the swap drive gets done after every major graphic editing session! Since there's nothing on the swap drive but the swap drive, it takes all of 30 seconds to do that one :-) I can say that since getting the separate harddrive/swapdrive, that I have rarely ever crashed PSP and lost work. And when I have, it's because I've made 20 'multi layered with filter effects' items and I haven't saved a single one of them ... so I had been forcing PSP and my computer to do more memory work than I should have!

Tutorial © 1999 Roxy Flanagan
These copyrighted graphics are for free use, for this tutorial purposes only.
The tutorial graphics shown on these pages may NOT be placed in any collection or sold,
or copied and placed on ANY web site, or distributed in any way.
If you want to share this information with others, send this URL (web page address) to them!
Texture tile background © 1998 Roxy M. Flanagan.

Tube Use + Graphic Creation Tutorials:

Using TubesSeamless BorderSeamless TileVector Text on a Path using PSP
Combining Graphics and HTML
Fancy HTML tutorial:Triple Table HTML Page Layout

Webmasters, see the "Web Page Help" section for LOTS of information!

Internet Users Tutorials:
Downloading
from the Internet
Using WS_FTPUsing Winzip Installing both
pIRCh and mIRC
Popups
+ fancy IRC text

Tutorial List Page (+ links to more tutorial websites) ... Tutorial Rings Page

www.AutumnWeb.com SITEMAP


... total site menu @ Roxy's : Terms Of Use : Privacy Policy : Questions?
Copyright © 1997- by Roxy M. Flanagan + licensors; All Rights Reserved.
Links to MORE free graphics sites, Roxy Recommended!
Back to entrance + webrings @ Tutorials : Web Page Help : Tubes :
Roxy's Renditions™ @ http://www.autumnweb.com/Roxys/
Web Site Copyright © 1997- by Roxanne M. Flanagan, Autumn Web www.autumnweb.com

Roxy Recommends:
Autumn Web
Web Development

Personal+Business
Custom Web Graphics