Jump to content

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

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - FeedbackInstagram & Flickr

Share this post


Link to post
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?

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - FeedbackInstagram & Flickr

Share this post


Link to post
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

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - FeedbackInstagram & Flickr

Share this post


Link to post
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.)

Share this post


Link to post
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.

 

 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

That transparency problem has been discussed before in these forums. Personally I think it is an error in programmer thinking – if selection consists of whole pixels there should be no reason for transparent edges. If we want transparency, there is feather feature for it.

Share this post


Link to post
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

Share this post


Link to post
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" Late 2015 Fully Loaded, iMac 27" Mid 2011 both running High Sierra 10.13.6 - Affinity Designer/Photo & Publisher - Illustrator CC, Inkscape, Blender, Sketchup, Pepakura Designer, MTC, Pixelmator & Pixelmator Pro + more... XP-Pen Artist-22E, - iPad Pro 12.9 B|  

Affinity Help - Affinity Desktop Tutorials - FeedbackInstagram & Flickr

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | 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.