Jump to content
You must now use your email address to sign in [click for more info] ×

Is There a Way to Make Text into a Gradient?


Recommended Posts

It always turns out that the one single piece of Affinity knowledge I might need on any given day is the one about which I am clueless. It always ends badly, especially at NATO summits. xD

The other day, I wanted very badly to make Artistic Text be "Gradient-ized." I saw the Gradient rainbow-ish icon (see screenshot). But, NOOO. I could not gradient-ize the text.

So I tried to Rasterize it. I guess everything is better if it's Rasterized. I even Rasterized my Thanksgiving Vege-Turkey. But, NOOO. The text still would not be Gradient-ized.

So if anyone can tell me if you can make Artistic Text into a Gradient, I would appreciate it. (I watch Carl Surry religiously, InAffinity, and Olivio, but I don't believe they have videos on this topic.)

Thank you.

gradient text.png

Edited by American
Called "Affinity" "PhotoPlus"
Link to comment
Share on other sites

If you mean you want the text to have a gradient along the whole word just convert the text to curves, and apply with the gradient tool.

Acer XC-895 : Core i5-10400 Hexa-core 2.90 GHz :  32GB RAM : Intel UHD Graphics 630 : Windows 10 Home
Affinity Publisher 2 : Affinity Photo 2 : Affinity Designer 2 : (latest release versions) on desktop and iPad

Link to comment
Share on other sites

@GarryP I was very grateful for your sticking with my question last week. Unfortunately, I do not understand what you mean. I posted a screenshot because "opening a text layer" and "seeing a rectantgle layer with a gradient fill" is, well, the substance of the screenshot. Thank you for the response!

Link to comment
Share on other sites

Easiest way ...
1. make your artistic text
2. Select the gradient tool in the left hand tool palette.
3. With that tool selected drag across your text to decide the angle of the gradient.
4. Choose colours at the points along the line - it starts with two but you can add new ones by clicking on the line or select existing points, then choose a colour from the colour palette.
5. Enjoy your rainbow text!
 

Link to comment
Share on other sites

You’re welcome.
In my example there is a rectangle layer ‘inside’ the text layer.
The rectangle layer is clipped to the outline of the text so only the parts of the rainbow that are ‘inside’ the text outlines show through.
The text still has a plain black fill but the rainbow gradient rectangle overlays that fill. The text and rectangle are ‘independent’ but working together.
Does that explain it a bit better?

Annotation 2019-12-05 125900.png

Link to comment
Share on other sites

@GarryP

I suppose I will have to study this a lot, because sadly, and sincerely, I don't understand anything that you wrote, which is certainly my responsibility. I am marking your response as the answer and will clearly have to work on understanding how to do this. (I have no idea what "clipping" means, e.g.)

(When I turn off the rainbow layer in your example, everything turns black, but I imagine I have to make some kind of Mask.)

Thank you!

Link to comment
Share on other sites

Odd, the method I said should work, as I did exactly what I said in a new document to make sure ... worked fine. Make sure you create the artistic text first, then switch to the gradient tool (make sure it's the one from the tool bar on the left (looks a bit like a cd with a diagonal line running out of it). Garry's suggestion is equally valid, although maybe has an extra step in creating a rectangle.

Clipping is simply a term used to describe a mask that cuts off some of the image. So in Garry's example there's a gradient filled rectangle, which has been placed inside the text layer (this can be tricky if you are new to Affinity, but you drag one layer into another - but depending on where the blue highlight sits when you are dragging tells you how it is going to combine those two layers - you want it to sit to the right and just below the text layer) - doing this makes the text into a clipping layer - only reveealing the gradient below where the text is.

Link to comment
Share on other sites

1 minute ago, American said:

I did not know that Clipping was a form of Masking.

Strictly speaking, masking is cropping rather than clipping. When you crop/mask, the cropping object disappears; when you clip/nest, the rest of the clipping object remains visible.

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

8 minutes ago, Dazzler said:

Odd, the method I said should work

It does. I was getting confused, you don't need to convert to curves first, unless (as i needed to do recently)  you want a different gradient on each separate letter!

Acer XC-895 : Core i5-10400 Hexa-core 2.90 GHz :  32GB RAM : Intel UHD Graphics 630 : Windows 10 Home
Affinity Publisher 2 : Affinity Photo 2 : Affinity Designer 2 : (latest release versions) on desktop and iPad

Link to comment
Share on other sites

American, you’re very welcome.
As Dazzler said, both methods are completely valid but I normally prefer the way I do it as it’s easier to transform and change the fill. You can also put an image (or pretty much anything else you want) into the text layer to get various different kinds of fill.
Also, you can have various fills and switch between them as necessary (in case you’re not sure which one to use).
See my attached GIF for some examples.

filling-text.gif

Link to comment
Share on other sites

On 12/5/2019 at 1:31 PM, American said:

I did not understand a word you said

 

On 12/5/2019 at 1:34 PM, Alfred said:

:o

 

On 12/5/2019 at 1:38 PM, Guest-354025 said:

That's right, mister. xD


Please see the attachments, where I started with a rectangular picture and a pink cloud shape.

In the first one, the picture is cropped to (i.e. masked by) the cloud shape, so the extra bit of cloud at the top disappears. In the second one, the picture is clipped to (i.e. nested in) the cloud shape, so the extra bit of cloud remains visible.

Still clear as mud? :/

3DBBE674-924E-48A0-8E0D-09EA15C4A534.jpeg

036620F6-83DA-4A28-A0A8-B86F07E14CCF.jpeg

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

@Alfred The Hudson River is known to have some clear days. :P And, yes, I do get your example and am wondering why Serif just didn't do Clipping instead of Masking all along. Clipping appears to require less "brain-al" matter to execute a desired effect. Masking i-n-d-u-b-i-t-a-b-l-y requires the ability to grasp not only abstract concepts, but multiple abstract concepts at the same time. I can't drive a manual shift for the same reason. Too many mental processes involved simultaneously.:o

Not to write a dissertation, but something said by one of the Youtube creators I subscribe to made me realize I am not alone in being... slow re: Masks. You if anyone knows I have used Serif Forums as Agony Aunt columns about Masks for 15+ years. A Mask can be the "White" layer. BUT, on the other hand, if you wish, it can be the "Black" layer. Result? Whoosh...

If I were to count the number of Masking videos I have watched since purchasing my first PhotoPlus (6, I think), I would probably visit a neurologist. With intense effort after watching a How To video (the latest being a very good one by Olivio Sarikas), I am able to replicate the "instructor's" steps, successfully.

And then it all leaves my brain like water through a sieve. Or the Hudson River.

Yes, "There are eight million stories in the Serif City, and this is but one of them." xD

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.