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

[syntex123]

Set the fill and stroke color to be None and the shape will be invisible.

Right. Thanks Will see if I manage to do this later today. If not I'm sticking with auto-trace.

 

[eran0004]

Right. Thanks Will see if I manage to do this later today. If not I'm sticking with auto-trace.

Actually, it takes some time to learn how to do vector graphics well, so don't expect to master it on your first try I'm still learning, and I've been doing it for about a decade (I actually started doing vector graphics with Photoshop!)

 

[syntex123]

Actually, it takes some time to learn how to do vector graphics well, so don't expect to master it on your first try I'm still learning, and I've been doing it for about a decade (I actually started doing vector graphics with Photoshop!)

Yeah I bet, the tools and how they functions was a lot different to what I’m used to in Photoshop. I use the pen tool all the time now, after @TayeezSA showed me the easy way. I was used to shift-clicking with the brush before

Spoiler: Example of what I’m doing with pen tool

..but I’ve never touched vector graphics before though.

 

[xJildertx]

You can use InkScape which is completely free.

If you apply those custom user decals will other people also see those during a race?

 

[ThrasherDBS]

I'm sure someone is gonna upload the GTPlanet logo when that goes live. There's a spot on the quarter panels of my cars reserved for it.

 

[AutobacsJM]

any word on whether svgs will be editable in-game? for instance uploading a flat shape logo then altering it’s color in-game?

 

[Nick Skyline]

After hearing that the livery editor in GTS has SVG functionality, I did some digging and found what I believe is a great starting point for anyone who's really looking forward to the livery editor's .svg functionality - and is likely going to become very popular because of it. To me, OP feels incomplete without a link to WorldVectorLogo. You can go there and download .svg format artwork for just about any brand name you can think of...well, almost any brand name. Not all the logos you find are going to be the exact color of your liking, but it's nothing that InkScape or Illustrator can't fix. And even if the logo you found is a raster image, you should just be able to trace it and then save your trace as an SVG. Nonetheless, check out that website because it is really simple to use, and just going there can lead to a lot of possibilities in GTS's livery editor.

@syntex123: Very useful post. I can't wait to making my own stickers myself!

 

[syntex123]

If you apply those custom user decals will other people also see those during a race?

I sure hope so, if not what's the point. The livery will look half done if not.

I'm sure someone is gonna upload the GTPlanet logo when that goes live. There's a spot on the quarter panels of my cars reserved for it.

I got the svg files from @Jordan a while back, so if he allows it I will upload it the very second the upload-function goes live!

any word on whether svgs will be editable in-game? for instance uploading a flat shape logo then altering it’s color in-game?

Doubt it. They'll most likely be like the manufacturer decals you can already place. You can scale them and edit color on decals with a single color only.

After hearing that the livery editor in GTS has SVG functionality, I did some digging and found what I believe is a great starting point for anyone who's really looking forward to the livery editor's .svg functionality - and is likely going to become very popular because of it. To me, OP feels incomplete without a link to WorldVectorLogo. You can go there and download .svg format artwork for just about any brand name you can think of...well, almost any brand name. Not all the logos you find are going to be the exact color of your liking, but it's nothing that InkScape or Illustrator can't fix. And even if the logo you found is a raster image, you should just be able to trace it and then save your trace as an SVG. Nonetheless, check out that website because it is really simple to use, and just going there can lead to a lot of possibilities in GTS's livery editor.

@syntex123: Very useful post. I can't wait to making my own stickers myself!

I'm sorry! I included Brands Of The World though. I will edit the OP and make it more clear. Also add World Vector Logo. Thanks.

 

[double A-ron]

One thing worth mentioning about Brands of the World and World Vector Logos is that quite a bit (if not all) of the logos there are actually recreations that people have made of the actual company logos and if you zoom in on them, you'll see slight issues kind of like what eran0004 showed in post #24. Most big name companies don't just make their brand identities available for anybody to use at their whim. Some spend tens of thousands of dollars in developing their corporate identity and they aren't about to give it away free. Now, with that said, I'm sure what's available on those sites will be good enough for most people here and those imperfections may not even be noticeable.

Another option that I've found to work in the past is that if you Google the company name you want and "PDF", you may be able to find actual corporate documents like newsletters or even brochures that have the company logo on them. If you take that PDF you may be able to open it up in vector program and if it's not locked and the original creator used vector images, you can delete everything but the artwork you want and then save it on its own.

 

[ateeb naheem]

What if you convert a image to svg?

 

[double A-ron]

What if you convert a image to svg?

Technically you can, but it won't magically make the image able to be scaled up without loss of quality. If an image is starting out as a raster/bitmap image it remains that way regardless of the type of file you save it as.

And as a warning, if you download an image that's an .svg and it scales like crap, it's not a true .svg. Somebody very likely didn't know what they were doing and saved a raster/bitmap image that way thinking magic would happen.

 

[AutobacsJM]

any word on how many svgs or what amount of data will be available on the GT website per user? i already started working on the 2017 ARTA NSX as i won the Gr.3 car in the demo, i have maybe 20 different sponsor svgs i want to upload to complete it.

 

[syntex123]

What if you convert a image to svg?

Technically you can, but it won't magically make the image able to be scaled up without loss of quality. If an image is starting out as a raster/bitmap image it remains that way regardless of the type of file you save it as.

Then why are my images flawless when I zoom in like crazy?

Spoiler: Example from the tutorial

I could zoom further but you get my point.

 

[ScottPuss20]

I guess that would be possible, but then you get a raster image and it will look pixelated when you scale it up. By making it vector graphics you can scale it to any size and the edges will still be clean.

Because vectors and bitmaps are fundamentally different ways of storing image data and presenting it. Think of an SVG as a list of instructions and co-ordinates for a program to be able to draw an image itself... in comparison, think of bitmaps as painting.

Listen to these guys.
Amen to that. I tried using Photoshop and it just looked like any .png I’m used to make. It looked like utter crap. Illustrator is a lot better for this kind of design. I’m new to Illustrator though, but the automated process works fine so far!

OK I understand now. I have used Illustrator at school before so I know what you're saying - I'll need to get Illustrator somehow, because I want to contribute some decals to GT Sport. Also, @eran0004, if the image trace is a bit off, how do you use the pen tool to refine the image?

 

[double A-ron]

Then why are my images flawless when I zoom in like crazy?

Spoiler: Example from the tutorial

View attachment 680055 View attachment 680056
I could zoom further but you get my point.

If that’s the same image just zoomed in more, then it’s not a vector image, it’s raster. A vector image will never get pixelated like the second image no matter how much you zoom in, it will always look smooth.

 

[eran0004]

Then why are my images flawless when I zoom in like crazy?

Spoiler: Example from the tutorial

View attachment 680055 View attachment 680056
I could zoom further but you get my point.

The SVG format supports raster as well as vector images, which means that you don't get vectors just because you save an image as an SVG.

In your case you got vectors though, since you drew vector graphics based on the raster file, rather than just resaving the raster file as an SVG.

Same with fonts, they are stored as font objects and not vectors, which means that if the system reading the file doesn't have access to the same font, the image will look different on that system. So it's better to convert any text to vectors before you save the file.

 

[doubleg213]

I'm perfectly happy with Illustrator as I use it for other things but I've never produced anything specifically as an svg. Typically I would create a standard Illustrator file and then export that as and when in whatever format I am working with at the time. For my signwriting on the cars I've always just given the signwriter my full Illustrator file and left him to it.

I've started working on some things ready and starting to export some of my existing files that I used for doing skins in Dirt Rally and Assetto Corsa but I am a little unsure with a couple of things.

1: How do I ensure that the background is transparent? Is it just a case of setting the view to show the transparency grid.

2: How do I match the colours with GT Sport, I normally work with Hex codes or in the case of known colours because it's a car I'll use a Pantone reference or whatever if I know the original colours. I'm not sure how or where to match up with HSV values from GT Sport into Illustrator and vice versa.

 

[eran0004]

1: How do I ensure that the background is transparent? Is it just a case of setting the view to show the transparency grid.

The background is transparent by default. As long as you don't draw any shape over the background it will remain transparent. If you want to make sure that you didn't draw anything over the background it's a good idea to display the transparency grid.

2: How do I match the colours with GT Sport, I normally work with Hex codes or in the case of known colours because it's a car I'll use a Pantone reference or whatever if I know the original colours. I'm not sure how or where to match up with HSV values from GT Sport into Illustrator and vice versa.

You can change the colour picker to HSB/HSV (in my version of Illustrator it's called HSB) and input the same values you used in GT Sport.

 

[doubleg213]

Thanks, I presumed that must be the case with the svg outputs but wasn't 100% certain.

I tried with the HSB figures in Illustrator, but for instance, with the Pirelli logo in the game I have it on a livery and painted the car yellow with 16,79,91 HSV and that hid the background colour of on the Pirelli images.

If I bring up the colour picker in Illustrator and set 16,79,91 in HSB it shows as a shade of red.

I'm obviously doing something wrong or missing something obvious but I can't see what it is I'm actually meant to change beyond that, is there a way to drop the picker to show HSB only or something?

 

[syntex123]

The SVG format supports raster as well as vector images, which means that you don't get vectors just because you save an image as an SVG.

In your case you got vectors though, since you drew vector graphics based on the raster file, rather than just resaving the raster file as an SVG.

Same with fonts, they are stored as font objects and not vectors, which means that if the system reading the file doesn't have access to the same font, the image will look different on that system. So it's better to convert any text to vectors before you save the file.

As far as I know the source image was jpeg, and I just did what I wrote in the OP Which makes me so confused!

The background is transparent by default. As long as you don't draw any shape over the background it will remain transparent. If you want to make sure that you didn't draw anything over the background it's a good idea to display the transparency grid.

How do you display the transparency grid? I wish it displayed it by default.
Looked for transparency and gamut or what it was called in Photoshop. But didn't find it.

Edit: Never mind. Found it. CMD/CTRL+Shift+D.

 

[TerryLabonte44]

Someone should pin this thread to the top so we can easily find it

 

[Mush_nz]

Doubt it. They'll most likely be like the manufacturer decals you can already place. You can scale them and edit color on decals with a single color only.

Did I completely miss this option? Because I did not see this at in the beta. So you can change the colour of the brand decals?

 

[syntex123]

Someone should pin this thread to the top so we can easily find it

Yeah I hope so too! And if a pro thinks it’s a bad tutorial I’ll edit it. I just thought this was a really easy way to do it.

Did I completely miss this option? Because I did not see this at in the beta. So you can change the colour of the brand decals?

Only some of them.

 

[JamCar0ne]

You can use InkScape which is completely free.

Thank you for posting about InkScape. Had never heard of it before and after playing around in it today, am finding it will do everything I need it to. Plus, the built in tutorials are insanely cool and interactive too.

 

[syntex123]

Updated the OP to include file size with an example.

 

[syntex123]

Added an SVG Optimizer to the OP.

 

[edddmasta]

Anybody familiar with janvas.com? I used it to convert a couple png files to svg and they look to have come out pretty decent. I have zero experience with svg and it seemed easy enough but there could be something I'm missing.

 

[syntex123]

Anybody familiar with janvas.com? I used it to convert a couple png files to svg and they look to have come out pretty decent. I have zero experience with svg and it seemed easy enough but there could be something I'm missing.

Nope, I'm pretty new to this myself. Always knew about vector graphics but since I never worked with them before now my experience is little. Just be sure the background is transparent for whatever you're using and you should be good, I think. Time will tell.

 

[RACECAR]

Not gonna lie, I feel like crap now knowing PNGs (for so long, my preferred format because of the transparent quality I get and scalability) is not anywhere near as good as SVG. Even worse though is I'm likely gonna need a plugin (Which hasn't been successful so far) because neither paint.net nor Photoshop natively support SVG (and I can't exactly afford Illustrator) Aaaannnd I've never done tracing something into a SVG logo (Which I'm not confident in given I have the world's unsteadiest hand) so I might be screwed when it comes to making anything I exactly want using anything I upload from my computer.

 

[Islaygaz]

Just an aside. There is a website ( http://logos.wikia.com/wiki/Logopedia ) where there are loads of .svg files for hundreds of companies throughout the world!! Most, maybe everyone on here knows about this??