Streaming live at 10am (PST)

Gradient Application, Complex


#1

Here is the description of the complexities that I am wrestling with:

There are images on the right, and writing on the left.
The writing on the left is sitting on a nice little pink background color.
I would like for that background color to be a gradient pink.

There are complexities to achieve my result. Here is the complexities.

A. The Image itself, is really a big rectangular image.
There is a nice 'slice of 'Images' that are indesigned together.
Then on the other side of the 'slice', is a white space, open white space.

B. I uploaded this 'white space on left, image on right' Design into Pixlr.
C. I used paint bucket tool to add a pink background.
D. I used webflow to add a text block, gave it white color, and positioned it appropriately.


Sadly, pixlr has no gradient tool. So this is not the desire I want.
Webflow, does have a gradient tool.
Yet....

A. The image itself, like i i said before, is a big rectangular shape with white slice on the left and image slice on the right.
So if i let it stand by itself, its chilling, taking up the whole page.
If i make a gradient block in the background, then it gets OverLaid by the big rectangular image..... --> so no gradient makes it through when i slide that image over the Gradient.

B. Solution 2: Just make the text background color, a gradient. Make the text block you created in Webflow, a gradient.

Problem: The text block has rectangular edges. The gradient itself, would rectangular up against that clean diagonal line, overlaying on top of the image,
not giving that
"Fresh Slice" divider effect that I desire.


With these Understandings, how might I be able, to make a nice background pink gradient, to this awesome text?
This background needs to flush nice and perffectly evenly with the diagonal divider, as seamlessly as i did it with the pink background color.


Read only link: https://preview.webflow.com/preview/lisalove-68a08e?preview=d9ff81ffbc342ea677f83a8e09a6386d

-Elliot


#2

Hi @Elliot,

Since this issue become complex to you, lest start to work with that step-by-step.

First of all, I personally use Pixl Editor and can sure you they have a gradient tool. If you need help with that I can try to help you.

Second, it is a bit hard to understand what images you are talking about. So could you point us, what page of your site has that images or blocks or sections that you are trying to have gradient with.

Best regards,
Anna


#3

I need to apply the gradient tool to just one part of the image...
the part that is white, the white diagonal stripe part.

You asked what image I refer to: this is the image. I need the white part to be a gradient pink.

1. If i try to apply the gradient tool when I have the existing image open in Pixlr,
then the gradient overlaps everything and the whole image dissapears beneath it.

The image i am referring to, which dissapears beneath it, is the 'diagonal slice' image with images on the right and white space on the left.

2. PROCESS 2: Use Indesign
Step one: Create the gradient image using Pilxr. Save to desktop.
Step two: Create new indesign document; add that Pixlr gradient across the whole background.
Step three: Create a new image box, that stretches over 80% of the document; in that new image box,
past in the 'Diagonal slice image' which has the white space on the left and the image on the right.

Problem: Now the gradient exists on 20% of the overall Indesign Image, and on the right hand side is the 'Slice Image'.

The 'Slice image' still has white space on the left hand slice of it, and that white space still needs to be a gradient of pink.

Solution: I need some cropping tool that lets me 'Slice Crop' diagonally, so i can get rid of the white slice, and just have a wierd diagonal image that i can insert to indesign.

Then, I would apply the 3-step process outlined above using Indesign, and it would actually work.

Image illustrates the indesign problem: https://daks2k3a4ib2z.cloudfront.net/56c4fd1920f9e0ef31f3faae/56edf3a4e7acd13d1631c9fc_example.jpg


#4

Hi @Elliot

Here is a video how to apply gradient on that ONLY white part of your image:

And here is result that I got:

Regards,
Anna


#5

Thank you very much

The solution has been found, and my glorious idea has been turned into a Vibrant Reality.

:slightly_smiling:
-Elliot


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.