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

  • Thread starter daan
  • 1,460 comments
  • 346,613 views
Looks a bit like a knock-off of Serpentine and may explain the massive node-count as most 'copied' fonts tend to be badly drawn from what I've seen.

Yeah, no doubt, I've got about 3000 fonts collected since the days of Win 3.11, so it can take me an age to find something suitable, by which stage, I can't be bothered to see if I've got a better version of it!
 
FWIW, I did a bunch of boring test square decals to research this particular issue. No matter what the resolution from 2048x2048 down to 32x32 pixels, as long as editor view was set to zoom 1:1 and workspace was same resolution when saved, in game, they all rendered exactly the same size before scaling in livery editor. However, if workspace was larger than object when saved, object was scaled down by that much. IE a 64x64 pixel object in 2048x2048 workspace, the object is scaled down 32x relative to "default" decal size in livery editor. So it appears that you get the "default" decal size in game regardless of the resolution you make an object as long as your workspace is made the same resolution as the decal you are working on. If workspace is larger than bounding box of object, it will be scaled down in proportion to the difference in dimensions. As a side note, the fullest I could get the thumbnail in the upload screen was a 150x100 pixel object or 1.5:1 ratio decal. And there was still space left around it, so it was scaled down to fit into thumbnail preview as well. Not sure what to make of all of this other than Sony is filled with complete asses LOL

I've been exploiting this fact lately with pre-scaled decals.

For example this bonnet catch: https://www.gran-turismo.com/gb/gts...gallery/all/decal/2385813/4837430120198176792 I placed a default square on the bonnet of one of the Gr.3 cars (with modelled catches), took a screenshot and worked out the scale relative to the square. I then made a square decal with the catch much smaller in the middle so that the it appears at the right size without having to scale it down. I've also used the same method for clip release arrows so that you can place them all over the car without having to worry about them being different sizes.

It's also a handy technique if you need to make a decal in layers (such as a licence plate or number board) as you can pre-scale each layer so all you have to do is line them up.
 
Last edited:
Can you tell me how to use this svg optimizer? Also when I was looking at all of the boxes that are checked I noticed that there are a few boxes that are not checked. Do I want all boxes checked or which ones do I want checked.

garystevens64
 
Can you tell me how to use this svg optimizer? Also when I was looking at all of the boxes that are checked I noticed that there are a few boxes that are not checked. Do I want all boxes checked or which ones do I want checked.

garystevens64
Leave it as is and mess with the slider only, for SVG files around 30kb you should drag the slider to 3-4 or so. Just play around with it and download a few from each step to see the difference in size. Avoid step 1 if you can, it messes with the result quite a lot.


Never reach for the lowest possible size, as long as it’s under 15kb that’s what you should aim for.
 
There seems to be a bit of confusion as to how Inkscape works so I thought I'd write a basic guide on how to "convert" an image using Inkscape. Some seem to think that all you do is to open the jpg/png in Inkscape and save as svg but that will not work.

This guide will only be using a single colour image. Inkscape has issues tracing colourful images so we'll start off here with a simple, one colour, design. The advantage of having a single colour image is that it can be changed in game

Step 1:

Find your image. You need to find the largest, best quality, jpg/png/gif that you can. A little bit of touching up the image beforehand in an image editing program might be of use too. If the image is white, or other light colour, you'd need to invert the colours in order for Inkscape to pick it up.

I'm using the GTPlanet globe and logo for this tutorial.


Step 2:

Start up Inkscape.

Go to File > Import and select your image. As you can see, our image appears in the middle of the screen.

inkscape1.PNG inkscape2.PNG

Step 3:

We now need to trace the image, so go to Path > Trace Bitmap
inkscape3.PNG

The following box appears. I think the options shown are the default options and we don't need to change anything here.

inkscape4.PNG

Select OK. Our image appears in the preview box. The Trace Bitmap box can now be closed.

inkscape5.PNG

Step 4:

We are now back at the main window for a very important step. It will look like nothing has happened, but what we have now is a vectorised image on top of the original bitmap. The original bitmap must be removed. Click on a black bit of your image and drag it away. Click back on the original, and press delete.

Note: The image you are dragging is the vector. The one that is left is the bitmap. Be careful that you delete the right one as there is very little difference between the 2 images. The bitmap will usually have a larger selection box around it when you click on it.

inkscape6.PNGIn this image, the bitmap is top left, the vector is bottom right.

If you are confused as to which is which, an easy way to find out is to select the Edit paths by Nodes option and click on one of the images. If nodes appear, then that one is the vector. If no nodes appear, then that is the bitmap and can be deleted.

inkscape8.PNG

Step 5:

Not really a step this one, but I think it helps out to do it. Inkscape will ignore white areas when tracing, but the workspace is white, so you can't really see the vector as it will appear in game. You can go to File > Document properties > and tick the "Checkerboard Background" option.

inkscape9.PNG

Step 6:

Inkscape starts off with an A4 page in the background that we've ignored up to this point. However for your decal to work, that page needs to be round the vectorised image. We do this by selecting the image, then going to Edit > Resize Page to Selection. The page will now move so that it now envelops your image.

inkscape9b.PNG inkscape9c.PNG

Step 6:

Saving the image. Inkscape has many options for saving images. The default is "Inkscape SVG." We don't want to use that option as it leaves too much irrelevant information in the file, and can mean the image could be to large, or may not even work at all. I use "Optimised SVG" but "Plain SVG" will work just as well.

inkscape10.PNG

If you use "Optimised SVG" then the following box will appear. These are the default options and do not need to be changed. Just click OK.

inkscape11.PNG

And there you have, hopefully, an SVG under 15kb. If it is still too large, you can use OMGSVG to reduce the size, or you may need to manually remove nodes (but that's for another tutorial.)
 
@syntex123 I've taken the liberty of also adding that in to post 4 (duplicate created) of this thread. Feel free to delete this once you've seen it. :D
 
@syntex123 I've taken the liberty of also adding that in to post 4 (duplicate created) of this thread. Feel free to delete this once you've seen it. :D
I was about to say - add it to the ‘top’. Thanks for the contribution :cheers:
I don’t have sufficient tools to delete posts so you need to do that :lol:
 
Thank you for all of your help. I haven't had a chance to try it out yet but I'm sure that everything you've told me to do will work. If it doesn't or I still have a problem I will let you know. Thanks again.

garystevens64
 
Inkscape frustrates at times, just trying to make a simple outline for the door handle on the Vanatge Gr.4, this is basically a rectangle with curved ends with the same shape cut out of the middle.

To make this thing, I created a rectangle, and rounded the ends before carrying out the object to path command, I then duplicated the shape, made it smaller and cut it out of the original (difference operation).

I then save as plain SVG, and upload via GT Sport site, everything is looking good until getting in game and yes of course the decal doesn't appear as expected the dreaded empty file! What should be a five minute operation now turns into much head scratching and retries with no luck.

I think this is probably because I transformed the ends of the rectangle and GT doesn't like how Inkscape codes this operation, I'd just like to try and understand if this is indeed the case. I have noticed problems with empty files with text if I have transformed them before carrying out object to path...

code...Something I don't really understand but may be helpful.

Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 298.51264 78.007902"
   version="1.1"
   height="78.007904mm"
   width="298.51263mm"
   id="svg8">
  <defs
     id="defs829" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="matrix(0.51085826,0,0,0.51085826,126.66654,-68.69383)"
     id="layer1">
    <path
       style="fill:#ffff00;fill-rule:evenodd;paint-order:fill markers stroke"
       d="m -648.57,508.23 c -159.87,0 -288.57,128.7 -288.57,288.57 0,159.87 128.7,288.57 288.57,288.57 h 1631.4 c 159.87,0 288.57,-128.7 288.57,-288.57 0,-159.87 -128.7,-288.57 -288.57,-288.57 z m 95.115,44.662 h 1441.2 c 141.23,0 254.92,108.78 254.92,243.91 0,135.13 -113.7,243.91 -254.92,243.91 h -1441.2 c -141.23,0 -254.92,-108.78 -254.92,-243.91 0,-135.13 113.69,-243.91 254.92,-243.91 z"
       transform="scale(0.26458)"
       id="rect10" />
  </g>
</svg>

A lot of head scratching for something so simple, any ideas appreciated!
 
Inkscape frustrates at times, just trying to make a simple outline for the door handle on the Vanatge Gr.4, this is basically a rectangle with curved ends with the same shape cut out of the middle.

To make this thing, I created a rectangle, and rounded the ends before carrying out the object to path command, I then duplicated the shape, made it smaller and cut it out of the original (difference operation).

I then save as plain SVG, and upload via GT Sport site, everything is looking good until getting in game and yes of course the decal doesn't appear as expected the dreaded empty file! What should be a five minute operation now turns into much head scratching and retries with no luck.

I think this is probably because I transformed the ends of the rectangle and GT doesn't like how Inkscape codes this operation, I'd just like to try and understand if this is indeed the case. I have noticed problems with empty files with text if I have transformed them before carrying out object to path...

code...Something I don't really understand but may be helpful.

Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 298.51264 78.007902"
   version="1.1"
   height="78.007904mm"
   width="298.51263mm"
   id="svg8">
  <defs
     id="defs829" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="matrix(0.51085826,0,0,0.51085826,126.66654,-68.69383)"
     id="layer1">
    <path
       style="fill:#ffff00;fill-rule:evenodd;paint-order:fill markers stroke"
       d="m -648.57,508.23 c -159.87,0 -288.57,128.7 -288.57,288.57 0,159.87 128.7,288.57 288.57,288.57 h 1631.4 c 159.87,0 288.57,-128.7 288.57,-288.57 0,-159.87 -128.7,-288.57 -288.57,-288.57 z m 95.115,44.662 h 1441.2 c 141.23,0 254.92,108.78 254.92,243.91 0,135.13 -113.7,243.91 -254.92,243.91 h -1441.2 c -141.23,0 -254.92,-108.78 -254.92,-243.91 0,-135.13 113.69,-243.91 254.92,-243.91 z"
       transform="scale(0.26458)"
       id="rect10" />
  </g>
</svg>

A lot of head scratching for something so simple, any ideas appreciated!
I have had this on occasion with Inkscape. I don't know the code. However I check that there are no duplicate nodes on top of each other. Make sure the blend mode for the object is normal and blur is 0%. If all else fails I copy the path then delete the existing path then paste in place. Has more than once fixed it.
 
Inkscape frustrates at times, just trying to make a simple outline for the door handle on the Vanatge Gr.4, this is basically a rectangle with curved ends with the same shape cut out of the middle.

To make this thing, I created a rectangle, and rounded the ends before carrying out the object to path command, I then duplicated the shape, made it smaller and cut it out of the original (difference operation).

I then save as plain SVG, and upload via GT Sport site, everything is looking good until getting in game and yes of course the decal doesn't appear as expected the dreaded empty file! What should be a five minute operation now turns into much head scratching and retries with no luck.

I think this is probably because I transformed the ends of the rectangle and GT doesn't like how Inkscape codes this operation, I'd just like to try and understand if this is indeed the case. I have noticed problems with empty files with text if I have transformed them before carrying out object to path...

code...Something I don't really understand but may be helpful.

Code:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   viewBox="0 0 298.51264 78.007902"
   version="1.1"
   height="78.007904mm"
   width="298.51263mm"
   id="svg8">
  <defs
     id="defs829" />
  <metadata
     id="metadata5">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     transform="matrix(0.51085826,0,0,0.51085826,126.66654,-68.69383)"
     id="layer1">
    <path
       style="fill:#ffff00;fill-rule:evenodd;paint-order:fill markers stroke"
       d="m -648.57,508.23 c -159.87,0 -288.57,128.7 -288.57,288.57 0,159.87 128.7,288.57 288.57,288.57 h 1631.4 c 159.87,0 288.57,-128.7 288.57,-288.57 0,-159.87 -128.7,-288.57 -288.57,-288.57 z m 95.115,44.662 h 1441.2 c 141.23,0 254.92,108.78 254.92,243.91 0,135.13 -113.7,243.91 -254.92,243.91 h -1441.2 c -141.23,0 -254.92,-108.78 -254.92,-243.91 0,-135.13 113.69,-243.91 254.92,-243.91 z"
       transform="scale(0.26458)"
       id="rect10" />
  </g>
</svg>

A lot of head scratching for something so simple, any ideas appreciated!

The game is probably ignoring the matrix transform in the Group tag, which means none of the co-ordinates fall within the view box. Or it ignores the whole group.

Inkscape XML is poo.

Copied the code, opened it in Corel, adjusted a node (so it rewrote the geometry) saved it... and it seemed to work.. which is the attached file.

Just for reference... this experimentation......

upload_2018-6-28_23-36-1.png






Became this in game....


Dgz-04PX4AIoFX9.jpg:large




Pretty much all I was doing was deleting viewbox, size or transform tags... so what you've drawn was fine, it's just how GT interprets where inkscape places it on a page.
 

Attachments

  • handle.zip
    708 bytes · Views: 14
The game is probably ignoring the matrix transform in the Group tag, which means none of the co-ordinates fall within the view box. Or it ignores the whole group.

Inkscape XML is poo.

Copied the code, opened it in Corel, adjusted a node (so it rewrote the geometry) saved it... and it seemed to work.. which is the attached file.

Just for reference... this experimentation......

View attachment 747381





Became this in game....


Dgz-04PX4AIoFX9.jpg:large




Pretty much all I was doing was deleting viewbox, size or transform tags... so what you've drawn was fine, it's just how GT interprets where inkscape places it on a page.

Thanks for spending some time looking at this!

I have been experimenting as well, I opened a few other files I have been having problems with using a web browser, which made me realise there was a problem with sizing of something, I noticed a scroll bar at the bottom of the page, and the graphic was some way off to right, which is probably why the image looks empty in GT Sport. Basically the image is huge and most of it is transparent.

I actually have integrated SVGO into Inkscape sometimes saving using that works, sometimes it doesn't, the same for the editors own optimising save option, but I think it all points to the same problem.

I really appreciate Inkscape is free but sometimes it makes me want to smash stuff! However I am not sure I want to invest in another editor as all it would be used for is making stuff for GT Sport :lol:
 
What software should I get, as a total amateur, to get into creating decals? I previously used Adobe Illustrators free trial, but its £20 a month, far too much for what I want it for.

Essentially I want to make basic decals, make vectors from images, and make text into vectors using different fonts etc..

I don't mind spending a little to buy some software, but not a monthly subscription.
 
What software should I get, as a total amateur, to get into creating decals? I previously used Adobe Illustrators free trial, but its £20 a month, far too much for what I want it for.

Essentially I want to make basic decals, make vectors from images, and make text into vectors using different fonts etc..

I don't mind spending a little to buy some software, but not a monthly subscription.
It is obvious that you should try Inkscape, it's free to use and available to download on their official website.

Or you could shell out some money for Affinity Designer or Vector Magic.
 
It is obvious that you should try Inkscape, it's free to use and available to download on their official website.

Or you could shell out some money for Affinity Designer or Vector Magic.

Are there things that the two paid softwares you mentioned can do that Inkscape can’t? Is Inkscape limited/restricted in anyway due to being free?
 
Are there things that the two paid softwares you mentioned can do that Inkscape can’t? Is Inkscape limited/restricted in anyway due to being free?
Inkscape can pretty much do anything despite being a free software, so there is no restrictions.

Oh and I forgot about Corel, which is what @MatskiMonk uses for most of his decals and other works.
 
Ok so I've had Inkscape for a little while and come up with this, I want to remove the white from the image, any idea how?

EDIT: I actually managed to do it, probably not the way I was supposed to but print screened it then trace bitmap on the new image. It's gone up to 120kb now though.

Screen Shot 2018-07-07 at 00.59.05.png
 
Last edited:
If you're on MacOS I'd look at Graphic (formally iDraw) by AutoDesk. It's about £25 (one off) but it produces very good SVG files and uses many of the same commands as Illustrator so it's easy to learn.

Gradients sometimes need a manual tweak (seems like this happens with most software) but I've more than had my money's worth out of it.
 
Ok so I've had Inkscape for a little while and come up with this, I want to remove the white from the image, any idea how?

EDIT: I actually managed to do it, probably not the way I was supposed to but print screened it then trace bitmap on the new image. It's gone up to 120kb now though.

View attachment 749529

You want the white around the text to be transparent? I am no expert but I would try the following.

You need to select the path of the star and the white outline of the text.

Make sure all the white is selected at the same time (hold Shift down when making selections) then path >combine otherwise you need to repeat the process for each individual path.

Under the path menu you have a bunch of tools, I think the one to try for this is path >difference.

So select both the black star and the white text outline then path>difference.

You can always undo and try a different tool to see what it does! That is my usual approach anyway (trial and error).
 
Thats perfect, thanks @graveltrap

I've only been experimenting, trial and error like you say, but I've no previous experience using programs like Inkscape so gentle nudges in the right direction are usually needed
 
Or you could shell out some money for Affinity Designer or Vector Magic.
As a Mac- and long time Photoshop user, I got both Affinity Designer and Vector Magic. For my amateur art it’s perfect, and of course super simple to use for GTS too.

I use Vector Magic for simple logos, and Affinity Designer for the more complex ones. I can’t praise those two apps enough.
 
Might be slightly off topic, but is it possible to "transfer" decals you made to a favorites or collection folder so that you don't reach limit of uploaded decals???
 
Which editor software do you think is the simplest to learn and work with?


garystevens64
Depends on your experience with other design software. I've found that all of them have their own way of working. Some are quite straightforward using common shortcuts and UI behaviours and others are quirky.

If you've no prior experience with vector design then they'll all have a steep learning curve so go with one that has a good support base (Inkscape or Affinity are probably your best bet).

I've been doing vector design (in some form or another) for 15+ Years and am still learning.
 
I've deleted well over 100 decals from my uploads in the past month or so, and will have to do another round here shortly. In the beginning 1000 decals seemed like a high enough limit, but looking like it needs to be 10,000.
 
I've been exploiting this fact lately with pre-scaled decals.

For example this bonnet catch: https://www.gran-turismo.com/gb/gts...gallery/all/decal/2385813/4837430120198176792 I placed a default square on the bonnet of one of the Gr.3 cars (with modelled catches), took a screenshot and worked out the scale relative to the square. I then made a square decal with the catch much smaller in the middle so that the it appears at the right size without having to scale it down. I've also used the same method for clip release arrows so that you can place them all over the car without having to worry about them being different sizes.

It's also a handy technique if you need to make a decal in layers (such as a licence plate or number board) as you can pre-scale each layer so all you have to do is line them up.

Months ago, after hours and hours of testing I figured out that, not only you can pre-scale a decal but that it was also possible to convert real life cms to in-game cms.
 
Months ago, after hours and hours of testing I figured out that, not only you can pre-scale a decal but that it was also possible to convert real life cms to in-game cms.
Yep, by my reckoning the 'default' size that all decals appear is about 500mm so anything can be scaled beneath that quite accurately.

Only side effect I've found of pre-scaling, is that if you enlarge a pre-scaled decal it goes pixelated. So I'll generally upload a scaled and full sized decal if it's a logo that I need for larger purposes.
 
ok, so this is my problem.....I have messed with this for about a month. I don't see how people are getting the elaborate, highly detailed decals loaded. I can't get this any lower than 68kb.
 

Attachments

  • omgdude.png
    omgdude.png
    17.1 KB · Views: 20
Yep, by my reckoning the 'default' size that all decals appear is about 500mm so anything can be scaled beneath that quite accurately.

Only side effect I've found of pre-scaling, is that if you enlarge a pre-scaled decal it goes pixelated. So I'll generally upload a scaled and full sized decal if it's a logo that I need for larger purposes.

Well, technically you are upscaling the workspace:

2j4zlnr.png


This is especially noticeable when working on a LMP1 livery.
If I move the square down:
1zh3az5.jpg

It passes to the next surface, makes sense.
2uxuxyg.jpg


With a rectangle: there's more space and I should be able to lower it.
rljnzb.jpg

Nope, it disappears (Angle limit / Depth limit 10).
2jcgi89.jpg


After recreating the rectangle inside a square:
2vcyuzn.jpg

w4ock.jpg


Em, this suggests that the Livery Editor only uses the workspace and every decal is inside the same (square) workspace.
And this also could explain the scaling issues:
2qamijq.png

You scale the (square) workspace, not the decal.
 
Yes, that's what I'm saying. The default workspace renders to 500mm. So if you place a 50% smaller square in the centre it will appear at 250mm on the car.

Every decal has a virtual square round it which explains why some decals 'jump' when you move them over certain areas as the square maps over a different part of the body that's seen as a different angle or depth.

Because the game pre-renders decals as raster images, smaller shapes within that larger workspace will pixelate much quicker. Same as when you enlarge a decal to cover a large part of a car.

You have to use align with camera a lot more with LMP cars to force the decal onto the outmost depth to prevent overlapping.
 
Back