Making a vector-based UI

[Dominus Spxrk]

Usually when I make my UI, I get white shadows that I don't add when it's uploaded to the cloud and then when I see my uploaded UI image, I see it. How can I overcome this issue and remove it?

I know Adobe XD doesn't have this sort of issue when you export the UI design.

[Dan C]

Hi Dominus Spxrk,

Welcome to the forums

I'm sorry to hear this, could you please confirm for me;

What format are you exporting to?

What export settings are you using?

Does your file have any fx applied?

If possible, can you provide a sample Affinity file for me?

 

[Dominus Spxrk]

When I upload to the cloud this happens

 

Adobe XD:

 

Affinity Designer:

 

*The sizes may be different from the two images*

How can I export it to the cloud perfectly without getting the fringes/white shadows on the image I export?

[firstdefence]

Are you working from a transparent background, if not go to File > Document setup... click on the colour tab and set the background to transparent. Also make sure that, even though you have no stroke set, the stroke colour is set to white not an off white and then select no stroke. Now create your white panel.

It may have a bearing it may not, just covering all bases here.

 

[Dominus Spxrk]

Nope. It doesn't help. I don't even put strokes on. It's how the cloud website I uploaded it from just filters it.

[Dominus Spxrk]

I see that the website I uploaded it from creates an alpha mask causing it to create white shadows around the image

[Bryce]

I don't see what the difference is other than the radius of the corners. What am I missing?

[Dominus Spxrk]

It's that when I upload an UI from Adobe XD, the website I uploaded it from doesn't add an alpha mask, creating no white shadows around the UI. However, doing it on Affinity Designer causes it to form white shadows, with alpha mask.

[kaffeeundsalz]

I feel the same as @Bryce. Is the problem you encounter visible anywhere in your screenshots? With UI, you mean the white rectangle with rounded corners in the center of your image? I can see something that looks like it might be a thin gray stroke around the rectangle in the Affinity Designer version. Is this what you mean by "white shadows"?

[firstdefence]

Also what File type are you exporting to? and what file type was the files type exported to from Adobe XD?

What cloud website are we talking about here, WIX? 

Can you upload both files so we can take a look.

[dutchshader]

Is it the small white border around the design? The cause could be that the design is not on a whole pixel.

[Dominus Spxrk]

@kaffeeundsalz Yes.

[Gear maker]

Dominus, in your Affinity image there is some type of bounding box around the white shape.  What is causing that bounding box?  And what is causing it to be offset from the edges of the white?  I don't recognize it from  AD.  It looks like whatever the cloud is doing it's trying to fill that box.  If it's actually a bounding box it  should be tightly around the white area.  Without seeing the actual drawing I can't tell what is causing this offset.

[firstdefence]

@Dominus Spxrk

Also what File type are you exporting to? and what file type was the file type exported to from Adobe XD?

What cloud website are we talking about here, WIX or something else?

[Dominus Spxrk]

I always upload it on PNG. There's no difference from other image files I don't consider exporting it to.

[Dominus Spxrk]

I use ROBLOX to upload images as part of developing UI Designs into the User Interface.

[Dominus Spxrk]

Case solved! After days of trying to find what's best, I realize that "Pixel" mask helps a lot when it comes to this.