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

Recommended Posts

It 'appears' that the opacity of a pixel element in Affinity Designer is not set to 100% opaque when exported. I have a very old web UI I am working with that is pixel based. I am using an old technique that worked in the past in Photoshop, and while I am in Affinity Designer it looks great. When I export though, the area I am looking to be opaque appears to have a lower opacity and one can see the elements behind it. 

 

Let me elaborate

 

I have a pill button. This button has a left edge, and a right edge. The center area could be 1px width and Xpx wide. In other words the 'texture' of this pill button can be easily repeated by stretching a 1px wide element. In Photoshop one would marquee the 1px wide Xpx height area, copy and paste that into a new layer Command + T to Transform and drag out the other end to effectively duplicate that 1px to Xpx depending on the distance you go. Easily done similarly in Affinity Designer. Attached though is the results as it appears in Affinity Designer and then the results after it has been exported in PNG format. 

 

The attached image shows Affinity Designer's view in the background in pixel view mode and below (Apple Preview) the actually Exported PNG view. Can you see the pill's extension? See how it is not opaque? What am I doing wrong? =)

post-3311-0-59820200-1417799957_thumb.png

Link to comment
Share on other sites

  • Staff

Hi frankstallone,

Welcome to Affinity Forums.

This already happened to me a couple of times but i've been unable to pin point the cause yet.

 

One of the reasons may be that the pasted bit isn't placed at whole pixel boundaries and when you stretch it some parts (usually the sides become partially transparent. There may be other reasons, but as i said i'm still unable to repeat it consistently.

 

It may help if you post just the part of the file (you can delete the rest) that is leading to export problems so we can take a look.

Link to comment
Share on other sites

Attached is just the button layers. You will see an "Extender" that is the 1px wide area that I use to stretch as I mentioned above. I tried it again taking another 1px wide area of the original button and get the same results (that layer is in there too). All the other layers work fine because the rest are not stretched.

 

Thank you for your time and patience,

Frank

affinity-designer-button.afdesign

Link to comment
Share on other sites

  • Staff

This is the same problem as i described. The sides of the stretched object becomes transparent. This can easily be seen by changing View Mode to Pixels and setting the background to Transparent background in Document Setup.

 

Try this and let me know if it worked for you:

Instead of copying the 1 width pixel column from the Original Button layer, make sure it is pixel-perfect aligned, duplicate it, rasterise it (Layer-> Rasterise...) and copy the 1 width pixel column from the rasterised version instead. Then paste and stretch it (the rasterised version). It shouldn't make the sides transparent.

Link to comment
Share on other sites

  • Staff

How are you selecting and copying the 1pixel width column? You should use the Rectangular Marquee Tool in the Pixel Persona. Make sure snapping is active  (View -> Snapping Manager... -> Enable snapping also check Snap to units: Pixels). This will help to select a column with just one pixel width. 

 

After you have copied it, deselect your previous selection (Select -> Deselect), change to Draw Persona again, create a new layer and paste the column. If you stretch it now with the Move Tool, it should remain solid.

 

Regarding the pixel-aligned question, take a look at the screenshot attached. On the left is a perfectly snapped to the pixel grid 30 px square at 1000% zoom. On the right a duplicate of the same exact rectangle but not aligned with the pixel grid - take a look at the X and Y coordinates on the transform panel: they aren't whole pixels and so the boundaries of the rectangle on the right look fuzzy. Having your vector shapes aligned ensure that you're working with full pixels and that you will get sharp/clean edges in all operations that deal with pixels.

post-59-0-05720600-1418076912_thumb.png

Link to comment
Share on other sites

Yes I am using the Rectangle Marquee Tool in the Pixel Persona with Enable Snapping -- checked -- in Snapping Manager, but Snap to units was set to Centimeters (I never saw that 'option' before so thank you for that!) but I am still getting a paste that looks like 2px and stretching shows that it's not working. I have messed with this enough for one day. I will come back tomorrow with fresh eyes, start from scratch and see if I can get it to work.

 

Thank you for your time and patience,

Frank

Link to comment
Share on other sites

  • Staff

It's probably because you're copying from the composite button layer (object + mask). Make sure you have created a duplicate of that layer and that you have rasterised it (just to keep your original layer intact if you need it later). Then use the Rectangular Marquee Tool to select and copy from the rasterised layer. It should copy and paste a perfect 1 pixel width column.

Link to comment
Share on other sites

Not happening MEB. I started with a new document, the left part of the pill which already existed, and the end part with already existed. Rasterized after making sure Pixels were set at the Snap to units. Attached is the outcome button new-archive-search-buttom.png and the two pieces I am using to make the button. I am using 1px width from the button_right.gif as I am sure you will see when you open all of these up. I don't want to open Photoshop MEB!! LOL

 

Thank you for your time and patience,

Frank

post-3311-0-84295500-1418129505_thumb.png

post-3311-0-10205400-1418129649.gif

post-3311-0-46276600-1418129649.gif

Link to comment
Share on other sites

  • 3 years later...

I'm also seeing this issue in both Affinity Photo and Affinity Designer.

I have been given a screenshot with a gradient background, and I need to mock up a modified version of the image. As the previous poster suggested, in Photoshop I would use the Marquee tool select a 1px wide rectangle, then stretch it horizontally. If I try this in Designer, the left and right edges of stretched area fade to zero opacity. I have tried the methods suggested by @MEB of snapping to pixel layers.

Oddly, I was able to achieve the result I wanted once, but I'm not exactly sure why. And then, if I rasterize this layer, the gradient effect comes back - see the attached screenshots below.

If this isn't a bug, then could someone tell me how to achieve the effect I'm after?

Thanks,

- picklepirate

 

image.thumb.png.71c294eebcf7ed4eec83ddfc771aa735.pngimage.thumb.png.946d771eaeb2e5a119eaaa1d1dcb3233.png

Link to comment
Share on other sites

Well, I have't solved the problem but I have found a solution. I created the elements in Draw Persona as close as I could to the original.

I have created a kind of kit, the kit consists of...

  1. The left Red end cap
  2.  The one pixel width white Middle bar that can be stretched to any length without loss of opaqueness
  3. The right white end cap.
  4. The corner radii are 7px.
  5. The shading is done with fx

The Kit can be duplicated and used to create a button and then rasterised.

In affinity after being rasterised.
1329637202_ScreenShot2018-05-26at21_55_56.png.7a441c83406280868f04d57094ec5641.png

Exported to PNG.
2019258010_rasterisedKitexported.png.335984708d6a21210f17d7e03b3655dd.png

Modified file with button kit.
affinity-designer-button Button Kit.afdesign

fx can be copied over from one layer to another by selecting the layer with the fx and ⌘+C then clicking on the layer you want the fx to be pasted to and ⌃+⌘+V

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

1 hour ago, firstdefence said:

Well, I haven't solved the problem but I have found a solution.

Say that again, slowly! xD

Alfred spacer.png
Affinity Designer/Photo/Publisher 2 for Windows • Windows 10 Home/Pro
Affinity Designer/Photo/Publisher 2 for iPad • iPadOS 17.4.1 (iPad 7th gen)

Link to comment
Share on other sites

5 minutes ago, αℓƒяє∂ said:

Say that again, slowly! xD

My mum says I'm special ¬¬

 

What I meant was I couldn't fix the loss of opaqueness when strrrrretching a pixel but I transformered the process using autobot technology :P

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

Hey @firstdefence thanks for your interest in this issue and your quick response!

This thread was created in December 2014, so I would hope that the original poster @frankstallone would have worked around it by now.

I'm happy you're able to reproduce the issue. Do you think this is a bug? Is there someone more appropriate to report this if it's a bug?

What would be great in the mean time is another general way to achieve the effect I'm after.

Thanks again,

- pickledpirate

Link to comment
Share on other sites

53 minutes ago, pickledpirate said:

Hey @firstdefence thanks for your interest in this issue and your quick response!

This thread was created in December 2014, so I would hope that the original poster @frankstallone would have worked around it by now.

I'm happy you're able to reproduce the issue. Do you think this is a bug? Is there someone more appropriate to report this if it's a bug?

What would be great in the mean time is another general way to achieve the effect I'm after.

Thanks again,

- pickledpirate

Stretching an opaque pixel shouldn't affect its opacity so I'd say this was a bug it can be reported here: https://forum.affinity.serif.com/index.php?/forum/38-bugs-in-affinity-designer-affinity-photo/

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

936221230_ScreenShot2018-05-28at14_01_44.thumb.png.4cbdcf608031c60f9ac769dd17fb7002.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

Nope. I never figured it out and had to resort back to Photoshop. That has happened a handful of times since this post but I am still using AD as my primary software if I can. Falling back to Photoshop when AD does something wonky. Sometimes I cannot post screenshots or files due to the nature of my work but I try to articulate as best I can as posts so that if others have the issue and search they can find my threads. That being said I think there are still a few quirks in AD that I have not been able to work around yet. Good luck working them out but if this one has been around since December of 2014 that's saying something.

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.