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

  • Thread starter daan
  • 1,460 comments
  • 349,487 views
Hello guys. Recently I've made some text decals and tried uploading them to gran-turismo's official site, however, I've got some issue...
I've tried using both Google Chrome or Firefox but the result is the same:
Whenever I reached the decal uploader tab and click "Upload", the pop-up "window" (or whatever it's called) appears to be loading, but it takes forever.

Here's a screenshot of it (in the attachment).

Anyone has idea what caused this issue? :confused:
FYI, I've updated my Firefox and Chrome to the latest version as well as Flash player, and I'm using Windows 8.0 on my laptop.
 

Attachments

  • Screenshot 2018-03-28 18.50.36.png
    Screenshot 2018-03-28 18.50.36.png
    7.5 KB · Views: 21
:banghead:AAAAAARRRRGGGGGG!!!:mad:

I've had enough guys! I can't figure this out, I'm gonna cry :(

okay, So I make two nice decals completely by hand. The Lewis Hamilton crest and the BCR badge. They look fine in the uploader but in game...Lewis is missing entirely and the BCR badge is very broken...

1v7SWVbBbL5F6ipADMwQnZOQzMKvheat3pqDRUHh562Vyh0_aHnJOYmpefMA0VwBOw_7jNZrBnw0SxWiJNHtNy8A-CRvsrO0a89HXAafuYk7j5ELzXKLqNmZgEQhhFZ7HO-ke00jvc9njUp8Oyj26Kx3RB2Jdqwkxyqfb3MjTIAdVK3DK5T7naO930NfHAYE88APet2VEoQlUgl1P5ah7AP_cz8tK3ElgWuG_lvTayQtLXJO0h39MGRz3VJB9wzmeOSs8BSKj--UW_bfoElB_dT811LNl5jBcFSzqcPTILxwJxWn2j9tYC5g0dyPA8UdkCi-BELX9vJk3SMGcqptg0pyDSpLFTLSfVCN-O47HoW5D_yhj0OZYTO6PRJiC7HOBDfLIrkYRzXa7EAVcMEdlUv-a9i6khIw_PMFfJZJcgSJR7lJIOaSTVkFu6OQgdmFMmoy9CMC7gu8Gkge-rhvR1EwpEYz4JbNA1HXUZOFAqPw4_zl33Y2ilMIz9C74lcu5btj6SE7ZMPRNNNZc41IAQhgKb6zHQircwWRtGQlB4EYhY_mobEnYqmJKfZLyJYZejj1_LqhVa-BxWNM3DbqkG9zLoZ-0HiUSW8MS6loascZGM5iozh7Z70-E-HGqxY0Mn3dL-J3vVzDQmPbYMFQwHuGk5kWqs1Y=w964-h558-no


As you can see, Lewis' badge is missing

UyVl3KZJDcjkioVHYHl1UU_t6O470YVlKXfCTdeVILcpcXBHEwt0MVv9-wCbewjzcW3yvlSrEc62-HYB5LhF58e62cGbRSI-HzuLZSTWzRecyeA5Ur3NJJs6b1d-9bLp5vdoxt1sl02MGtjVtSHzrdEUpuvEPsZj0_1DXsG1Z4_nT6DAtpA7lkXFLh_Nl4MHvnTvIE7woTPeU8tvwb50V97iNNVtvx_s1o-XMIj70sW_APD6VFNIEJIiFoAx6CHuI6iQspE7YHRo39IF_xjHgwovPVu-Gdlhf96Z6GgF2lFHrFhe4EgHtJqq-cirishienQcZ0xvfxm3YytBva7pSQseLEcwGlvl0oUTODzKqwgkuaT4I2eAVnK4u_ilFZ3AVbGwGz1xIuI6x7eR5a41SwR3iUrOr3oshSHQyjIGyuyKFoOEBVNQEYVEzVCawCrD-exS8H3x4DGwbhBhvOQoopPFFhUBnGs8jrKNfnNAtQlO2GK0lLYUIihefo9koLT8fpeI9F5-h6ThkXkrOvWHNweTeZCn4Q9I7QyLCaZ7YCqFZ1U40qcAa_PDNDmG5CUR2oJr59gySSlmXTQnKj4LoQS2odm8--2VMncICdRvbUHpTn-T9WE2f152LGzcBLDz5ypMOeiHQQ1KilLV79Nl0sNfiyMSOc4K=w800-h938-no


And the BCR badge broken.

Wu8hLRTGRhOd15TUWBzlOFZgq0m2BGHhNaa_VrFtxVjdVyYfKHuMAj6gAviPLsxfM3DKavjC9lhKqzvisIctxoNWZMJYk2kPCbmr5ngWznNDrThAFzu4UsyeKRDyuTTrRcl6G4Xvok7RM1yfm0zeudvjYeB5pSImsO6vdozUxxqYK6Oyq0_Qs2PG0nbPcw_vT0FyB7KtuZjwvhkINR1jW9IRo9qhnOPexl-choe70vyAhrFx3x5jCcTfGO_4hiWZf0Zh61o2DwIzWBZixpkcX356C9S3oc5eIUQbav_J_r8NSkdJ1Su6YheuMEwewaPnvpVwBemEINDfUdWqm3kIt6iUsGRJFyVQvjxI-oRM2MhcpCn8psgjWnN4PZ1XBtCGyJGaipBQnF9lJOQyoprF7sy9s50-hgzScu4zk0jkj_m6Zg_FT_7z6ayPXX-zkJZMlB2HUc-ldYnXgAJ_whxyuPFbmXKbpuTCGKq160wLJ2JkeA38fCZdtK_7R3l1_kPEWodsE6rOUKNV_OeFA68iNoalF3fws69_SRfYs4bmgru3NDf-kNKt5IoBVMF6DrYemQZHlG2fcME_Fjt0g5QHIsAeosEQji3Gi1fOx4t4r7vcKrQSAlA_hYQ1t03W4VkRKJ_Kr6ZWMuZIkVYQytw84yK-U8L8fwHI=w800-h938-no


I don't know what to do guys! I use inkscape and omg svg to make and optimize my decals but so many are broken.

Yet things like that allinol logo uploaded fine! That was made not by hand but by letting inkscape trace the picture.

Oh and I'll just add this too: That gold thing there? that was a ring, yeah. (Made the same way as the Allinol logo) And all the sonic decals? I found them, only optimized them yet, they are all broken. And the Tow Mater logos? made entirely by hand but as you can see those wheels would not cooperate...

Ugggh. Can someone help? Maybe even look at my Svg's and see what's wrong?

h3BtFE5sn6SDEJvQBaoTo4cS9EeZyN7USQCWs_VtX-J3EaU-Mm_H0vSqA_h7Y5-q6M2wCngM5814nTOWpMcQu6UJRVmA15xiZRsweHxH0-JSNRUD_vkp46KJDm9Gv2yED84WmCSHe2UWfO2IlnKTElMLyH2dbHX6RQTyIL_7mTCPPnocJCLz2_exFsmwFU5_BG7zuYMyWf_MVLSGow9jgLbWnzs_pkcikoJMoauFsVhUzJ-0TrUa4vHxHTa87at_zilyon_1ax6krtn8WzHIp-52IDbOvMKcg4TcBtaZXn975bo5sF1QaTZd4RcTsQIrzFr7kvr2BHki-G3KuEgDKBucgWST0iaeg1bHSFKJ8tThKRbQOyU4cPieSpSsf1Cqt97f0FfwS5Ow4KV4arcP9wBZJnu4Z629CjOetrMLvz32deKyx5Fdj-WOgMJHxepCIjOHepBf2NB_lb9-p39loUKvCL6U-6M8ssMn_NtIhJypkmuPEQXBkgBR53mdxL3lUvqxXxYgM5eMGHmptE7IrfSOXHIizqUyYxRTnexQyx-bCpW70L2syOee0J5BMRvDv2lMEg1axW8Rfjh0k8l91WfOgnXmqHgNEDcYtM4-WjXg5-1PrMmA4ISAxHWD1RQxotyUrFsniHEKwws18R5S_6IjsIdsgjoJ=w800-h938-no
 

Attachments

  • Troublesome Svg's.zip
    1.2 MB · Views: 18
I was so pissed by sort of the same thing on saturday. I made the zip-ties for a guy who PMed me on PSN.
6529A196-0C67-41F7-9CD2-EA424E0E7D59.jpeg

99% if the time those holes were non-existant in-game. I ended up using Vector Magic instead of making them myself.. haha
 
Ugggh. Can someone help? Maybe even look at my Svg's and see what's wrong?

Unclosed nodes and over optimisation being the two main culprits on the Sonic and Mater decals. Having two nodes in the same place, on an object that's defined as closed, looks the same as simply having one node... but it throws off the games SVG renderer. I don't know how you spot or fix these in inkscape - in Corel it's any single point that has two 'handles' attached, and all you have to do is highlight them and select join.

As for over optimisation, you've got some 80kb files... if you're selecting the lowest setting in SVGOMG it often goes wrong, anything lower than 2 is a waste of time in my opinion - too many compromises and seems to break the files.

The Lewis one is probably because the image isn't on the 'page' in inkscape. (select it, press Ctrl+shift+R before you save).

edit: Whenever you save something in inkscape, save as plain SVG, it'll give you smaller files and they're more likely to work.

99% if the time those holes were non-existant in-game. I ended up using Vector Magic instead of making them myself.. haha

The cursed fill rules. I have a work around for that kind of thing in Corel but don't know how you'd do it in Affinity. I seem to recall someone advising that you run the 'subtract' operation twice. I believe the cause is if the nodes are coded in the same direction on the internal shapes, as they are in the outside shape... reverse curve should do it, but it's never worked for me. This is because how the SVG renderer decides if it's on the inside of an object or outside, when its figuring out what it should fill.
 
The cursed fill rules. I have a work around for that kind of thing in Corel but don't know how you'd do it in Affinity. I seem to recall someone advising that you run the 'subtract' operation twice. I believe the cause is if the nodes are coded in the same direction on the internal shapes, as they are in the outside shape... reverse curve should do it, but it's never worked for me. This is because how the SVG renderer decides if it's on the inside of an object or outside, when its figuring out what it should fill.
I did double subtraction too, it just created too many nodes so I didn't bother. I might try one final time, though. It's still odd how it works 50/50 of the time. :lol:
 
I did double subtraction too, it just created too many nodes so I didn't bother. I might try one final time, though. It's still odd how it works 50/50 of the time. :lol:

I overlay a very thin rectangle from the outside to the inside, subtract that from the shape, then drag the nodes back over each other so you can't see the gap. That way there's no inside or outside, it's one continuous path, works all the time if nothing else is.
 
I overlay a very thin rectangle from the outside to the inside, subtract that from the shape, then drag the nodes back over each other so you can't see the gap. That way there's no inside or outside, it's one continuous path, works all the time if nothing else is.
Interesting :) That actually made me think of one way that would work.. Similar to what you just said, hard to explain. :lol: Thanks!
 
I don't know how you spot or fix these in inkscape

in inkscape the node marker shows up slightly different in the ui to signify that there are others beneath it, it's smaller and doesn't have a border by default. sometimes extra nodes get created when you use "difference" or combine paths together, or use the simplify tool. i have uploaded decals with layered nodes like this before without problems though
 
in inkscape the node marker shows up slightly different in the ui to signify that there are others beneath it, it's smaller and doesn't have a border by default. sometimes extra nodes get created when you use "difference" or combine paths together, or use the simplify tool. i have uploaded decals with layered nodes like this before without problems though

Ah, that sounds about right. I'm not sure if layering itself is what causes the problem though. If you have a shape whose end points occupy the same space, but are actually separate nodes, and a fill is applied to the shape, it can/could often mess up. I've tried to replicate the problem in Corel but I can't because it won't let you apply a fill to a shape that's not properly closed. I have worked on files from other users that came from inkscape, that haven't worked (either failed or got colour-blobbies), and joining these unconnected but stacked nodes has fixed the problem.
 
i just took a quick look at the file, if i had to guess the problem is something to do with using the shape tool and layering lots of shapes created with it on top of eachother. uploading the decal to gt sport seems to ignore some of them which causes the picture to lose shape. my fix would be to only use the shape tool for the fundamental shapes (in this case the shield and the circle behind the 2 and maybe the oval behind the globe) and to trace all of the smaller details over the top by hand with the bezier tool. the result might not be perfectly mathematically precise since it involves tracing shapes by hand but it won't be visibly inaccurate either
 
Any of you guys able to give me a quick simple way to create masking logos in Inkscape? I had to request one earlier for a livery idea I had and basically I want to be able to make whichever masking logos I need as most I want simply don't exist and I really need the gold to show through for the full effect, Thanks 👍
 
Any of you guys able to give me a quick simple way to create masking logos in Inkscape? I had to request one earlier for a livery idea I had and basically I want to be able to make whichever masking logos I need as most I want simply don't exist and I really need the gold to show through for the full effect, Thanks 👍

In short, get your decal, draw a box around it, then hit page down until the box is behind the decal, select both the decal and the box, then go to path, then exclusion. It'll cut the decal shape out of the box behind it.
 
Any of you guys able to give me a quick simple way to create masking logos in Inkscape? I had to request one earlier for a livery idea I had and basically I want to be able to make whichever masking logos I need as most I want simply don't exist and I really need the gold to show through for the full effect, Thanks 👍

Another way is if you're using trace bitmap on a logo to make your svg, there's an option to just invert the image in the preview box which will turn it into a mask
 
Any of you guys able to give me a quick simple way to create masking logos in Inkscape? I had to request one earlier for a livery idea I had and basically I want to be able to make whichever masking logos I need as most I want simply don't exist and I really need the gold to show through for the full effect, Thanks 👍
What @MatskiMonk and @inri said
If first method does not work check that 1 - grouped objects like converted text are ungrouped.
2 - Check you don't have 2 layers of same thing on top of each other ie: red lettering on top of same green lettering
 
I'm guessing this is a basic question, but I'm looking to create a simple text logo. I have logo as png or can it be created in inkscape itself? I can convert png to svg but it creates image that is like the size of a piece of paper and not constrained to the logo. I can not figure out how to crop/resize. also resulting svg is 29kb. Is it better to start off logo as bmp or png or does it matter? Any help is appreciated
 
I'm guessing this is a basic question, but I'm looking to create a simple text logo. I have logo as png or can it be created in inkscape itself? I can convert png to svg but it creates image that is like the size of a piece of paper and not constrained to the logo. I can not figure out how to crop/resize. also resulting svg is 29kb. Is it better to start off logo as bmp or png or does it matter? Any help is appreciated

If you're creating it yourself, it's better to create it in inkscape. PNG/JPG doesn't "convert" to SVG, it gets recreated by whatever tool you're using, and often, not very well.

Simply pasting a PNG into an SVG and saving it will not work.

As far as the cropping goes, If you've created it already, and you're in inkscape, select what you've drawn and go to edit, then click resize page to selection. 👍
 
Whoohoo it worked!! I knew it was something simple. I tried it before, but probably didn't have my work selected which is why it was the whole page. Thank you MatskiMonk!

I've uploaded them and it says successful, however I can't access them. GT manual says they should be under the "User Decals" tab but I don't see them. Does Sony have to approve?
 
Whoohoo it worked!! I knew it was something simple. I tried it before, but probably didn't have my work selected which is why it was the whole page. Thank you MatskiMonk!

I've uploaded them and it says successful, however I can't access them. GT manual says they should be under the "User Decals" tab but I don't see them. Does Sony have to approve?

No, they should just appear, normally within seconds - but only on the PS4, they don't show up anywhere else on the website version other than on the page with the upload button. I explained this with pictures in this thread.
 
No, they should just appear, normally within seconds - but only on the PS4, they don't show up anywhere else on the website version other than on the page with the upload button. I explained this with pictures in this thread.

Yeah, I was looking at the top tabs, not the categories. But i figured out "Personal Decals" meant "User Decals" myself :)!! Now my images are all invisible.

Type text - check.
Fit to selection - check.
Save as .svg under 15k - check
upload to GT servers - check
use decal - no go as they don't show (invincible)

Seems by reading other threads something "object to path" may play a part, or I have to create a path - no idea what a path is, I'm clueless. Am I supposed to trace this?? Why couldn't GT just add a text editor to their website that allows us to use fonts on our computer and output in .svg format. Many websites have this but don't output in .svg format. Also Inkscape has a cluttered interface IMO
 
Yeah, I was looking at the top tabs, not the categories. But i figured out "Personal Decals" meant "User Decals" myself :)!! Now my images are all invisible.
All text needs to be converted into curves before saving. :)
 
Yeah, I was looking at the top tabs, not the categories. But i figured out "Personal Decals" meant "User Decals" myself :)!! Now my images are all invisible.

Type text - check.
SELECT AND HIT "OBJECT TO PATH"
Fit to selection - check.
Save as .svg under 15k - check
upload to GT servers - check
use decal - no go as they don't show (invincible)

Seems by reading other threads something "object to path" may play a part, or I have to create a path - no idea what a path is, I'm clueless. Am I supposed to trace this?? Why couldn't GT just add a text editor to their website that allows us to use fonts on our computer and output in .svg format. Many websites have this but don't output in .svg format. Also Inkscape has a cluttered interface IMO

^^ Fixed that for your ;)

And yes, I'm not a fan of Inkscapes interface either.

Once you've done it a couple of times though, making text based decals takes no time at all.
 
Text decals are the easiest things to do if it‘s just converting a basic font to be used in game. If they do show up but are cropped I usually take the text/number/object and copy it into a new file to avoid any issues with it being cut ;)
And if you‘re struggeling with anything more difficult, the legends in the request thread are always up for help 👍
 
Oblject to path doesn't do anything

It does, when you select it to resize the page, also go to the Path menu, and select Object to Path. It won't look any different, but it changes it from editable text to basically a drawing of the text.
 
I got one to work!! Will it be black or can i change colors? I'm just gonna try it. Thanks very much big time guys!!
 
Back