Create and Manipulate Exciting Text Effects In Illustrator for Import to Photoshop.
As my Web grew over the last few months, several things became apparent. One was that it had grown far beyond my initial intent of just putting forth a few of my short stories. Another was that its home page only allowed easy access to some portions of the site, limited access to others, and no direct access to many portions. What was most apparent was that I needed to create a new entry point and a new home page for the site.
	What I came to visualize was a simple, yet attractive new entrance to the site that allowed easy navigation to the whole site. I visualized accomplishing this with a grahic. This vision would eventually require the use of both Photoshop and Illustrator. I first thought of the navigation and designed and began work on the button bar, the blue wiener. I realized that the graphic need to accomplish more, that it should tell who I am and what I do. The button bar began to remind me of a stylized old radio. The drawing to the left is my first conceptual sketch of the final graphic (minus the grocery list that was further down the sheet of paper).
The navigation bar was relatively simple, and accompished totally in Photoshop. I first made the wiener shape by selecting/drawing a rectangle, and then adding a circle in each end. These were then filled with a dark blue. I then added the highlights and shadows by selecting areas with the lasso set to a 6 pixel feather, and filling with a lighter and darker blue. Through all of this I visualized the light as coming from the upper left. The selected shapes The shapes filled with blue I then constructed the separation bars, each on its own layer, by selecting rectangles and filling them with the gradient tool. I only had to make one verticle bar and duplicate it onto four other layers. I felt I need the layer separations so that I could recolor the wiener (which I did once) and also so I could fudge the positions to fit the various lengths of type. With highlights and shadows added With bar layers Each piece of type was place on its own layer, to allow easy positioning and editing, and then filled with a slight gradation. At this point I had reached the limits of what I could do with type in Photoshop and needed to utilize a vector program. Illustrator was a good choice because it is a champ with text and Illustrator files are easily read by Photoshop. With type layers Layers combined
In Illustator, I first drew a circle. Then, with the Type/Path command, I set the type to follow the circle. (The Type Button on the tool bar in illustrator is identical except that if you hold it down you will get some options. The T with the squigly line is the Path Type button. After you have selected this you have merely to click on the shape, whether nit be a crcle, squigle, etc. ang the type will follow the shape. Another nice option is a button that allows you to type inside a shape, the Area Type button.) I then drew the larger and smaller circles that made the outlines of the arc, and erased the first cirlcle. After changing the the type to an outline, I began on the inner type. Once this type was set and positioned, I use the Type/Create Outlines menu commands. This sepatates all the characters in a selection so that each character can be worked on or repositioned independently. I then worked on each letter individually, using the Filter/Distort/Free Distort commands to distort them to their present shape. (You can also use this feature if you want to create perspective to your type. If you have Adobe Domensions included with your Illustror, you can even create 3D type!) I then grouped (Arrange/Group will group any selected text and other shapes) the whole mess and gave it a tug on the top to distort the whole image. This is the image that I then imported to Photoshop.		A letter being distorted in the Free Distort dialog box.
[Note: While you can save the image in Illustrator as a Photoshop file and it will be automatically rasterized, you are better off to save it as an Illustrator file. Photoshop will automatically rasterize it when you open it, but if you keep the file as an Illustrator is easier to go an rework the vector form (which sees shapes instead of individual pixels) if neccessary. However, the two programs are so well mated that you can simply drag and drop your Illustrator image into a Photoshop window, in which case I would still save a version in Illustrator. Whichever method of import you choose, a dialog box will appear to aid you in the conversion.]
Flat colors In Photoshop, I duplicated the image onto four layers and eliminated the parts of each layer I didn't want. I ended up with the arc on the bottom, then the name, and with two duplicate layers with the inner type on top. I outlined the arc with brown and filled it with gold. I then added highlights and shadows as I did to the wiener. The inner portion was filled with a gradation and given a light texture. With highlights and shadows On the name type I also outlined the type in brown and filled with dark red. Highlights were added (with a feather of 2 pixels)individually to each letter with a view on the direction of the light and how it would play on each letter. I then painted the inner type on the top layer gold, and expanded the selection on the type underneath by 2 pixels and painted it black.
It was then a simple matter to place a flattened copy of the button barwith on a new top layer, then resize and flatten the complete image for export as a GIF. It should be noted that I worked with a resolution of 144 pixels and didn't drop the image to 72 pixels until the final resizing so that I would have more pixles to work with and could achieve finer control.
My conclusion is that if you want more versatility, better quality, and finer control with type than is afforded with Photoshop, go to Illustrator. The two programs compliment each other well.