Color to transparent background gradient

[Ave.]

So let me first say that I’m no photo editing pro. I’ve been using photoshop elements for the past 7 years to edit my photos for album art. My main thing is recording and mixing music , so I got into photoshop elements as a easy way to make album art for my projects.  

I switched over to Affinity photo just last week , as I bought a new iMac and didn’t have access to download my 3 year old version of elements. 

My question is about creating color to transparent gradients . In photoshop elements it extremely easy. I just go to the gradient tool , select color to transparent gradient, then I can drag the gradient tool over my imagine in as many places as I like without making new layers every time. For example when i make a header image for my website I like to add a black to transparent gradient on the bottom my header image so it adds a nice effect. And most times each side of the image requires a different size gradient fade to make it look right. I could easily do that in photoshop elements. It seems In affinity photo that i have to create a new pixel layer for every gradient I want to add ? So if I want to add a black to transparent gradient in the left hand corner of my header and then add a blue to transparent gradient In the top right corner of my header image , ide have to create several pixel layers to do this? 

Thanks in advance for your time ! 

- Ave. 

Edited May 27, 2019 by Ave.
Spelling

[Old Bruce]

Or use one Black to transparent to Blue gradient.

[gdenby]

Hi, Ave.,

Its been more than 3 years since I've used Elements, and I rarely used it then. I don't recall how I did similar things in it. But in A-Photo, I find it extremely easy to create a vector layer over any pixels layers, and apply the gradient to that, and set the blend mode to get what I want. The vector can then be rasterized, and the merged layers exported to a web graphic.

Note, at present, most if not all web browsers support .svg files. You might want to make your web graphics w. those. Those files scale really well, and for effects like gradients and transparencies, the operations are very simple. And the files are quite small, often about the same size as rather heavily compressed .jpg, and thus a much better look.