frankstallone Posted December 5, 2014 Share Posted December 5, 2014 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? =) Quote Link to comment Share on other sites More sharing options...
frankstallone Posted December 5, 2014 Author Share Posted December 5, 2014 This may be relevant: I did take the original screenshot via Apple's standard screenshot which would take everything at 2x. I downloaded RetinaCapture today to take screenshots at 1x and I am wondering if this has something to do with this ghosting issue I am seeing. Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted December 5, 2014 Staff Share Posted December 5, 2014 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
frankstallone Posted December 8, 2014 Author Share Posted December 8, 2014 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 Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted December 8, 2014 Staff Share Posted December 8, 2014 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
frankstallone Posted December 8, 2014 Author Share Posted December 8, 2014 Stupid question: What does "make sure it is pixel-perfect aligned" mean exactly? EDIT: Because I am doing exactly what you are saying and it's not working. It looks like after I paste the 1px wide select it pastes as 2px wide instead so I am missing something. =) Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted December 8, 2014 Staff Share Posted December 8, 2014 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
frankstallone Posted December 8, 2014 Author Share Posted December 8, 2014 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 Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted December 8, 2014 Staff Share Posted December 8, 2014 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. Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
frankstallone Posted December 9, 2014 Author Share Posted December 9, 2014 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 Quote Link to comment Share on other sites More sharing options...
Staff MEB Posted December 9, 2014 Staff Share Posted December 9, 2014 Can you do me a favor? Please open the attached file, export it as a PNG and post the exported image here. Are you working on a retina display? Sorry the trouble Frank. I'm trying to pinpoint the issues. Thank you for your help with this. test.afdesign Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
frankstallone Posted December 9, 2014 Author Share Posted December 9, 2014 Yes I am on a new MacBook Pro Retina screen and I am hoping it is 'me' and not the software as odd as that sounds I have no problem being wrong. Quote Link to comment Share on other sites More sharing options...
frankstallone Posted December 11, 2014 Author Share Posted December 11, 2014 This is breaking my heart; due to deadlines I am forced to throw this portion of my design in Photoshop. Not ideal but not a deal breaker as I do genuinely love the workflow in Affinity Designer. Quote Link to comment Share on other sites More sharing options...
pickledpirate Posted May 26, 2018 Share Posted May 26, 2018 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 Quote Link to comment Share on other sites More sharing options...
firstdefence Posted May 26, 2018 Share Posted May 26, 2018 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... The left Red end cap The one pixel width white Middle bar that can be stretched to any length without loss of opaqueness The right white end cap. The corner radii are 7px. 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. Exported to 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 Quote 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 (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 More sharing options...
Alfred Posted May 26, 2018 Share Posted May 26, 2018 1 hour ago, firstdefence said: Well, I haven't solved the problem but I have found a solution. Say that again, slowly! Quote Alfred 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 More sharing options...
firstdefence Posted May 26, 2018 Share Posted May 26, 2018 5 minutes ago, αℓƒяє∂ said: Say that again, slowly! 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 Alfred 1 Quote 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 (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 More sharing options...
pickledpirate Posted May 28, 2018 Share Posted May 28, 2018 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 Quote Link to comment Share on other sites More sharing options...
firstdefence Posted May 28, 2018 Share Posted May 28, 2018 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/ Quote 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 (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 More sharing options...
Staff MEB Posted May 28, 2018 Staff Share Posted May 28, 2018 Hi pickledpirate, Welcome to Affinity Forums This is a known issue that's already logged to be looked at. No need to fill a bug report for it. firstdefence 1 Quote A Guide to Learning Affinity Software Link to comment Share on other sites More sharing options...
firstdefence Posted May 28, 2018 Share Posted May 28, 2018 Quote 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 (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 More sharing options...
frankstallone Posted May 29, 2018 Author Share Posted May 29, 2018 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.