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

  • Thread starter daan
  • 1,494 comments
  • 390,808 views
Can anyone who has access to the up-loader let me know if you can upload compressed .svg files which are seen as ".svgz". I'm compiling some logos ready for when a mere peasant like me has access to the feature and am struggling with the 15kb limit. I'm using inkscape as i don't have illustrator.
 
double A-ron
to get rid of the auto fill of white (or whatever color is selected), look at the Tools pallet and at the bottom you'll see two squares that over lap, one solid, the other that with a "hole" in the middle. The solid square is your fill color and the "holed" square is your stroke color. You can press either one to bring forward. With the fill square in front, look beneath them and you'll see three smaller square buttons. Select the third one that should be a white square with a red hash mark through it and that will remove the fill color. Hopefully that makes sense.
Click to expand...
Fantastic. That makes sense. I'll look at it tomorrow, thank you!
Mugo123
Can anyone who has access to the up-loader let me know if you can upload compressed .svg files which are seen as ".svgz". I'm compiling some logos ready for when a mere peasant like me has access to the feature and am struggling with the 15kb limit. I'm using inkscape as i don't have illustrator.
Click to expand...
Doubt it, since GT.com states it has to be .svg. :P
 
Updated the OP! It now contains two tutorials, neatly organized. I will add a tutorial for InkScape too, and another one for Illustrator. These two will focus on manually tracing. If anyone is willing to help me write those, send me a PM!
 
While I am very familiar with Illustrator and I am using it professionally, I find "Affinity Designer" to be by far the best and easiest vector software to use. I use it whenever I can (where my pipeline allows it).

It's perfect for the kind of things we are trying to do here, and tracing logos manually actually becomes "fun".

To be honest, I am not sure if it has an autotrace feature like Illustrator, but I would use the autotrace only as a starting point anyway, and then manually optimise the paths.

Give it a try. In comparison, Illustrator feels like a software from the mid 90's. :lol:
It's also cheaper than Illustrator and Vector Magic

https://affinity.serif.com/en-us/designer/
 
Last edited:
Any chance you’d be willing to write up a tutorial and PM it to me? It’d be great to have a variety of apps to use to cater everyone. @Belifant
 
syntex123
Any chance you’d be willing to write up a tutorial and PM it to me? It’d be great to have a variety of apps to use to cater everyone. @Belifant
Click to expand...

I am willing to, but I did a quick check, and it seems an autotrace feature for Affinity Designer is in the works, but it is not implemented yet. With the two tutorials you have up there basically explaining the use of the autotrace features and not really the tools how to work with vector, a tutorial in the same way for Affinity Designer wouldn't make sense, because you would only use it to edit paths, not create them. An Affinity tutorial would either involve a third party app for the initial creation of the vectors, or it would be just a basic introduction into the vector tools and how to use them. Not sure if this is something beginners are interested in.

In this context, it makes it look more complicated for inexperienced users to use Affinity Designer, even though the UI is much simpler than the other two. Affinity is great if you are willing to hand draw the vectors, or edit existing vector files.




On another topic, for anyone who would like to learn the basics of vector path editing, this is a nice little online game to teach you. The commands will vary dependent on the application you use, but the basics are the same:

http://bezier.method.ac
 
Last edited:
Belifant
I am willing too, but I did a quick check, and it seems an autotrace feature for Affinity Designer is in the works, but it is not implemented yet. With the two tutorials you have up there basically explaining the use of the autotrace features and not really the tools how to work with vector, a tutorial in the same way for Affinity Designer wouldn't make sense, because you would only use it to edit paths, not create them. An Affinity tutorial would either involve a third party app for the initial creation of the vectors, or it would be just a basic introduction into the vector tools and how to use them. Not sure if this is something you are interested in.

In this context, it makes it look more complicated for inexperienced users to use Affinity Designer, even though the UI is much simpler than the other two. Affinity is great if you are willing to hand draw the vectors, or edit existing vector files.




On another topic, for anyone who would like to learn the basics of vector path editing, this is a nice little online game to teach you. The commands will vary dependent on the application you use, but the basics are the same:

http://bezier.method.ac
Click to expand...
I think a third auto trace tutorial would be too much, so a manual trace and edit tutorial and anything else you can think of would be great. :) and like you said I think a simple basic introduction to the tools etc would be very helpful too!

I remember seeing a youtuber (draw with... can’t remember) use that one, forgot about it until now! Will add it to the OP, but maybe in the same portion of your tutorial contribution. PM me screenshots/pics and a tutorial whenever you can, and I’ll add it to OP :)

Thank you!
 
A little trick that I often use when I want to get original vector logos for any corporate logo:

1. check the website and look for Press areas. Large companies sometimes provide their logo in vector format, or at least high quality png (good for re-tracing)

2. If no luck, look for downloadable pdfs, like product brochures or press releases. These pdfs are usually done professionally for printing, meaning the logos they have used are vector based. Just open the pdf in your vector application and delete anything you don't need.
 
Last edited:
Belifant
A little trick that I often use when I want to get original vector logos for any corporate logo:

1. check the website and look for Press areas. Large companies sometimes provide their logo in vector format, or at least high quality png (good for re-tracing)

2. If no luck, look for downloadable pdfs, like product brochures or press releases. These pdfs are usually done professionally, meaning the logos they have used are vector based. Just open the pdf in your vector application and delete anything you don't need.
Click to expand...

I've done this quite often. I've had very good luck in the past just doing a Google search for company name.pdf.


In regards to tutorials for Illustrator, Adobe provides them on their website: https://helpx.adobe.com/illustrator/tutorials.html
 
I got Inkscape to try it out and get some vectors going before I get access to the uploader. I only have Photoshop experience so naturally trying Illustrator out in my college computer labs made SVG editing really simple. Inkscape however doesn't have the Magic Wand tool, but apparently there's a 'Selector' mode that detects areas of the canvas you're editing that was suggested when searching for help. I have not gotten this to work frankly, and quite frankly Inkscape was messy to setup for MacOS, so I think I'd get myself Adobe CC with a student discount subscription, or work on SVGs in campus.

Needless to say it seems the next maintenance will see the uploader available hopefully. I've gotta work on vectors to claim first dibs for the idea. :dopey:
 
Normalaatsra
Needless to say it seems the next maintenance will see the uploader available hopefully. I've gotta work on vectors to claim first dibs for the idea. :dopey:
Click to expand...
Haha I thought the same for two of the liveries I was holding back.. But I became so restless and wanted to finish them NOW so I had to bite the dust and ask for help for upload. :lol: Still have a folder with decals that me myself and I will upload before telling anyone about them though :lol:
 
Updated the thread! Now we have a third tutorial on the front page! This time it isn't how to auto-trace, this time it's all manual!
 
I have a general question about logos that I can't find an answer to, and can't figure out myself yet.

Can any of the decals/logos that are user created have their colors changed within the livery editor? Like if you uploaded a solid white logo with no background, does GTS give you the option to change its color from white to a pallet color as it does for other shapes?

I'm figuring the answer is no, and am dreading trying to get colors to match up the way I want.
 
Fredzy
Can any of the decals/logos that are user created have their colors changed within the livery editor? Like if you uploaded a solid white logo with no background, does GTS give you the option to change its color from white to a pallet color as it does for other shapes?
Click to expand...
Yes! You can! You can also scale it how you please, skew it, have it mirrored, any color you want. Just upload it in black and change it in-game. No problem. Just be cautious - if you decide to upload a decal with multiple colors and think "I'll just change this one color in-game" then nope. Then you will end up with a solid blob of that color. Like, let's say the GameStop logo. That one is best to upload black&red, since changing the color in-game will change it all to blue, if you wanted blue where the red is. Hope this helps. :)
 
syntex123
Yes! You can! You can also scale it how you please, skew it, have it mirrored, any color you want. Just upload it in black and change it in-game. No problem. Just be cautious - if you decide to upload a decal with multiple colors and think "I'll just change this one color in-game" then nope. Then you will end up with a solid blob of that color. Like, let's say the GameStop logo. That one is best to upload black&red, since changing the color in-game will change it all to blue, if you wanted blue where the red is. Hope this helps. :)
Click to expand...
Thanks a lot, this definitely helps! And many thanks for the great tutorial work. I think I'll be able to get away with what I want to do without paying for software, but it looks like I'm always $8 and a little frustration away from getting where I want to be, worst case. I was pretty bummed to find out that Photoshop Elements, which I own, is totally useless for vector graphics.
 
Fredzy
Thanks a lot, this definitely helps! And many thanks for the great tutorial work. I think I'll be able to get away with what I want to do without paying for software, but it looks like I'm always $8 and a little frustration away from getting where I want to be, worst case. I was pretty bummed to find out that Photoshop Elements, which I own, is totally useless for vector graphics.
Click to expand...
Of course, I do anything for this community. And you shouldn't thank only me, I may have started the thread and added the first tutorial, but if it hadn't been for @Lord Protector and @Belifant the two other ones and quality of this thread wouldn't be where it is right now. :)
Well Inkscape is free, and if someone is willing to write up a tutorial in the same style as the other ones here, please give me a shout!
Ahh but Adobe Capture on your phone works great for vector graphics, have you tried that? You know what, I might actually add a tutorial for that too, even though it is very straight forward and very easy to use.



I want to add this message:
As of right now - @Jordan officially made this thread a sticky! :D
Thanks again Jordan, you're the best. :)
 
Last edited:
I have just found the better quality the image is to start with the better quality the SVG will likely be, I downloaded a vector in .ai format, but it was lumpy and bumpy and could not get close to what I need. I then found the same logo as a .PDF, which resulted in a much higher quality trace, especially with the letters C,D and O. In fact I didn't have to use Inkscape's simplify feature at all to get it below the 15kb limit!

Moral of this story is start with 🤬 get 🤬 out!
 
graveltrap
I have just found the better quality the image is to start with the better quality the SVG will likely be, I downloaded a vector in .ai format, but it was lumpy and bumpy and could not get close to what I need. I then found the same logo as a .PDF, which resulted in a much higher quality trace, especially with the letters C,D and O. In fact I didn't have to use Inkscape's simplify feature at all to get it below the 15kb limit!

Moral of this story is start with 🤬 get 🤬 out!
Click to expand...
Well that is a no-brainer. Say you trace a 150x150 png image, you won't be able to see the intricate details of it vs a 1000x1000 of the same image.
Better to use a good reference picture than a bad one, to get better results in the end. :)

I decided to try Affinity Designer last night. My first attempt got me to a file size of 308(!!)kb. Used a 2000x2000 reference image, so I placed quite a few anchor points. Then I tried again. Same image. Decided to compromise a little and did fewer anchor points. I also made it more accurate to how I wanted it. I ended up with a size of 10kb when I was done. The difference of those two finished SVGs were night and day. Never would I try to get that 308kb one down to <15kb. The new 10kb one is better than I expected.

So for everyone here that are new to tracing and want an easy but powerful option to manual trace - look into Affinity. The tutorial for it is excellent and you'll pick up on how it's done in no time. :)
 
syntex123
Well that is a no-brainer. Say you trace a 150x150 png image, you won't be able to see the intricate details of it vs a 1000x1000 of the same image.
Better to use a good reference picture than a bad one, to get better results in the end. :)
Click to expand...

Being new to all this I was using another form of vector thinking it would be good quality (better than JPEG), but alas it wasn't, the original trace was poor.

Learning in progress, a high quality PDF image makes a great base for tracing!
 
graveltrap
Being new to all this I was using another form of vector thinking it would be good quality (better than JPEG), but alas it wasn't, the original trace was poor.

Learning in progress, a high quality PDF image makes a great base for tracing!
Click to expand...
I'm sort of new too, I've done my fair share of tracing in Photoshop, but only this kind. Never tried making SVGs before.
From now on I'm going to make all my drawings in Affinity :D
 
Do you really need a fee-based software and have a master in graphic design to make these SVG files?
The tutorials creates the impression, that this feature is only for professional designers. I understand the decision to restrict the uploads to a certain type of graphic format and also the file size, but isn't there a easier way to create the logos you want?
 
KING OF SKULLS
Do you really need a fee-based software and have a master in graphic design to make these SVG files?
The tutorials creates the impression, that this feature is only for professional designers. I understand the decision to restrict the uploads to a certain type of graphic format and also the file size, but isn't there a easier way to create the logos you want?
Click to expand...
Inkscape is a great free option. But take Affinity as an example. It does not require you to be professional at all. Really easy to get great results. And if you want to go the automatic route, Vector Magic is your thing. Also easy and great unless it is an intricate piece. :)

And I feel like I need to say this. Almost all software you need is paid software, why should designer apps be any different?
 
syntex123
Inkscape is a great free option. But take Affinity as an example. It does not require you to be professional at all. Really easy to get great results. And if you want to go the automatic route, Vector Magic is your thing. Also easy and great unless it is an intricate piece. :)

And I feel like I need to say this. Almost all software you need is paid software, why should designer apps be any different?
Click to expand...
I understand your point and I'm on your side that good software has its price, but than I tell you that it is way to complicated for the normal gamer.

My thoughts about it were, find logos you like to build into your livery, convert them, download them, however and use the uploader to get them there where you need them. But using a extra software (that even cost you money) is way beyond an easy to use feature. And finding proper SVG file is hard work.
 
KING OF SKULLS
I understand your point and I'm on your side that good software has its price, but than I tell you that it is way to complicated for the normal gamer.
Click to expand...
It isn't complicated at all actually. :) it's rather easy once you give it a go. If @Belifant didn't provide the Affinity tutorial I would never have known about that app, and I bet that all here with basic Photoshop skills would LOVE Affinity. Like I do. Try it, you won't regret.
 
syntex123
It isn't complicated at all actually. :) it's rather easy once you give it a go. If @Belifant didn't provide the Affinity tutorial I would never have known about that app, and I bet that all here with basic Photoshop skills would LOVE Affinity. Like I do. Try it, you won't regret.
Click to expand...
I think I'm not willing to spend more money on the game and go with the decals the people share. But I wanted to give something back, with stuff I made. The concept of this feature is contra productive and frustrating. I hope you understand what I want to say. :guilty:
 

Similar threads

daan
  • Sticky
GT7 SVG request thread.
183 184 185
Replies
6K
Views
406K
Snakebitten
Snakebitten

Latest Posts

Back