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

AP - How to Extend Pixels


Recommended Posts

I use a third party image caching service for a website I manage.  One of the interesting features is their ability to "stretch" a photo without distortion, to horizontally fill the website window.  This is done by taking the last vertical column(s?) of pixels at the left and right ends of the original, and duplicating them repeatedly to fill the space.  See "0.jpg" for an original image, and "1.jpg" for the "stretched" version.

I'm curious as to the steps involved to create this affect inside AP.

0.jpg

1.jpg

Link to comment
Share on other sites

I'm assuming you have resized the canvas to accommodate the stretched selection.

  1. Select the Column marquee tool
  2. Select the far right edge of the image
  3. Copy and paste, this will create a new pixel layer
  4. Duplicate that layer about 4 -5 times and group them
  5. Select the Move tool and stretch the group.

The reason for duplication is because of transparency, you can see that effect by not duplicating the layer in step 4.

You don't have to select the far right edge you could select any column and stretch it.

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

@firstdefence Can you explain the “because of transparency” bit please?
I can see there’s something that looks like a kind of transparency gradient there on the stretched layer but I don’t understand why it’s there.
Or, to put it another way, I don’t have any transparency in the original copied pixels so why do I have some in the stretched pixels?
Also, is this expected behaviour for all/most photo manipulation software or is it just an Affinity Photo thing?

Link to comment
Share on other sites

@GarryP Re transparency, if you make a column selection and copy/paste it to a pixel layer, then increase it's width you don't end up with a solid you end up with a semi transparent blur for want of a better word.

So in this example image I'll make a selection and stretch that 1 pixel selection
Screen-Grab.png

I select the column marquee tool and make a single pixel column
Screen-Grab-1.png

Next I copy/paste to a pixel layer
Screen-Grab-2.png

and then stretch that pixel column, notice the transparency
Screen-Grab-3.png

Duplicating the pixel layer solids the pixels up.
Screen-Grab-4.png

Just tried this in photoshop and while it shows a solid stretch, upon applying the stretch it goes from solid to transparent. See images below.

This is just prior to the transform being applied in Photoshop
Screen-Grab-6.png

This is after the transform has been applied in Photoshop
Screen-Grab-5.png

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

firstdefence: I saw that this produced transparency but my question was about why I get the transparency. Where does the transparency come from and why is it applied when the original pixels had no transparency? In other words, which workflows benefit from the software automatically adding the transparency (even though I haven’t told the software to do it)?
In your examples from Photoshop I can see that the opacity dwindles from left to right which looks like it could be useful in some cases – merging photos, etc. – but Affinity Photo seems to have the highest opacity in the middle of the stretched layer – there’s a kind of ‘opacity bump’ in the middle (see attached image) – which doesn’t look very useful to me.

telemax: That’s a really nice tip. Thanks for sharing that.

opacity-bump.png

Link to comment
Share on other sites

Telemax is a good tip but when you move the slider you're removing the left side of the image. unclipping the canvas doesn't work.

You need a few more steps to complete the process.

  1. Duplicate the image layer and change it's opacity to 70%
  2. Apply the Affine filter to the bottom layer
  3. Align the top layer with the bottom layer
  4. Unclip the canvas
  5. Merge visible or just group
  6. Export

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

That technique didn’t work for me. I think there could be some steps and/or settings missing as the left-hand side of my attempt has a noticeable transparency, and “Align the top layer with the bottom layer” seems a bit fiddly to do manually.

I think an easier way is to just resize the canvas width – with top-right as the origin, to give a gap to the left – and then use the Affine transform as shown above. (Shame the offset can’t be specified in pixels (I tried -200px and it didn’t work) but it’s usable up to a point.)

Link to comment
Share on other sites

4 hours ago, GarryP said:

why I get the transparency

Because the Bilinear method is used for resampling.

Switching to Nearest is not a solution, Bilinear will be applied during layer rasterization or during export.

Of course you can export with Nearest mode, but it will spoil other image details.

 

 

Link to comment
Share on other sites

Ah, so if I understand it correctly – albeit at a very basic level – when I stretch a pixel layer the software uses the “View Quality” setting in Preferences to determine how the ‘new’ (virtual?) pixels are created. And, because “Bilinear” does some maths that naturally produces transparency, that’s why I get a transparency in some of the ‘new’ pixels; the “opacity bump” coming simply from how the “Bilinear” function works.

Also, while I can switch to a View Quality of “Nearest Neighbour” and do a stretch without the transparency coming in, as soon as I rasterise this newly-stretched layer it will automatically be resampled using “Bilinear” no matter what the View Quality setting is.

If this is all correct (up to a point), my first thought is that “View Quality” might not be the best name for this setting as it’s a bit confusing. If it was renamed to something like “Resampling Method” it could give the user a little more information about what it was used for, rather than “View Quality” which is a bit ‘generalised’ and doesn’t really give much information.

My next thought is that this “View Quality” setting doesn’t seem to be used consistently. When I stretch a pixel layer this setting is used but when I rasterise a pixel layer this setting is ignored. This doesn’t seem right to me but I could well be missing more information.

A further thought is that the Photoshop stretching seems to do a nicer job in this specific case – single pixel stretching, or, less specifically, stretching the ‘side’ of a layer – where the transparency is added in a more natural way (with no “opacity bump” in the middle). Could a setting or something be added to allow the user to choose what they want to do in these instances? (The context bar has plenty of room.)

Anyway, thanks for giving some extra information on this. Even if I don’t understand it completely it gives me something to think about.

Link to comment
Share on other sites

2 hours ago, GarryP said:

my first thought is that “View Quality” might not be the best name for this setting as it’s a bit confusing. If it was renamed to something like “Resampling Method”

I think because when you rescale a raster layer in Nearest mode, there is a loss of quality. Rescaling test.afphoto

Link to comment
Share on other sites

Simplest effective method is to use the Mesh Warp tool.

  1. Resize canvas to desired length.
  2. Select the Mesh Warp Tool
  3. Double click next to the right top corner node to add a freeze line.
  4. Select both right-side corner nodes being careful to not select the nodes you have just added (Nodes will turn black when selected)
  5. Click on one of the black nodes and pull across to cover the transparent area created earlier.
  6. Bear in mind you cannot constrain the mesh tool, well as far as I am aware.

On the context menu you can select different resample methods Bilinear included.

vIgURf.gif

iMac 27" 2019 Somona 14.3.1, iMac 27" Affinity Designer, Photo & Publisher V1 & V2, Adobe, Inkscape, Vectorstyler, Blender, C4D, Sketchup + more... XP-Pen Artist-22E, - iPad Pro 12.9  
B| (Please refrain from licking the screen while using this forum)

Affinity Help - Affinity Desktop Tutorials - Feedback - FAQ - most asked questions

Link to comment
Share on other sites

That’s a really great technique. Thanks for sharing.
In the tests I’ve done it doesn’t really matter that you can’t snap the mesh to the corners of the canvas as the corners of the mesh can be brought out from the corners of the canvas a bit (maybe with a little curve) for a slightly more natural look.
Also, a quick swipe down with a large In-painting brush afterwards seems to give a better transition.
And a bit of a Live Gaussian Blur (with Preserve Alpha) on the affected area helps too.
My example below didn’t take much time to do (it needs much more work but what you get for just a little work is good).

mesh-extend-before.png

mesh-extend-after.png

Link to comment
Share on other sites

  • 2 years later...
On 9/19/2019 at 10:42 AM, GarryP said:

Where does the transparency come from and why is it applied when the original pixels had no transparency? In other words, which workflows benefit from the software automatically adding the transparency (even though I haven’t told the software to do it)?

Hi,

even if this question has been raised a long time ago, I think it has not been answered, and bothers many users (including myself ;-)

The answer is actually simple if you use a black/white pattern:

image.thumb.png.82e6c87cc959fbcda23febaa0ceb96e3.pngWhen you stretch this pattern by factor 2, all white becomes gray (255->191), and all black becomes muddy (0-64):

890860537_Screenshot2022-03-16at08_14_01.thumb.png.f7a2a8e4663e99af9d2b9b3419be57d0.png

All hard edges get blurred, as the DPI get 1/2 of original.

When you replace white by transparency, you will see that resampling unavoidably will get what you observe: all pixels will get blurred with neighbouring pixels. The more you stretch, the more you blur.

Copying pixels to get a larger source area (from 1 to 4 or 8 pixel) will mitigate the blurriness, as it then blurs pixels of same color.

 

So it is just mathematics, and nothing intended to support any specific workflow.

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

Link to comment
Share on other sites

4 hours ago, mmaaxx said:

they totally should fix this.

Could you elaborate ? There is nothing broken, it works as designed, so what should be fixed?
you may raise a feature request if you think a functionality is missing or you want a shortcut. As @telemax and @firstdefence have shown in earlier posts, you can get the requested function today by a few simple steps.

Mac mini M1 A2348 | Windows 10 - AMD Ryzen 9 5900x - 32 GB RAM - Nvidia GTX 1080

LG34WK950U-W, calibrated to DCI-P3 with LG Calibration Studio / Spider 5

iPad Air Gen 5 (2022) A2589

Special interest into procedural texture filter, edit alpha channel, RGB/16 and RGB/32 color formats, stacking, finding root causes for misbehaving files, finding creative solutions for unsolvable tasks, finding bugs in Apps.

 

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.