Create Gradient Text Fill

Explorer ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

Hi Guys,

I am hoping someone here can provide me with a little help.  I am trying to recreate a gradient text fill that is being used in a web site template I am working with.  I need to create it as an image not as text so I can incorporate an image into it.  I have some experience with PS but have never messed with gradients before.  The gradient fill settings are a bit confusing and I am uncertain which ones to use.  Also the gtadient fill settings in the web site template are expressed using hex values and everthing in PS seems to be expressed in rgb values.  Any help you can provide is appreciated. 

 

TOPICS
Windows

Views

98

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

You can type your text, then either use layer styles to add a gradient fill, or add a gradient fill adjustment layer above the type layer, then clip it to the type,  by pressing alt/opt and clicking between the two layers, in the layer panel. As far as hex vs rgb, they're both relatively to your system, you could look in the normal color picker and enter the hex code, then see what rgb value you get, but don't expect accuracy. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

Chuck,

Thank you for your reply.  It is much appreciated.  Your answer is written for someone who knows their way around PS.  As I stated before I have some experience but I'm by no means a wiz.  Could you please be a little more detailed in your explaination or possibly point me to tutorial.  I will most likely be repeating this process a few times as I am planning to experiment with the use of alternate fonts in my web site and I will have to repeat the process for each one.  This is the java script that accomplishes the gradient fill in the template and I have attached the image that is going to be incorporated into the image based version of the text.  Thanks again for your assistance.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

So do you want the text to have a gradient? How is the image of the cards used: also part of the text, the background, or is the gradient to go over the markings on the cards?

I'll try to explain the process better, but I'm away from my computer for several days, and have to rely on my memory, which is a bit spotty these days.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

The text have a gradient of the colors shown in the javascript.  The card image will be combined with the text to form a single image  The website colors are peach and black.  Gradient will only be applied to the text only.  Cards will be behind the text.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

This is a screen shot of one of the website pages so you can see what I'm working with

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

Ok, so as I mentioned above, I don't have my computer, so I'm winging it. To get your rgb numbers, you should be able to click on the foreground color square in the tool bar. If you enter a hex value, it should show what the rgb values are.

To add a gradient overlay to the text, double click on the layer in the layer panel. The layer effects panel should pop up. On the left side, there should be an option for gradient fill or overlay. Use that and enter you color values. 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Mar 12, 2022 Mar 12, 2022

Copy link to clipboard

Copied

LATEST

Thank you

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines