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

[syntex123]

I would love to do this but I have no money to get full version of
Vector Magic

Only using Vector Magic isn’t smart anyway. You’d need some other app too.

Like @daan says, Inkscape is free, and it will most likely be a better choice. Doing decals by hand 90% of the time is the way to go. Autotracing with Vector Magic works most of the time, but for some complex designs you’d need to edit the SVG it spits out pretty much to get it down to a reasonable size(below 15kb or low enough for the SVGOMG to be able to work its magic)

 

[Normalaatsra]

I need help with planning this decal I'm willing to make by hand. From what I noticed with full anime decal uploads in game, simple shapes and colours helped keep the size down. My reference image is similar in the regard that it only uses limited colour and shape designs.

Spoiler: Sampled Image

Assume it is 100% possible that the SVG will eventually fit the 15kb upload size for the game. What is the best plan or method to execute the project on Illustrator? Should I start with the outline first or the dominant colour & shape?
Can I simply layer the document by colour and erase detailed areas on the top order to match the same colour from the bottom order like a transparent hole?

 

[syntex123]

Can I simply layer the document by colour and erase detailed areas on the top order to match the same colour from the bottom order like a transparent hole?

Yes. I always start on the outside and work my way in. Solid colors all throughout (normally) and cut out the top layers if the bottom/outer color is somewhere on the inside.

These look simple, shouldn’t be too big if you manually trace with as few nodes as you can. If it ends up bigger I can’t imagine they’d be too big for SVGOMG. Just try and see where it gets you, these look like good practice logos too.

 

[Cytoria]

I need help with planning this decal I'm willing to make by hand. From what I noticed with full anime decal uploads in game, simple shapes and colours helped keep the size down. My reference image is similar in the regard that it only uses limited colour and shape designs.

Spoiler: Sampled Image

Assume it is 100% possible that the SVG will eventually fit the 15kb upload size for the game. What is the best plan or method to execute the project on Illustrator? Should I start with the outline first or the dominant colour & shape?
Can I simply layer the document by colour and erase detailed areas on the top order to match the same colour from the bottom order like a transparent hole?

The black lines around the "Wangan" text and around the flames under the animals looks like they have almost the same width : you'll gain nodes and time by drawing the WANGAN as a purple/orange path with a black stroke instead of a black background path with a purple/orange path above it.

And start with the shark. It looks easier to do, and with its practice you could do the fox more easily after.

 

[garystevens64]

I need some help with this Rhino Logo. As you can see (compressed file) the o is black and It needs to be blue. I can see that the "o" is included with another part of the logo and it need to be separated. I've tried to add some more nodes but so far I've been unable to get it right. So any help you can give me would be great.

 

[garystevens64]

Hey I have a decal/logo question for you. I've attached a SVG file so you can see what I'm talking about. The letter "o" is included with another part of the logo and it needs to be separate. If you could please tell me how to fix this problem that would be awesome.

garystevens64

 

[Cytoria]

Hey I have a decal/logo question for you. I've attached a SVG file so you can see what I'm talking about. The letter "o" is included with another part of the logo and it needs to be separate. If you could please tell me how to fix this problem that would be awesome.

garystevens64

Both the « O » and the black part of the Rhino were merged. I drew a thin line at the junction, then selected « cut path ». Then the O could be painted the way you wanted.

 

[Noisy]

I posted this originally in the Livery Competition 17 thread and now posting it here for safe keeping.

How to create simple yet professional looking logos using only text.

To help those who have said they would have trouble or not enough time to make logos, I'm going to go through what I did to create my logos. Most of my logos only took a few minutes to create and didn't use any complex methods.

1. Think of a company name and find a font that suits it. This is probably the longest part of the process. If your struggling for ideas, find a place where this company could be. I needed and oil company, where is there oil? North sea. Where is a place near the north sea? Caithness and now Caithness Oil sponsor my car. If that doesn't work, find an existing company and change their name using a thesaurus. I used Duracell, which is like durable and cells. What are similar words? Super and Power and boom, we now have Superpower Batteries sponsoring my car. And now to find the font, dafont.com is a great place to download free, creative fonts. I went for the Sans Serif and Fixed Width sections to get clean, bold fonts but it really is up to you how you want your logos to look. You can also type your company name into the preview bar and it will show it in the fonts. View media item 45077
2. Type the company name in Inkscape. If you don't have Inkscape you can get it here - https://inkscape.org/ Its a free, open source program to make vector graphics and is available on Windows, mac and Linux. Type your company name using the text icon on the left of the screen. Then select the font and size from the top left. You can also click and drag parts of the name to change to different sizes and colours as you would in MS Word etc. View media item 45078
2B. Let's add some outlines. Outlines aren't as hard as you may think. On the right of the screen you will see Fill and Stroke. Fill is the block of colour that make up the letter while stroke is the edge of the letter. Highlight the text you want to alter, then click the Stroke Paint tab and change the X to Flat Colour next to it. You can also change it to gradients and patterns but I haven't tried those yet. If you fancy trying them, remember Ctrl+Z is your friend. You can also click the Stroke Style tab to change the width and pattern of the outline. You can also change the fill to X and only have the outline of the text. View media item 45079
3.Preparing the text. Once your happy with the look of your text, click the mouse icon in the top left and then drag over to select all the text. Then go to Path > Object to Path. This will turn the text into shapes that will be shown in GT sport. Here in now the time to re-position parts of the text if you want. Double click to ungroup the text and then click and drag to select the text. You can also adjust the scale here as well. View media item 45080
4. Saving as a .svg . Assuming your are now finished with your logo, click and drag over your whole logo and then go to File > Document Properties. A box will pop up and them click Resize page to content and then Resize page to drawing or selection. You should see the canvas retract to the size of your logo. Then close this box. Then go to File > Save As and save as a plain SVG. We are now done with Inkscape. View media item 45081
5. Optimising and uploading to GTS. Now to get the logo under the 15kb limit. Go to https://jakearchibald.github.io/svgomg/ and upload your file. At the bottom right it will tell you how big your file is and how much it can be optimised. Adjust the precision slider to get it under 15kb and then click the blue arrow to download the optimised logo. If your logo is already under 15kb then just close the page. Now to upload to Gt Sport. Go to https://www.gran-turismo.com/gb/gtsport/user/decal-uploader and open the file browser to upload your logo. View media item 45082
6. We're done! Let's get painting! Go onto GT Sport and your logo should be in the My decals section of the livery editor. This may seem like a long process but once you get used to the process and Inkscape it will only take a few minutes. Now to finish that car and enter this fortnight's contest!!!View media item 45084

 

[Pigems]

Hey guys, sorry to be a bother. One of the fine members here made me a couple stickers the other day for my car and when I try to upload them I am getting this message on the GTS site. What does it mean? I’m not much of a computer person so I don’t know if I downloaded the pictures wrong or if I’m doing something wrong in trying to upload them. But either way it’s not working and I’m hoping one of you fellas might know why. Thanks very much in advance for any help on the subject. Have a great day everyone!

 

[daan]

Looks like you're trying to drag it while it's still compressed. You need to extract it first.

 

[Pigems]

Looks like you're trying to drag it while it's still compressed. You need to extract it first.

Thank you very much, how do I know if it is still compressed or not?

Edit: ok so I made sure the were extracted and still got the same message from the site. Any ideas?

These are the stickers I’m trying to upload and I was trying to do them individually.

 

[daan]

Thank you very much, how do I know if it is still compressed or not?

Edit: ok so I made sure the were extracted and still got the same message from the site. Any ideas?

These are the stickers I’m trying to upload and I was trying to do them individually.

I extracted them and uploaded them and they went up fine.

 

[Pigems]

I extracted them and uploaded them and they went up fine.

Weird, My laptop is pretty old, could that be my problem?

Can I only use images that I upload or can I find the ones you just uploaded and use those?

 

[MatskiMonk]

Weird, My laptop is pretty old, could that be my problem?

Can I only use images that I upload or can I find the ones you just uploaded and use those?

This is a bit of a guess, but I've long had an idea that how your computer goes about unzipping them makes a difference. Although the file is essentially just text, the way it's encoded may well make a difference. A valid SVG file that uploads fine as UTF-8 will fail when it's set to UTF-16... I'm not sure about ASCII or ANSI etc. It could be that whatever the default settings for encoding are on your system/un-compressing software are not compatible.

This is a long shot, I admit. It might be worth opening one of the files in Notepad on your computer, click save as, make sure the file type is set to *.* and not *.txt, and manually setting the encoding to UTF-8, then save it and see if it works.

 

[Pigems]

This is a bit of a guess, but I've long had an idea that how your computer goes about unzipping them makes a difference. Although the file is essentially just text, the way it's encoded may well make a difference. A valid SVG file that uploads fine as UTF-8 will fail when it's set to UTF-16... I'm not sure about ASCII or ANSI etc. It could be that whatever the default settings for encoding are on your system/un-compressing software are not compatible.

This is a long shot, I admit. It might be worth opening one of the files in Notepad on your computer, click save as, make sure the file type is set to *.* and not *.txt, and manually setting the encoding to UTF-8, then save it and see if it works.

View attachment 780185

Thank you very much for the info, I will try that(after I figure out what it is that you actually mean lol, off to Google I go).

Edit: I got them to upload, I pulled out my old laptop from under the bad and tried using that to extract the files and they worked first try.

 

[ZappaD]

I only could upload one decal with a gradient made in Inscape, and this only was successful using the "save as" -> "optimized SVG" option, it's the attached zip file, anyway, if you compare the SVG file in the zip with the one in GT Sport link it doesn't look exactly the same.

Now I'm drawing a BMW M logo with gradient colors but in GT Sport some parts are shown OK and others are black, this gradient issue is getting me mad.

Thanks for giving me a clue on how to solve my gradient problem that I've experienced in the past with Inkscape!
Kudos to you!

 

[6BK]

3.Preparing the text. Once your happy with the look of your text, click the mouse icon in the top left and then drag over to select all the text. Then go to Path > Object to Path. This will turn the text into shapes that will be shown in GT sport. Here in now the time to re-position parts of the text if you want. Double click to ungroup the text and then click and drag to select the text. You can also adjust the scale here as well. View media item 45080
View media item 45084

Thanks @Noisy I was missing this step myself and files were uploading blank.

I need a little help though. When using "object to path", resize to page and save as plain .svg my files are still between 17 and 22 KB, just over the 15KB limit. They are not massively complex, just 1 layer, text with stroke and some mesh. Is there something else I need to do to make them smaller?

I did see a link somewhere here but can't find it now directing us to a good resizing tool. The ones I'm finding by doing a google search are rubbish.

 

[daan]

Thanks @Noisy I was missing this step myself and files were uploading blank.

I need a little help though. When using "object to path", resize to page and save as plain .svg my files are still between 17 and 22 KB, just over the 15KB limit. They are not massively complex, just 1 layer, text with stroke and some mesh. Is there something else I need to do to make them smaller?

I did see a link somewhere here but can't find it now directing us to a good resizing tool. The ones I'm finding by doing a google search are rubbish.

https://jakearchibald.github.io/svgomg/ is the one most here use.

 

[graveltrap]

Does anyone else have trouble with GTS adding or picking up stroke parameters when creating shapes in Inkscape?

I have to run the SVG through SVGO website to get rid of the problem.,,

 

[6BK]

@daan that's exactly the one I was looking for. Mind numbinbly easy to use and resized perfect.

 

[AKps3]

Can someone please help me?
It's fine on the webpage but ingame I only see the background
What I'm doing wrong? (I'm using Inkscape)



Edit: This was the problem [PATH] >[OBJECT TO PATH]
Now it works

 

[Ratchet2448]

I am at a point now where I can make decent SVGs but I know its inefficent in some way but dont know how to improve it, but I know it is all about the fine details/fundamentals of what is an SVG. My discussion stems from posts #891, 894-895 ( the good niddy gritty stuff lol)

For starters, my general approach is to make SVGs manually using Illustrator and then use SVGOMG to get it down to the 15kb limit when needed. I'll create a frame work of strokes (strokes of sometimes various colors that overlapped with one another-mainly for a more aestheitc appearance of the final protuct) and then make it a live paint group, at that point it's basically a coloring book. Now depending on how complex the project is will determine if it can be done as one file or needs to be broken up. From what i've read and seen, the live paint option isnt mentioned much and instead shapes that have "none" for stoke and have a fill color are then positioned in layers. Now, in general, the goal is to minimize the #of nodes used to create the image but from a coding standpoint it is also important that the amount of decimal places used is kept to a minumum. With that said, my question is:
How does the live paint method compare versus the "layered fill" method from a file size standpoint? (if possible i'd like to know from a coding perspective why one would be better over the other.)

Now i'd like to mention post #895 that @MatskiMonk wrote. The panther decal had 1244 nodes at 14.8kb. I currently have one that is 3281 nodes at 106.2 kb (can be optimized to 65.5 kb). Using the# of nodes the panther had as reference, I would guess i'd be able to break mine up into three sections. However once I finished breaking it up, I was at 5 sections. So I looked at the code and, while defintely not as economical as the panthers, it still favored it. i'm just left with.... how is that possible?! lol. I want to try and figure this out

I appreciate any insight you guys can give.

 

[takkadam05]

Greetings everyone,

First, let me say sorry as I didnt have time to read through all the messages in search of the answer I am looking for, I know this can be considered as a rude thing to do, and I agree! Yet, Id really like to ask if anyone has a complete documentation, or just basic guidelines on how exactly GT sport renders svg files, what I really want to know if there are known codes and attributes that are ignored by the game, such as (since I am not able to get them work) blur effect, patterns, transformations, limits of gradients, or rules to def them and so on and so on! I am confortable enough with coding or Inkscape, corel, illustrator Ive already made hundreds of decals ingame, but there are ideas in my head which I like to make, but im restricted, and Id like to know in what ways I am held back! Thank you very much in advance if anyone takes the time to reply!

 

[takkadam05]

I am at a point now where I can make decent SVGs but I know its inefficent in some way but dont know how to improve it, but I know it is all about the fine details/fundamentals of what is an SVG. My discussion stems from posts #891, 894-895 ( the good niddy gritty stuff lol)

For starters, my general approach is to make SVGs manually using Illustrator and then use SVGOMG to get it down to the 15kb limit when needed. I'll create a frame work of strokes (strokes of sometimes various colors that overlapped with one another-mainly for a more aestheitc appearance of the final protuct) and then make it a live paint group, at that point it's basically a coloring book. Now depending on how complex the project is will determine if it can be done as one file or needs to be broken up. From what i've read and seen, the live paint option isnt mentioned much and instead shapes that have "none" for stoke and have a fill color are then positioned in layers. Now, in general, the goal is to minimize the #of nodes used to create the image but from a coding standpoint it is also important that the amount of decimal places used is kept to a minumum. With that said, my question is:
How does the live paint method compare versus the "layered fill" method from a file size standpoint? (if possible i'd like to know from a coding perspective why one would be better over the other.)

Now i'd like to mention post #895 that @MatskiMonk wrote. The panther decal had 1244 nodes at 14.8kb. I currently have one that is 3281 nodes at 106.2 kb (can be optimized to 65.5 kb). Using the# of nodes the panther had as reference, I would guess i'd be able to break mine up into three sections. However once I finished breaking it up, I was at 5 sections. So I looked at the code and, while defintely not as economical as the panthers, it still favored it. i'm just left with.... how is that possible?! lol. I want to try and figure this out

I appreciate any insight you guys can give.

In my own experience, its not necesseraly the number of nodes(tho it does count a lot) its the complexity of the shapes you are using! I found it easier if I use as much basic shapes as possible such as circles and rect as they can be coded easily, than trying to draw one big shapes which eventually will be a path element with 10,345.678 nodes and points as path are need to be rendered per se shapes are not! About the coloring, overlapped colors and shapes are still nodes so if you have an overlap better to use the shaper tool to just get them the shape you will see in the end then letting them overlap this way lot of nodes can be saved! If however it comes to make complex shapes always use bezier curves rather than lines or outlines! One more thing, I never use stroke fill unless its really necessary.
Im not sure if this helped or not, but this is the best I can do

 

[shaynskyline]

Does anyone know why black decals made in Inkscape show up ingame as less than black when applied to a car?
In the preview they are dark black but come out lighter when applied? I've checked color mode and made 100% sure they are full black.. I can't work it out...

Yes single color decals can just be changed to black ingame but multicolor decals featuring black can not..

Sorry if this has been covered..

 

[Cytoria]

Does anyone know why black decals made in Inkscape show up ingame as less than black when applied to a car?
In the preview they are dark black but come out lighter when applied? I've checked color mode and made 100% sure they are full black.. I can't work it out...

Yes single color decals can just be changed to black ingame but multicolor decals featuring black can not..

Sorry if this has been covered..

The 0/0/0 black for Inkscape was the original black of the game, but it seemed a bit too light, so in an update they changed the last « black » to a deeper tone.

As you said, if you choose the last dot as the color for your decal, it will have the deep black color and this obviously doesn’t work for multicoloured decals, but usually the difference of the black is less visible on these.

Edit :

We need real deep black color in mileage special color store because the black in editor is not enough black more like dark grey.

I just checked...

DEEP BLACK IS BACK!!!!

 

[BLiTZ]

If you're clever enough, you can make a decal where the black parts are transparent and use a 'Deep Black' painted decal underneath to show through 👍

Since the 'Deep Black' update you'll find that the whole colour spectrum is messed up and trying to match HSV codes in-game is now impossible.

 

[MMX]

For a good black on a decal, I have the document color mode as CMYK, and make the black c70/m50/y50/k100. Still not as black as the ingame, but is dark enough, that it looks right.

My work is in digital printing, so all our blacks are those numbers, which is referred to as Rich Black.

 

[MatskiMonk]

For a good black on a decal, I have the document color mode as CMYK, and make the black c70/m50/y50/k100. Still not as black as the ingame, but is dark enough, that it looks right.

My work is in digital printing, so all our blacks are those numbers, which is referred to as Rich Black.

It's converted to RGB when saved as SVG anyway, so may as well just go with SVG "Black", #000000, or rgb(0,0,0)... unless I am wrong?

Does anyone know why black decals made in Inkscape show up ingame as less than black when applied to a car?

The settings PD use to render it as a colour in the environment obviously lighten how it looks versus how it renders bitmap based textures in the environment.

 

[MMX]

It's converted to RGB when saved as SVG anyway, so may as well just go with SVG "Black", #000000, or rgb(0,0,0)... unless I am wrong?

Doing what I've been doing gives me a darker black, so it makes a difference.