User Decals - A Tutorial On How To Make .SVG (Request in separate thread)

[krisduv]

I did end up using these, did you just change my path to hyphens, split two off to a new decal and SVGOMG both layers? As usual, thanks for the help and advice.

Yep. I duplicated your layer (to make sure it was more or less the same pattern) and created a curve path text on it. Now that I think about it, maybe it would have been easier to use _ because of the height of the -, I had to change the alignment.

 

[LazArt]

Hi, I've been trying to recreate the vintage USAC Shield in Affinity Designer. It looks well enough when I upload it but gets mangled when I view it in showcase. The "AUTO CLUB" lettering is hand-pathed and merged, the "United States" lettering is fonts already converted to curves.

 

[Nuschel01]

Even-odd fill rule, I suppose.
@MatskiMonk

 

[MatskiMonk]

Even-odd fill rule, I suppose.
@MatskiMonk

Goddamn even odd rule.... ignoring which way paths are goin' like it thinks it's better than us.

 

[LazArt]

Goddamn even odd rule.... ignoring which way paths are goin' like it thinks it's better than us.

I guess I shouldn't have posed the problem if all I was going to get in response was sarcasm. Sorry.

 

[Nuschel01]

I guess I shouldn't have posed the problem if all I was going to get in response was sarcasm. Sorry.

It is actually the problem thought. I'm not sure how to fix it in whatever software you're using, but in theory you could hard-code it in the file itself.

 

[krisduv]

Hi, I've been trying to recreate the vintage USAC Shield in Affinity Designer. It looks well enough when I upload it but gets mangled when I view it in showcase. The "AUTO CLUB" lettering is hand-pathed and merged, the "United States" lettering is fonts already converted to curves.

I use AD too.

I forgot to mention the most annoying thing with AD. When you make an object with a negative space (I think it's how it's called but not sure) like a ring. Sometimes you have to select the inner curve and reverse it. Or you could have just a plain circle, not a ring.
Now I always trace clockwise without even thinking about it and reverse the inner part to avoid that.

 

[LazArt]

I use AD too.

Well I've since solved it, using that "counter-path" thing you mentioned.
As for the shield clipping, I used a base shield of red, then cloned a white shield shape, converted the rectangles to curves and then subtracted those from the clone shield.

 

[MatskiMonk]

I guess I shouldn't have posed the problem if all I was going to get in response was sarcasm. Sorry.

Chill, it was a joke between @Nuschel01 and I based on an earlier conversation.

Reversing the one of the curves is generally the way to do it, but it never works for me, so I have to use a less than ideal work around...

Problems with decals appearing correctly in the game

I'm trying to understand why some of my decals do not translate well in the game. I'm using the latest version of Affinity Designer, and I'm still in the learning stage. Many times after successfully uploading a decal to the decal uploader, certain shapes in the decal do not appear right when...

www.gtplanet.net

 

[krisduv]

Ok another weekend, another question. I made a Puma Formstripe mask with stitched lines, but it shows up in game as solid lines. Is this an error with the way made it, or will the game not accept the dashed line? Thanks.

And now I can't believe I didn't think to do the same thing I do all the time with strokes... which is "expand strokes".

Spoiler: Yes I am

Spoiler: Affinity help

 

[huff]

And now I can't believe I didn't think to do the same thing I do all the time with strokes... which is "expand strokes".

Spoiler: Yes I am

View attachment 1181800

Spoiler: Affinity help

View attachment 1181804

I just purchased Affinity, before leaving for 8 days camping. I am starting from the beginning again as the UI and function is very different from Vectornator. I may have a question or two, but I will read the tutorials first. Thanks for the tip on expanding strokes, I,m hoping to poke around in AD tonight once we are settled back in.

 

[BlackStar300]

I'm trying to follow these guides, but I'm not too savvy with all this. Would someone be able to help me if I upload the files I want? Even with some of the files I did manage to get to under 15 it says SVG not supported and its on 1.1 with Illustrator. IDK why this upload requirement is so hard.

 

[huff]

I'm trying to follow these guides, but I'm not too savvy with all this. Would someone be able to help me if I upload the files I want? Even with some of the files I did manage to get to under 15 it says SVG not supported and its on 1.1 with Illustrator. IDK why this upload requirement is so hard.

Post what you have in the svg request thread, one of us will look at it and help.

 

[LazArt]

Okay, so I'm having another problem where the color of the shape stroke is used for the fill as well, is this one of Affinity's "quirks" or is there a workaround?

 

[krisduv]

Okay, so I'm having another problem where the color of the shape stroke is used for the fill as well, is this one of Affinity's "quirks" or is there a workaround?

View attachment 1185330

Actually it's the same problem mentionned earlier.

your file probably looks like this



You have two options:

- first one:



- or even better:

 

[LazArt]

...I'm sorry, I have no idea what you just did there. Well, I tried to follow along but I don't have the option to separate the rounded rectangle even after I converted it to a curve.

 

[krisduv]

...I'm sorry, I have no idea what you just did there. Well, I tried to follow along but I don't have the option to separate the rounded rectangle even after I converted it to a curve.

Because the stroke isn't expanded, which I thought was the problem.
Sorry if my video isn't clear.
You can try to expand the stroke of your rounded rectangle, and then separate curves, etc.

 

[Vectra4]

Been having radial gradient issues, The code afaik is correct and formatted correctly however the way its rendering in the livery editor is strange.

<radialGradient id="898" cx="324.91" cy="360.67" r="18.65" gradientUnits="userSpaceOnUse"><stop stop-color="#fde8c1" stop-opacity="0" offset="0"/><stop stop-color="#fde8c1" stop-opacity="0" offset=".6187"/><stop stop-color="#fde8c1" offset=".81"/><stop stop-color="#fde8c1" offset=".84958"/><stop stop-color="#fde8c1" stop-opacity="0" offset="1"/></radialGradient>

This is supposed to look like this:


But comes out like this:


After some editing of the radius value to minus 5 I get close to what I need however it destroyed the image preview (I made the path extra large to see if the center hadnt wandered off):

Making the r value a minus is somewhat concerning, It really shouldnt work like that. Other radial's are working correctly but another only looked correct when edited to reduce the r value by 25 like with the above, So I am a bit confused as to what exactly xml wise Ive missed.

 

[MatskiMonk]

Been having radial gradient issues, The code afaik is correct and formatted correctly however the way its rendering in the livery editor is strange.

<radialGradient id="898" cx="324.91" cy="360.67" r="18.65" gradientUnits="userSpaceOnUse"><stop stop-color="#fde8c1" stop-opacity="0" offset="0"/><stop stop-color="#fde8c1" stop-opacity="0" offset=".6187"/><stop stop-color="#fde8c1" offset=".81"/><stop stop-color="#fde8c1" offset=".84958"/><stop stop-color="#fde8c1" stop-opacity="0" offset="1"/></radialGradient>

This is supposed to look like this:

View attachment 1187479
But comes out like this:
View attachment 1187476

After some editing of the radius value to minus 5 I get close to what I need however it destroyed the image preview (I made the path extra large to see if the center hadnt wandered off):
View attachment 1187478View attachment 1187480

Making the r value a minus is somewhat concerning, It really shouldnt work like that. Other radial's are working correctly but another only looked correct when edited to reduce the r value by 25 like with the above, So I am a bit confused as to what exactly xml wise Ive missed.

Radial gradients shouldn't need cx, cy or r. It should take them from the element you're then applying the radial gradient to.

<defs>
    <radialGradient id="898">
     <stop stop-color="#fde8c1" stop-opacity="0" offset="0"/>
     <stop stop-color="#fde8c1" stop-opacity="0" offset=".6187"/>
     <stop stop-color="#fde8c1" offset=".81"/>
     <stop stop-color="#fde8c1" offset=".84958"/>
     <stop stop-color="#fde8c1" stop-opacity="0" offset="1"/>
    </radialGradient>
  </defs>
 
  <circle cx="324.91" cy="360.67" r="18.65" fill="url('#898')" />

You've not included the viewbox or anything else so I don't know what the relative size should be... but I've left all the dimensions the same as you've posted.

 

[Vectra4]

Radial gradients shouldn't need cx, cy or r. It should take them from the element you're then applying the radial gradient to.

<defs>
    <radialGradient id="898">
     <stop stop-color="#fde8c1" stop-opacity="0" offset="0"/>
     <stop stop-color="#fde8c1" stop-opacity="0" offset=".6187"/>
     <stop stop-color="#fde8c1" offset=".81"/>
     <stop stop-color="#fde8c1" offset=".84958"/>
     <stop stop-color="#fde8c1" stop-opacity="0" offset="1"/>
    </radialGradient>
  </defs>
 
  <circle cx="324.91" cy="360.67" r="18.65" fill="url('#898')" />

You've not included the viewbox or anything else so I don't know what the relative size should be... but I've left all the dimensions the same as you've posted.

All of the radial gradients I have looked at that work in GTsport that are attached to a path are using cx-cy-r in the gradient defs, How would I be placing the center of the radial in a non center of the object without defining it somewhere?

I made a janky test svg testing the idea but havent figured out how I would define the radial center within the element Im applying it to.

But we then run into the real problem of how GT renders the radial ingame is different to how it is actually coded and read by other readers. Is it the gradient units def being userspaceonuse?

See how this looks ingame and codewise to you.

 

[huff]

Here is a question I am struggling with on my attempt at the Walkenhorst Peter Halley art car. When I did the side decals I had almost no issue with tracing and placing, but as I work through the more complex curved areas I struggle to create a decal that lays down where I need it. I am now around 80% done and I have had to resort to in game shapes, driving me up to the decal limit. How would you create a complex shape with stripes that transitions from the rear bumper to the top of trunk(boot). Do you guys do this as one decal, or one for each surface with careful alignment? Thanks.

 

[wowbaggerBR]

So, I'm considering an entry for the LEC #10. Thing is, I want to convert a highly detailed box art image to SVG. I know that I can simply trace de whole image because it'll be orders of magnitude bigger than 15 KB. But I know that people do this kind of stuff by slicing a photo or image and uploading multiple SVGs to the game, combining them into a livery in the editor.

My question is how to do it? All the PNGs to SVGs conversions I did were very simple. I don't know how to approach this and any input from GTP wizards would be extremely welcome. (Oh, I have access to both Inkscape and Illustrator).

 

[Mugo]

Just a quick one, how is it possible to create a perfect circle with a max. of 2 nodes. If I try to delete nodes, it just alters the shape. I figure it needs to be done as a written instruction in notepad++ or similar? I have no experience of creating svg's in this way so I wouldn't know where to start. Any help appreciated.

 

[Nuschel01]

Just a quick one, how is it possible to create a perfect circle with a max. of 2 nodes. If I try to delete nodes, it just alters the shape. I figure it needs to be done as a written instruction in notepad++ or similar? I have no experience of creating svg's in this way so I wouldn't know where to start. Any help appreciated.

I had a quick play with this:

Spoiler

I created a line with the pencil tool and "closed it" by clicking the first node twice. I then the line and turned it 90° to create a cross:


Then I chose the tool that lets me create curves at nodes and pulled the curve up so the handles of it were aligned with the top/bottom of the cross:


Repeat on the other side:


Now I have this circle:


In the top right AI lets me change the size of the selected shape, which I just change from 4x3cm to 4x4cm in this example. I then deleted the vertical line and that should be it:


Four-node circle for comparison:

EDIT:

Spoiler

Damn, apparently it's not a 100% perfect circle But I doubt anyone will notice with GT's rastering of decals

 

[Mugo]

I had a quick play with this:

Spoiler

I created a line with the pencil tool and "closed it" by clicking the first node twice. I then the line and turned it 90° to create a cross:
View attachment 1195560

Then I chose the tool that lets me create curves at nodes and pulled the curve up so the handles of it were aligned with the top/bottom of the cross:
View attachment 1195561

Repeat on the other side:
View attachment 1195562

Now I have this circle:
View attachment 1195563

In the top right AI lets me change the size of the selected shape, which I just change from 4x3cm to 4x4cm in this example. I then deleted the vertical line and that should be it:
View attachment 1195564

Four-node circle for comparison:
View attachment 1195565

EDIT:

Spoiler

Damn, apparently it's not a 100% perfect circle But I doubt anyone will notice with GT's rastering of decals
View attachment 1195568

Thanks for taking the time to investigate, Google is no help in trying to work this out.

 

[huff]

Here’s a timely question. Say someone wanted to make a large rectangle with a four color gradient in Affinity Designer, how does that work? I used Fill tool to create a gradient, which looks good at the upload point, but turns black in game. Would anyone be able to see what is being done incorrectly?

 

[krisduv]

Here’s a timely question. Say someone wanted to make a large rectangle with a four color gradient in Affinity Designer, how does that work? I used Fill tool to create a gradient, which looks good at the upload point, but turns black in game. Would anyone be able to see what is being done incorrectly?
View attachment 1197164View attachment 1197165

With AD, you have to manually edit your gradients in a txt editor.
You have to cut/paste the gradient (<defs></defs>) before your shape (<rect...>), and then get rid of the "transform" part using MatskiMonk google sheet

 

[huff]

With AD, you have to manually edit your gradients in a txt editor.
You have to cut/paste the gradient (<defs></defs>) before your shape (<rect...>), and then get rid of the "transform" part using MatskiMonk google sheet

Can you recommend a text editor that I can use with iPad, I have no experience with them. Thank you for fixing mine btw.

 

[krisduv]

Can you recommend a text editor that I can use with iPad, I have no experience with them. Thank you for fixing mine btw.

I use iEditor Pro. Can't remember the price, but I don't think I would have paid more than 5€ for the use I need.
But I guess there's probably good enough free softwares.

 

[havermoutpapi]

Not sure wether this is the right forum for it but I'm having trouble trying to make a picture with chrome drops into a viable svg of 15kb or less. I feel like it's impossible but I wanted to check wether anybody in here had any luck with this or if somebody has tips and/or tricks for me. The closest I could come with it was 134kb. Thank you in advance!