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

[HoldOutSun]

This is probably a stupid question, sorry if it is, I just downloaded Illustrator and I'm trying to figure all this out for the first time.

How do I keep the white in the logos? I put in a SealMaster logo that has the red text with a white outline, I'm assuming the Ignore White is making it upload with just the text and without the outline.

Thanks!

 

[huff]

When you have a huge svg of a complicated artwork that needs to be made into many @15kb, is there an easy way to do this? I have made a really nice trace of this, but I will end up with 30-40 layers. Maybe someone can point me in the right direction?

 

[daan]

When you have a huge svg of a complicated artwork that needs to be made into many @15kb, is there an easy way to do this? I have made a really nice trace of this, but I will end up with 30-40 layers. Maybe someone can point me in the right direction?
View attachment 1215465

@MatskiMonk has made that.

 

[huff]

@MatskiMonk has made that.

Yeah, I’m looking more for how to go about doing it myself. I enjoy assembling liveries, but I really like to try to make as much as possible.

 

[MatskiMonk]

When you have a huge svg of a complicated artwork that needs to be made into many @15kb, is there an easy way to do this? I have made a really nice trace of this, but I will end up with 30-40 layers. Maybe someone can point me in the right direction?

I did it using the same method I normally do... which is to overlay a grid and intersect it all, this was part of the file I was drawing it in...

edit: The green bit is the template I used for then laying it on the car.

... it still ended up as 30-40 files, so if you've drawn it in a fashion where you can already break it into 30-40 files, I'd just go with it.

I wouldn't try and make it too easy for yourself. Last time I looked mine was the only one in GT7, but in GTS there were a few, and the ones where people had tried taking the easy way out looked like utter dog ****

 

[huff]

I think I see you mentioned somewhere that you started with an auto trace, did you split the image before auto trace or did you cut up the svg trace?

 

[MatskiMonk]

auto trace

I don't "a u t o t r a c e".






Okay, very occasionally I do But this was all hand traced...

Just found the post I made in the original LEC thread for it...

The GT Sport Livery Editor Competition 13 - CLOSED

FINAL ENTRY I decided to change up my entry. Just didn't feel the Corvette was up to the mark. This is yet another livery I had done before but not to the full potential. So I just started it again rather than editing it. I love this livery so much! I'd say it's one of the best I've seen. I just...

www.gtplanet.net

This is how it was broken up. I'd commented earlier in the thread that by the time I'd drawn just Bruno, and Zanardi's face, it was 109kb, and that just drawing the 3 drivers had taken 18 hours.

edit: so to answer your question, I drew it up as Drivers, text, background, car and car background... then broke each one down using the intersect method.

edit 2: I saw the car for real at Spa when it raced, I subsequently got close up with it at Goodwood this year and noticed a few things I want to tweak. There was a few things I wasn't happy with when I first made it because I was up against the deadline for the LEC also. The alignment of the text on the side of mine isn't great.

 

[wowbaggerBR]

I have been trying to make a Veyron GR4 livery and I would like to cover the back of the car in a different color from the body (as it is by default, actually).

But to do this properly, I need some curve that can match this outline as shown in the attached pic (I know I could just do bit by bit until cover it, but I kinda need the outline to be in a different color). I really thought someone had this sorted with a svg just for this, but I didn't find any on both GTS and GT7.

The question is, how do you guys go about this? Is it very complicated, in case I should probably just overload myself with podcasts to listen while doing it, or something even I could manage in Illustrator/Inkscape?

 

[huff]

I have been trying to make a Veyron GR4 livery and I would like to cover the back of the car in a different color from the body (as it is by default, actually).

But to do this properly, I need some curve that can match this outline as shown in the attached pic (I know I could just do bit by bit until cover it, but I kinda need the outline to be in a different color). I really thought someone had this sorted with a svg just for this, but I didn't find any on both GTS and GT7.

The question is, how do you guys go about this? Is it very complicated, in case I should probably just overload myself with podcasts to listen while doing it, or something even I could manage in Illustrator/Inkscape?

I have had some luck doing similar by taking a picture within editor with my phone of the car at a straight angle. Import the picture to my drawing app and copy that curve. Take it to game and test. Then keep tweaking. I would probably make just a curved stripe, and do everything behind it with in game shapes.

 

[wowbaggerBR]

I have had some luck doing similar by taking a picture within editor with my phone of the car at a straight angle. Import the picture to my drawing app and copy that curve. Take it to game and test. Then keep tweaking. I would probably make just a curved stripe, and do everything behind it with in game shapes.

Hummm that's definitely something I can do. Thanks for the tip.

 

[MatskiMonk]

by taking a picture within editor with my phone of the car at a straight angle. Import the picture to my drawing app and copy that curve.

Normally I'd just do a screen grab with the Playstation, and share it to Twitter, and copy it from there into CorelDraw.

If you're using remote play on a PC you're making the decals on, you can almost literally trace over the view from the livery editor.

 

[DJFridge]

I usually just skew the nearest in-game shape as close as it will go and then duplicate and move a bit until I've got the area covered. Slow, but simple

 

[wowbaggerBR]

I usually just skew the nearest in-game shape as close as it will go and then duplicate and move a bit until I've got the area covered. Slow, but simple

Yeah, usually that's how I do it, but in this case I want to highlight the outline with a separate color, so having a defined shape for that panel would save me some serious time.

 

[huff]

Question time. Today I was using some decals that were pulled from gt sport through the database site. They were under 15kb each. I wanted to align them in Vectornator so I could duplicate and replace. Just putting them into vectornator and then exporting raises it to 58kb and svgomg could not bring it back to 15kb. Is this avoidable? How can it grow so large without changing anything?

 

[MatskiMonk]

Question time. Today I was using some decals that were pulled from gt sport through the database site. They were under 15kb each. I wanted to align them in Vectornator so I could duplicate and replace. Just putting them into vectornator and then exporting raises it to 58kb and svgomg could not bring it back to 15kb. Is this avoidable? How can it grow so large without changing anything?

Vectornator obviously doesn't write very efficient SVG. If you open both files (before and after) in a text editor, you'll likely see Vectornator adds in a bunch of stuff just because that's how it does certain things.

 

[huff]

Vectornator obviously doesn't write very efficient SVG. If you open both files (before and after) in a text editor, you'll likely see Vectornator adds in a bunch of stuff just because that's how it does certain things.

Thanks, I will have to experiment and see if AD changes it as much.

 

[Mugo]

Hi legends, I'm trying to create the curves in the background on this image. I have all the decals in front of it already. Question is, what is the neatest way of doing this? Trying to get the curves down freehand gives undesirable results. I use inkscape.

 

[SouperK]

edit: Ah, not sure about embedding.. hmmm...

Well, it looks like this... , not sure about how to post it here...



docs.google.com/spreadsheets/d/1LqpndUMCiVagQ67hkvi-GKhMZTt2650RpYGHC1kB4rA/edit?usp=sharing

Go to File menu and "make a copy" to use.

Thank you for this, Vectornator is sadly no longer gradient-friendly, this helps with the grief process. Not sure if you have updated this, but for radial gradients, GT will always define the gradient with respect to the decal (effectively x=0 y=0), i.e. GT will not recognise gradientUnits="objectBoundingBox" (which means 'defined relative to the shape/path'). The radialGradient definition must include gradientUnits="userSpaceOnUse" ('defined relative to the decal') because objectBoundingBox is the SVG default, and the decal uploader won't work without it.

So to offset the centre of the radial gradient, you need the co-ordinates of the centre of the gradient (cx and cy) and the radius.

If the radial gradient is broken in GT by a transform, and the gradient is originally defined with gradientUnits="userSpaceOnUse", then fixing it is relatively easy. In the transform, the last 2 co-ordinates are cx and cy, and the number before those is the radius. So this transformed gradient:

<radialGradient cx="0" cy="0" gradientTransform="matrix(181.825 1.77091 -1.77091 66.6 77.7 88.8)" gradientUnits="userSpaceOnUse" id="RadialGradient" r="1">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#1b4f94"/>
</radialGradient>

... can be fixed by altering the code to:

<radialGradient cx="77.7" cy="88.8" gradientUnits="userSpaceOnUse" id="RadialGradient" r="66.6">
<stop offset="0" stop-color="#ffffff"/>
<stop offset="1" stop-color="#1b4f94"/>
</radialGradient>

If your SVG editor defines the gradient with gradientUnits="objectBoundingBox", then you would need to add the x and y co-ordinates of the top left corner of the shape to the cx and cy co-ordinates.

 

[MatskiMonk]

@SouperK

Thanks for the explanation, it's been a while since I looked at it, so I can't remember why I determined I couldn't figure it out, but if you've tested your method I might add it to the sheet.

👍

 

[SouperK]

@SouperK

Thanks for the explanation, it's been a while since I looked at it, so I can't remember why I determined I couldn't figure it out, but if you've tested your method I might add it to the sheet.

👍

No worries, and yes, I tested a few variations and the explanation above is my interpretation of the results, this method works for me, I've used it 3 times now, it might be an idea to double check though, especially the last sentence, that is my assumption. I didn't have an example to test against, so I was spoofing testing around the objectBoundingBox, rather than testing a broken gradient.

Edit: actually I've just realised I missed out something, this is tested against purely circular gradients. If your app allows skewing of radial gradients, I don't think that can be handled. There are the fx and fy (focus) parameters for radial gradients too. Both those could affect the matrix, I was thinking of experimenting with fx and fy next.

 

[MatskiMonk]

Edit: actually I've just realised I missed out something, this is tested against purely circular gradients. If your app allows skewing of radial gradients, I don't think that can be handled. There are the fx and fy (focus) parameters for radial gradients too. Both those could affect the matrix, I was thinking of experimenting with fx and fy next.

My recollection is that when you're skewing the circle, you're working with (the matrix transform is working with) imaginary points that aren't defined by the syntax that generates the circle, they are the points of a 4 sided polygon that you'd draw around the square - as such you can't just perform a simple calculation. I could be wrong, but I think that's when I gave up. They would be calculable, but it's far beyond me.

 

[SouperK]

My recollection is that when you're skewing the circle, you're working with (the matrix transform is working with) imaginary points that aren't defined by the syntax that generates the circle, they are the points of a 4 sided polygon that you'd draw around the square - as such you can't just perform a simple calculation. I could be wrong, but I think that's when I gave up. They would be calculable, but it's far beyond me.

Yes, Vectornator doesn't allow skewing so I forgot that I'd been failing to import inkscape generated skewed gradients in the past. GT does not allow a skewed radial gradient, so there is no way to decode the matrix for GT, you have to use circular radial gradients

 

[MatskiMonk]

Yes, Vectornator doesn't allow skewing so I forgot that I'd been failing to import inkscape generated skewed gradients in the past. GT does not allow a skewed radial gradient, so there is no way to decode the matrix for GT, you have to use circular radial gradients

I couldn't make sense of it mathematical when trying to figure out how matrices worked, so I'm glad that in the end it wouldn't have mattered anyway!

edit: It's possible to simulate the effect, to some degree, fairly easily, if your app has a contour tool...

 

[SouperK]

I couldn't make sense of it mathematical when trying to figure out how matrices worked, so I'm glad that in the end it wouldn't have mattered anyway!

edit: It's possible to simulate the effect, to some degree, fairly easily, if your app has a contour tool...

View attachment 1332113

That's impressive, how does it render to svg? If you're happy to upload it here I could look at the code. I'd guess multiple paths, but I don't see obvious edges.

 

[garystevens64]

New first post currently being edited

Illustrator Tutorial

Vector Magic Desktop version Tutorial

Affinity Desgner

Inkscape Tutorial

Removing nodes to bring file size down using Inkscape

If your circle is not showing correctly

Golden rules for gradients

Duplicate a gradient

Simple text creation

Text in Inkscape

Optimising files in Inkscape

Hand tracing of an image in Inkscape

Creating logos and text in Inkscape

Scaling of SVGs

More on Scaling SVGs

Yet more on Scaling SVGs

Colour Scanning in Inkscape

Help with Stroke and Fill in Inkscape

Make the middle of a circle see through in Inkscape

Manual tracing - Youtube video

Scan in colour using Inkscape

Clone tutorial

Text to SVG

daan,

I don't remember who to make the center of the letter "O" to show up clear? It shows all one color instead of the center being clear. Please tell me the keys that I need to use to fix this problem. Thanks

garystevens64

 

[daan]

daan,

I don't remember who to make the center of the letter "O" to show up clear? It shows all one color instead of the center being clear. Please tell me the keys that I need to use to fix this problem. Thanks

garystevens64

It's in the post you quoted.

 

[garystevens64]

It's in the post you quoted.
View attachment 1334511

Thank you. I didn't know that there was more help questions if you scrolled down.

garystevens64

 

[Belifant]

does someone know how people are doing carbon fibre? I mean I know how to do it, but I get nowhere near the density (or number of "rectangles") other people seem to to be upload without going over the 15 kb limit.

Too bad we can't download .svg from the Gallery, I would really like to look at how they did it.

this is one of them, I cannot even come close to that density.

 

[MatskiMonk]

does someone know how people are doing carbon fibre? I mean I know how to do it, but I get nowhere near the density (or number of "rectangles") other people seem to to be upload without going over the 15 kb limit.

Too bad we can't download .svg from the Gallery, I would really like to look at how they did it.

this is one of them, I cannot even come close to that density.

Can't really tell from that image, but it just looks like diagonal lines?

This is a discussion around what I believe is still the best method.

Carbon Fiber Decal

Hi, I am trying to create a carbon fiber decal but I can't recreate this one. I don't know if is this the right way to recreate the carbon fiber uploaded by spooned12000rpm at GT Sport.

www.gtplanet.net

 

[Belifant]

Can't really tell from that image, but it just looks like diagonal lines?

This is a discussion around what I believe is still the best method.

Carbon Fiber Decal

Hi, I am trying to create a carbon fiber decal but I can't recreate this one. I don't know if is this the right way to recreate the carbon fiber uploaded by spooned12000rpm at GT Sport.

www.gtplanet.net

ooooh yes, thank you! I tried to go this route several times, but it never showed up correctly in the game!