Hello everyone!
I'm sure by now you all have heard you can import your own user decals to use within the game!
For all you guys and gals out there with little understanding of how to do this, I've decided to make a tutorial thread on how to make those logos ready for upload!
The image type you need in order to use it within Gran Turismo Sport is .SVG. This is short for Scalable Vector Graphics.
This is basically an image that doesn't get any loss in quality no matter how big or small the logo is! Isn't this great?
First, let's start with the basics.
What are the differences between Raster (for example BMP, Bitmap data) and Vector(SVG)?
The BMP format generates an image using groups of dots. If this type of data is enlarged, the small dots will start to be stretched, making edges of curves jagged or blurred.
On the other hand, the SVG format converts images to numbers when storing them. The advantage of vector data is that even if an image is enlarged, the image quality will not deteriorate, and the data size will not increase either.
The diagram below shows a comparison of an enlarged BMP file (left) and a SVG file (right). On the SVG file, the sharpness of the edges is maintained.
View attachment 690257 View attachment 690256
But remember guys and girls! We have a size limit of 15KB!
The data size of a SVG file depends on how the image is created, even if the end results may look identical. If an SVG file size is too large and the image cannot be uploaded, you can reduce its size by editing the anchor points and path data of the SVG image. Specialised optimisation software for SVG files can also be effective in these instances. If you use Illustrator you could try to click Object > Path > Simplify. If that doesn't work to well, try
this online optimizer to get the size down!
Let’s take a look at a comparison of two SVG files generating the same image.
View attachment 690258 View attachment 690259
On the left there's an SVG file that was generated automatically using a non-structured Bitmap image (a collection of dots) as a base, using the auto trace feature of an editing software: unnecessary anchor points can be clearly seen, and they are not accurate either. As a consequence, the file size becomes large.
On the right there's an industry standard SVG file created by manually editing vector data of a Bézier curve: it consists of the least number of anchor points, and each applied with high accuracy. Because of this, its file size is also small.
Now you've got the basics, let's begin with the tutorials!
I want to start off with a video tutorial, much like the Affinity Tutorial(since it is Affinity Designer I'm using), but here you can see more to it! If you use Illustrator or any similar program, it shouldn't be too different to this. Also, if you're unsure how to upload the decals once you make them, keep watching until the end! Here you can see the entire process.
TUTORIAL #1: ILLUSTRATOR
What you want to do is to download an application an application that handles .svg files. For the first tutorial I'm going to show you a real easy way using
Adobe Illustrator CC. This application can be downloaded for free for Windows and Mac OS, and has a 7-day trial.
This method works great if your logo is simple, because like we've just covered, this will create unnecessary many anchor points, and bring size up. Most single and two-colored logos should work fine this way though, so don’t be afraid.
Okay let's begin! Find a decent logo that has some size to it already if you're able to. For this tutorial I've chosen to use a
Speedhunters logo.
View attachment 690260
This logo is 900x900, not particularly big, but it isn't too bad in terms of quality, so it should work fine.
Open up the image in Illustrator.
View attachment 679418
Then click Window > Image Trace. This will open up the bar you see on the right side on the image above.
View attachment 679419
Play around with the settings you see here, until you're happy. Choose ignore white if you want the white to be transparent. This is especially important if you're working on a logo that is any other color than white, or else it will make a white box around the logo, and inside letter like O, A etc..
Edit the mode if you plan on choosing a multi-color logo, and set total amount of different colors. The fewer colors the better.
And you're done! This method should work for most images you find. All that is left is to export the image, don't forget to choose SVG!
View attachment 679422View attachment 679421
The finished result can be seen or downloaded
here.
Enjoy making decals for Gran Turismo Sport!