Layers

[kconkling]

I did use a couple of layer effects that I created in AD.  AD is the only program I used to make all the elements and I did redo pretty much all of them.  I used Inkscape to see what it would loo k like, which wasn't very pretty.  I will put up some screenshots for you to see.  The first one is Inkscape...the 2nd one is AD, but this opened totally wrong and was not how it was supposed to be...I put every row of buttons in a group so I had 8 groups.  Now it has all changed.  I opened the first group so you can see that everything in AD is vector, but it changed from group to layers, which I didn't add any.  I was going to rename the layers inside of each group today.  I don't understand...could it be because I duplicated buttons?   

[kconkling]

this is what it looks like in afdesign before I exported it as an svg.  Each button is in a group

[v_kyr]

9 minutes ago, kconkling said:

...The first one is Inkscape...the 2nd one is AD, but this opened totally wrong and was not how it was supposed to be...

Not sure if you mean AD or Inkscape here with "opened totally wrong ... and not how it was supposed to be"?

However, when you do that work in AD and export as SVG, you should first of all look how that stuff is shown up in a corresponding Web Browser (Firefox, Chrome, MS Edge etc.) then. - Affinity Designer and Inkscape do have very different SVG engines, meaning they don't write out, parse in and interpret SVG in the same manner here. Thus things which might look Ok in one of these tools may not be treated and handled the same way in the other one. - Since what you do here is first of all for web page design, you should look how it looks then in the usual by people used web browsers. If things look right there (in different web browsers) then you can be more sure that your exported and by AD or Inkscape generated SVG vector code is probably Ok. - Web browsers usually have much better and more tolerant SVG engines than AD or Inkscape, where the later is more advanced than AD in handling and generating SVG code, even it often adds a lot of unneeded SVG stuff.

Quote

...I put every row of buttons in a group so I had 8 groups.  Now it has all changed.  I opened the first group so you can see that everything in AD is vector, but it changed from group to layers, which I didn't add any.  I was going to rename the layers inside of each group today.  I don't understand...could it be because I duplicated buttons?   

Well maybe you should delimit (circling problems) in smaller steps then here, meaning checking for individual of your web buttons etc. if those are handled the right way. So making multiple smaller documents where you place single ones on and thus can better test/check if those are individually handled right. That way it's also easier to possibly inspect the generated SVG code inside an text editor. - Afterwards you can copy them over to the big whole doc as you have now.

 

[kconkling]

It did open wrong in AD as an svg as well as in  Inkscape.  How do I open this in a browser?  I use Chrome?  Thank you   

[firstdefence]

3 minutes ago, kconkling said:

It did open wrong in AD as an svg as well as in  Inkscape.  How do I open this in a browser?  I use Chrome?  Thank you   

drag the svg into the browser window.

[v_kyr]

There should be several ways to open SVG files in a browser. You can try to drag'n'drop a SVG file onto the browser window, use the browser "File > Open..." command, or from Win Explorer doing a right click on a SVG file and select a Webbrowser via "Open With..." etc.

[kconkling]

Very odd to me, but I got in my first Group and opened three new Layers (L)...first layer is back panels, 2nd layer is icons and shapes, and 3rd is text.  So those 3 Layers are under the first group which would be the first buttons in col 1.  And now it opens perfect...screenshot in Inkscape below..it also opened correctly in chrome.  So, I only changed one group, but it fixed the whole document.  I'm confused but happy about this.  So, this would officially be an svg then for the client?

 

 

[v_kyr]

If everything looks and is as the way you intended, also everything when exported is defined as beingin plain vector as you wanted, fine. So if it's ready for you, it's your decision when to show that your client then. - BTW, the first rows right side rounded rect buttons aren't labeled, but maybe it was your intension to show some colored unlabeled buttons too then (?).

[Bri-Toon]

4 hours ago, v_kyr said:

Judging from the above shown AD screenshots, there were a buch of pixel and FX effects applied layers included.

I think you identified the problem. I forgot that most of the effects in Affinity are raster based. So if you add something like a gaussian blur our a bevel effect, then exporting the file to a SVG will pixelate those regions.

[Alfred]

5 minutes ago, Bri-Toon said:

I forgot that most of the effects in Affinity are raster based.

I’m pretty sure that all of the filter effects are rendered as raster.

[kconkling]

yes, v-kyr...I meant for those buttons to leave blank.  

bri-toon...here's the screenshot that I'm talking about.  If your talking about fx...I had to use that alot to add color in the buttons.  Most of the time it wouldn't just add a color the way it was supposed to so I used the color overlay in fx.

 

[Bri-Toon]

6 minutes ago, Alfred said:

I’m pretty sure that all of the filter effects are rendered as raster.

Oh well look at that, even the outline effect is. Okay, you win the cigar. 

6 minutes ago, kconkling said:

bri-toon...here's the screenshot that I'm talking about.  If your talking about fx...I had to use that alot to add color in the buttons.  Most of the time it wouldn't just add a color the way it was supposed to so I used the color overlay in fx.

Okay well then that is the problem. The Affinity effects are not for exporting purposes. They will give you the pixelated look you are getting.

You mentioned that you're having a hard time getting the right color. Could you elaborate on that? Maybe we can help you with that part. If you mean separate parts of a group, you can hold Ctrl and click separate regions of a group. Is that what you mean?

[v_kyr]

25 minutes ago, kconkling said:

yes, v-kyr...I meant for those buttons to leave blank.  

...

 

Some of the text, signs and buttons look blurry here, due to the zoomlevel and due to the fact, that you probably placed them as images inside the doc. - That's just for demonstration showup here, not what you will send the client right.

@Bri-Toon Related to what I said above to FX effects, yes these are always saved as rasterized portions and thus nothing you really want to use for plain full/any size scalable vector drawings. Instead for coloring one have to use usual vector based color stroke and fills, in order to keep the whole vector based.

[kconkling]

Well, turns out that this client wants these in eps format, so I tried converting the svg to eps....and this is what happened.  I explained to Bri-Toon that I had to use the fx color overlay quite a few times to get the color fill to work.  I can't remember exactly what I was doing when it wouldn't work, but I gave up and started using the overlay.  So I'm prob going to have to redo most of these now and I'll let you know when I can get something to fill so it'll make more sense.  Thanks

[v_kyr]

Ah Ok I understand. - BTW you can make yourself also reusable Assets out of some of these buttons then in AD, in case you often need to reuse such things later. Also the AD related UI-Kit (a separate download offer from Affinity when you bought AD) contains some ready to reuse assets (vector iOS UI design signs, some icons etc.) which you can reuse for buttons too here. AFAI recall they are all vector based.

[kconkling]

ah...thank you v_kyr!  Yes, that will be helpful

 

[kconkling]

This is why I always used the fx color overlay fill...because I added a new icon and want to make it green.  Everything I've done will not make it fill.  Can you tell me what I'm doing wrong?  Thank you!

[dutchshader]

That's because it is a embedded document, this can not be edited within this doc.

Might be better to open "aboutus" and select all copy this and paste into your doc.

[kconkling]

How do I put icons on the buttons then?  Or add anything else?  I always use "place".

[dutchshader]

you can use place, but the placed items can't be edited within the document.

if you double click on the item it opens in a new tab, there you can edit the item.

[kconkling]

Oh!!  Thank you....I'm gonna try that now.  Appreciate your help

 

[kconkling]

I just tried it and it didn't work.  Said I was working on an embedded object, but still wouldn't change colors.  It brought it out on its own layer though...

 

[dutchshader]

The aboutus icon, is that a vector or a raster file?

[kconkling]

Heres a screen shot...this suitcase I'm trying to turn yellow.  This is after I double clicked on it.  It won't change...am I missing something?

[dutchshader]

The color won't change because it is a image an not a vector file.