6 Replies Latest reply on Sep 30, 2013 11:20 AM by Gustavo Del Vechio

    How to fill gradient color in a Textframe

    ydonbon

      I am working with scripting in Ai, please give me a guide to fill gradient color in TextFrame. I search in this forum but the other topics fill color to path or line. For now, I can make a gradient color, but I don't know how to apply it to textframe. Sorry for my english.

        • 1. Re: How to fill gradient color in a Textframe
          CarlosCanto Adobe Community Professional & MVP

          fillColor works the same for paths or for text,

           

          to get to the text fillColor property use

          textRef.textRange.characterAttributes.fillColor
          

           

           

           

          Creating and applying a gradient, from the Scripting Reference, page 63

          // Creates a new gradient in current document then
          // applies the gradient to the frontmost path item
          if ( app.documents.length > 0 ) {
          // Create a color for both ends of the gradient
          var startColor = new RGBColor();
          var endColor = new RGBColor();
          startColor.red = 0;
          startColor.green = 100;
          startColor.blue = 255;
          endColor.red = 220;
          endColor.green = 0;
          endColor.blue = 100;
          // Create a new gradient
          // A new gradient always has 2 stops
          var newGradient = app.activeDocument.gradients.add();
          newGradient.name = "NewGradient";
          newGradient.type = GradientType.LINEAR;
          // Modify the first gradient stop
          newGradient.gradientStops[0].rampPoint = 30;
          newGradient.gradientStops[0].midPoint = 60;
          newGradient.gradientStops[0].color = startColor;
          // Modify the last gradient stop
          newGradient.gradientStops[1].rampPoint = 80;
          newGradient.gradientStops[1].color = endColor;
          // construct an Illustrator.GradientColor object referring to the
          // newly created gradient
          var colorOfGradient = new GradientColor();
          colorOfGradient.gradient = newGradient;
          // get first path item, apply new gradient as its fill
          var topPath = app.activeDocument.pathItems[0];
          topPath.filled = true;
          topPath.fillColor = colorOfGradient;
          }
          
          • 2. Re: How to fill gradient color in a Textframe
            ydonbon Level 1

            I tried but it didn't work. Here is my code. I use Adobe Extend Script to run the code. Illustrator CS 4.

             

            // Prepare a document preset

            var preset = new DocumentPreset();

            preset.width = 300;

            preset.height = 150;

            preset.units = RulerUnits.Pixels;

            preset.colorMode = DocumentColorSpace.RGB;

             

            // Add a document

            var doc = app.documents.addDocument("Test", preset);

             

            // Create a color for both ends of the gradient

            var startColor = new RGBColor();

            var endColor = new RGBColor();

            startColor.red = 0;

            startColor.green = 100;

            startColor.blue = 255;

            endColor.red = 220;

            endColor.green = 0;

            endColor.blue = 100;

            // Create a new gradient

            // A new gradient always has 2 stops

            var newGradient = doc.gradients.add();

            newGradient.name = "NewGradient";

            newGradient.type = GradientType.LINEAR;

            // Modify the first gradient stop

            newGradient.gradientStops[0].rampPoint = 0;

            newGradient.gradientStops[0].color = startColor;

            // Modify the last gradient stop

            newGradient.gradientStops[1].rampPoint = 100;

            newGradient.gradientStops[1].color = endColor;

            // construct an Illustrator.GradientColor object referring to the

            // newly created gradient

            var colorOfGradient = new GradientColor();

            colorOfGradient.gradient = newGradient;

             

            // Add a text frame

            var text = doc.textFrames.add();

            text.contents = "Hello World!";

             

            // Apply gradient color

            text.textRange.characterAttributes.fillColor = colorOfGradient;

            text.textRange.characterAttributes.overprintFill = true;

            • 3. Re: How to fill gradient color in a Textframe
              CarlosCanto Adobe Community Professional & MVP

              sorry, but it seems there is a problem filling text with a gradient. Unless I'm doing something wrong, a textframe won't take a gradient color as it is, we need to add a separate fill first (by hand, using the UI),

               

              now using JS, Illustrator crashes everytime I try to add a gradient to a text frame with an added fill.

               

              ...needs more research

              • 4. Re: How to fill gradient color in a Textframe
                ydonbon Level 1

                Somebody please help

                • 5. Re: How to fill gradient color in a Textframe
                  elDudereno Level 3

                  Live text will not accept a gradient fill. This screen shot is from CS6, the color pallette shows a gradient fill but as you can see the text is only black.

                  Screen shot 2013-09-30 at 12.21.36 PM.png

                  If outlining the text is an option you get this:

                  Screen shot 2013-09-30 at 12.23.01 PM.png

                  Unless you Object/Compound Path/Make

                  Screen shot 2013-09-30 at 12.23.10 PM.png

                  Then you get this:

                  Screen shot 2013-09-30 at 12.23.33 PM.png

                  If outlining the text is not an option, you might be out of luck. Unless someone has a better idea?

                  • 6. Re: How to fill gradient color in a Textframe
                    Gustavo Del Vechio Level 3

                    It´s not necessary to convert the text to compound paths (outline it). This would lose the capability to edit the text.

                     

                    In order to apply a gradient to a native text, you must acess select the desired text, then acess Appearance Panel and click "Add new Fill" button. This will create a new fill attribute over the character´s fill.

                     

                    It´s necessary to understand native characters do not accept gradient (only color and pattern). So, the new Fill is necessary to apply the gradient.

                     

                    I think it would not be possible to apply gradient via script direct to textFrame items since you do not have any method that reads multiple fills of the object (I can be wrong here, at least I do not see anything in documentation).

                     

                    An idea would be work with GraphicStyle (even via script). If you have a graphic style in the document that has multiple gradients, then you could try to apply to the text. I have not tested it, so do not know if it would work.

                     

                    Best Regards

                    Gustavo.