- 17,065
- United Kingdom
User Decals - A Tutorial On How To Make .SVG (Request in separate thread)
- Thread starter daan
- 1,493 comments
- 385,156 views
- 736
- Selby
- spooned12000rpm
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:
- 340
- Colorado
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
garystevens64
syntex123
Staff Emeritus
- 4,814
- Færder
- syntex123
- Syntex260Z
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.
- 36,629
- Scotland
- GTP_daan
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.
Step 3:
We now need to trace the image, so go to Path > Trace Bitmap
The following box appears. I think the options shown are the default options and we don't need to change anything here.
Select OK. Our image appears in the preview box. The Trace Bitmap box can now be closed.
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.
In 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.
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.
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.
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.
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.
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.)
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.
Step 3:
We now need to trace the image, so go to Path > Trace Bitmap
The following box appears. I think the options shown are the default options and we don't need to change anything here.
Select OK. Our image appears in the preview box. The Trace Bitmap box can now be closed.
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.
In 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.
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.
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.
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.
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.
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.)
- 36,629
- Scotland
- GTP_daan
@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. 
syntex123
Staff Emeritus
- 4,814
- Færder
- syntex123
- Syntex260Z
I was about to say - add it to the ‘top’. Thanks for the contribution@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.
I don’t have sufficient tools to delete posts so you need to do that
- 340
- Colorado
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
garystevens64
- 1,415
- Coventry
- graveltrap
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.
A lot of head scratching for something so simple, any ideas appreciated!
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!
- 1,196
- Australia
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.
- 17,065
- United Kingdom
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......
Became this in game....
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.
- 1,415
- Coventry
- graveltrap
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....
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
- 1,090
- Norwich
- TheNorfolkDad
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.
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.
- 2,487
- Bekasi
- razaqafazran1103
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.
- 1,090
- Norwich
- TheNorfolkDad
- 2,487
- Bekasi
- razaqafazran1103
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.
- 1,090
- Norwich
- TheNorfolkDad
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.
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.
Last edited:
- 736
- Selby
- spooned12000rpm
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.
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.
- 1,415
- Coventry
- graveltrap
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).
- 1,090
- Norwich
- TheNorfolkDad
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
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
syntex123
Staff Emeritus
- 4,814
- Færder
- syntex123
- Syntex260Z
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.
- 340
- Colorado
Which editor software do you think is the simplest to learn and work with?
garystevens64
garystevens64
- 736
- Selby
- spooned12000rpm
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.
- 66
- Spain
- 736
- Selby
- spooned12000rpm
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.
- 66
- Spain
Well, technically you are upscaling the workspace:
This is especially noticeable when working on a LMP1 livery.
If I move the square down:
It passes to the next surface, makes sense.
With a rectangle: there's more space and I should be able to lower it.
Nope, it disappears (Angle limit / Depth limit 10).
After recreating the rectangle inside a square:
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:
You scale the (square) workspace, not the decal.
- 736
- Selby
- spooned12000rpm
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.
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.
