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

Recommended Posts

I'm trying to superimpose one photo on top of another, with a gradient opacity. Both are roughly circular, and I want the opacity of the top image to be 0 in the centre and 100 at the outside. I've tried to use a radial gradient, and it gets the opacity down in the centre, but I can't work out how to set the outside stop so that it leaves the photo's colours unchanged. I seem obliged to set it all to a specific colour, which isn't what I want. How do I get round this?

Link to comment
Share on other sites

I recently used gradient fills in Publisher for the first time and also scratched my head to set the colors at each stop.  The UI is different from the apps I am accustomed to, but not hard once the trick is learned.

I found a couple of ways to do this.  1) In Publisher and Designer (presumably Photo is the same), select your object.  Add your desired type of gradient (radial) using the Fill button on the toolbar, and selecting the Gradient tab.   Click on the desired stop, and it will enlarge to indicate it's selected.  Click the Color button in the gradient panel and set your desired color, then adjust the opacity field/slider in the gradient panel.  Click the next desired stop, and repeat the process.  2) Use the Fill tool from the sidebar, set the desired type of gradient from the Type dropdown on the toolbar, and drag out your gradient on your object.  Click on the desired stop, and it will enlarge to show it's selected.  In the Color panel (right stack of tool palettes), set the desired color and opacity.  Click on the next desired stop, and repeat the process.

That was for fills.  The Transparency tool works in a very similar way, but color is irrelevant, only opacity matters.  When the Transparency tool is active, there is an unlabeled "fill" button on the toolbar just right of the Type field.  Clicking that opens the Gradient panel, where you can select stops and set opacities.  Or, you can click stops over the object, and set stops in the Color panel.

 

Link to comment
Share on other sites

Assuming that you’re in Photo, attach a Mask to the layer with the image that should be transparent in the center. With the mask layer selected, put a Radial gradient into the mask - black in the middle (to make the center of the image transparent) extending to white at the periphery (to make the edges of the image opaque). Slide the center point of the gradient back and forth to change how quickly the transparency gives way to opacity.

If you put the second photo underneath, it should show through in those areas where the top image’s mask is black.

Affinity Photo 2, Affinity Publisher 2, Affinity Designer 2 (latest retail versions) - desktop & iPad
Culling - FastRawViewer; Raw Developer - Capture One Pro; Asset Management - Photo Supreme
Mac Studio with M2 Max (2023}; 64 GB RAM; macOS 13 (Ventura); Mac Studio Display - iPad Air 4th Gen; iPadOS 17

Link to comment
Share on other sites

Thanks both of you. I spent ages experimenting with gradients and masks, and somehow never got it right – but you make it sound so simple. Presumably this technique with masks is the reason why the Transparency tool is in Publisher and Designer but not in Photo.

Link to comment
Share on other sites

8 hours ago, smadell said:

Assuming that you’re in Photo, attach a Mask to the layer with the image that should be transparent in the center. With the mask layer selected, put a Radial gradient into the mask - black in the middle (to make the center of the image transparent) extending to white at the periphery (to make the edges of the image opaque). Slide the center point of the gradient back and forth to change how quickly the transparency gives way to opacity.

If you put the second photo underneath, it should show through in those areas where the top image’s mask is black.

I would have thought that would work, but I'm having trouble getting the gradient to work that way in the mask in 1.8.

Could I trouble you to provide a sample .afphoto file that demonstratest this?

-- Walt
Designer, Photo, and Publisher V1 and V2 at latest retail and beta releases
PC:
    Desktop:  Windows 11 Pro, version 23H2, 64GB memory, AMD Ryzen 9 5900 12-Core @ 3.00 GHz, NVIDIA GeForce RTX 3090 

    Laptop:  Windows 11 Pro, version 23H2, 32GB memory, Intel Core i7-10750H @ 2.60GHz, Intel UHD Graphics Comet Lake GT2 and NVIDIA GeForce RTX 3070 Laptop GPU.
iPad:  iPad Pro M1, 12.9": iPadOS 17.4.1, Apple Pencil 2, Magic Keyboard 
Mac:  2023 M2 MacBook Air 15", 16GB memory, macOS Sonoma 14.4.1

Link to comment
Share on other sites

Walt...

I've attached an image with i) a circular image of a flower on top; ii) a series of black lines beneath it; and iii) a mask on the flower layer. This seems to work the way it should. I'll note that I started with a canvas measuring 1024x1024 and tried to resize it to half-size, and the mask got royally screwed up. I haven't quite figured out why. But, I deleted the mask and created a new one on the smaller document, and this works well. Was this a "lock children" kind of issue? a bug? I don't yet know. Anyway, consider the attached a file as a kind of "proof of concept" in that it can be done; implementation was a bit clunky, though.

Photo with Radial Mask.afphoto

Affinity Photo 2, Affinity Publisher 2, Affinity Designer 2 (latest retail versions) - desktop & iPad
Culling - FastRawViewer; Raw Developer - Capture One Pro; Asset Management - Photo Supreme
Mac Studio with M2 Max (2023}; 64 GB RAM; macOS 13 (Ventura); Mac Studio Display - iPad Air 4th Gen; iPadOS 17

Link to comment
Share on other sites

The only way to edit an existing gradient is to have created it in a vector object. A typical Mask layer is treated as a Pixel based layer, and the gradient can’t be tweaked after the fact. 

Affinity Photo 2, Affinity Publisher 2, Affinity Designer 2 (latest retail versions) - desktop & iPad
Culling - FastRawViewer; Raw Developer - Capture One Pro; Asset Management - Photo Supreme
Mac Studio with M2 Max (2023}; 64 GB RAM; macOS 13 (Ventura); Mac Studio Display - iPad Air 4th Gen; iPadOS 17

Link to comment
Share on other sites

1 hour ago, jatclat said:

One more question. After I have done it, I can't work out how to go back into the gradient to re-edit it. Is there a way of doing it?

Add a Fill layer (any colour) to the image as the mask and adjust the gradient nodes opacity - the gradient will then remain editable

 

Photo with Radial Mask-3.afphoto

To save time I am currently using an automated AI to reply to some posts on this forum. If any of "my" posts are wrong or appear to be total b*ll*cks they are the ones generated by the AI. If correct they were probably mine. I apologise for any mistakes made by my AI - I'm sure it will improve with time.

Link to comment
Share on other sites

Thanks, carl123. I knew there was a way to do this, but drew a blank. Too simple...

Affinity Photo 2, Affinity Publisher 2, Affinity Designer 2 (latest retail versions) - desktop & iPad
Culling - FastRawViewer; Raw Developer - Capture One Pro; Asset Management - Photo Supreme
Mac Studio with M2 Max (2023}; 64 GB RAM; macOS 13 (Ventura); Mac Studio Display - iPad Air 4th Gen; iPadOS 17

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.