RetroPie forum home
    • Recent
    • Tags
    • Popular
    • Home
    • Docs
    • Register
    • Login

    replacing logo

    Scheduled Pinned Locked Moved Projects and Themes
    logo
    33 Posts 10 Posters 13.6k Views
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • herb_fargusH
      herb_fargus administrators @sketch2k278
      last edited by

      @sketch2k278 yes you have to convert strokes to paths.

      there is a guide I think @UDb23 did on the forum somewhere on converting pngs to svgs

      If you read the documentation it will answer 99% of your questions: https://retropie.org.uk/docs/

      Also if you want a solution to your problems read this first: https://retropie.org.uk/forum/topic/3/read-this-first

      1 Reply Last reply Reply Quote 0
      • UDb23U
        UDb23 @sketch2k278
        last edited by

        @sketch2k278 Video tutorial here. Give it a try.

        S 1 Reply Last reply Reply Quote 0
        • S
          sketch2k278 @UDb23
          last edited by sketch2k278

          @UDb23 Thanks for the vid, quite helpful but the final look didn't quite look as I hoped(not too bad though), plus the size was increased (3,045 kb saving as svg due to the scan increase) plus some of the lettering like the A in Alpha just caused issues when separating the color layers. This is what it looked like before the scan increase 0_1486333783580_Image5.jpg

          UDb23U 1 Reply Last reply Reply Quote 0
          • UDb23U
            UDb23 @sketch2k278
            last edited by

            @sketch2k278 Almost 3 MB for a simple logo seems really big to me as file size!
            I would suggest you apply separate single solid colors to you original png so that tracing will better identify the different shapes and outlines. You can then easily reapply the right colors in inkscape.

            S 1 Reply Last reply Reply Quote 0
            • S
              sketch2k278 @UDb23
              last edited by

              @UDb23 does it have to be saved a certain svg format?? I notice that there were multiple selections when it comes to saving in that format

              UDb23U 2 Replies Last reply Reply Quote 0
              • UDb23U
                UDb23 @sketch2k278
                last edited by

                @sketch2k278 plain svg (not inkscape svg).

                1 Reply Last reply Reply Quote 0
                • UDb23U
                  UDb23 @sketch2k278
                  last edited by

                  @sketch2k278 Just did a quick test. With the original png you posted (178kb) I get a 168 kb SVG.

                  S 1 Reply Last reply Reply Quote 0
                  • S
                    sketch2k278 @UDb23
                    last edited by

                    @UDb23 how did you get 168kb svg?? what did you do exactly, if you don't mind me asking

                    FlyingTomahawkF UDb23U 2 Replies Last reply Reply Quote 0
                    • FlyingTomahawkF
                      FlyingTomahawk @sketch2k278
                      last edited by

                      @sketch2k278

                      Did you create the first logo (PNG)?

                      S 1 Reply Last reply Reply Quote 0
                      • S
                        sketch2k278 @FlyingTomahawk
                        last edited by sketch2k278

                        @FlyingTomahawk yes I did, the very 1st post of the logo is in png format, shoot.... if you like to take a crack at it I wouldn't mind that at all lol

                        FlyingTomahawkF 1 Reply Last reply Reply Quote 0
                        • FlyingTomahawkF
                          FlyingTomahawk @sketch2k278
                          last edited by FlyingTomahawk

                          @sketch2k278

                          Did you use various fonts to write those 3 words and then put them together to get that one image? Or was it already like that?
                          I guess first thing would be to cut those 3 words apart in Photoshop then take one by one to Inkscape, edit them then put them together and save as svg.
                          Sure a good challenge.

                          S 1 Reply Last reply Reply Quote 0
                          • P
                            putritan @cylum
                            last edited by

                            Thanks for give me information very use ful for me

                            Mebel Jepara

                            1 Reply Last reply Reply Quote 0
                            • S
                              sketch2k278 @FlyingTomahawk
                              last edited by

                              @FlyingTomahawk what I used was the word "Final" in the final fight logo, I used the font "Fighting Spirit turbo" for the word BURN (to mimic the word fight), the font "impact" for the A and the rest of the word in alpha I got from Street Fighter Alpha 3. I wanted to make the words more Capcom like and tried to mimic to the best of my abilities 0_1486402076122_combo.jpg

                              1 Reply Last reply Reply Quote 0
                              • UDb23U
                                UDb23 @sketch2k278
                                last edited by

                                @sketch2k278 FInal result 66 kb.
                                Svg downloadable here (for 30 days).
                                Based on image you posted here. As previously suggested first step: separate areas with different colors in Photoshop elements. Also made background transparent.
                                0_1486412717630_newfab.png
                                Step 2: tracing in inkscape (color, 6 pass, UNcheck all lower windows options: smoothing , grouping and background remov.)
                                Step 3: ungroup result; Blue and Red elements cleanup (deleting unwanted spots around letters)
                                Step 4: apply Gradient fill to green and blue
                                Step 5: delete original image
                                Step 6: Group all, resize document to drawing, save svg (default options).

                                FInal SVG image look like this:
                                0_1486413166039_Schermata 2017-02-06 alle 21.31.58.png

                                Of course image should/could now be edited further to get exact gradient (easy at this stage) as original and/or edit nodes to make it smoother if needed.

                                FlyingTomahawkF S 2 Replies Last reply Reply Quote 1
                                • FlyingTomahawkF
                                  FlyingTomahawk @UDb23
                                  last edited by

                                  @UDb23

                                  Bravo Maestro!
                                  Job well done.

                                  1 Reply Last reply Reply Quote 1
                                  • S
                                    sketch2k278 @UDb23
                                    last edited by

                                    @UDb23 THANK YOU SOOOOOOOOOOOOOOO MUCH!! Sorry for the all caps lol

                                    RoxsteadyR 1 Reply Last reply Reply Quote 0
                                    • RoxsteadyR
                                      Roxsteady @sketch2k278
                                      last edited by

                                      @sketch2k278 What size did you save in? I'm in the same process. Made an FBA for just classic games. alt text

                                      S 1 Reply Last reply Reply Quote 0
                                      • S
                                        sketch2k278 @Roxsteady
                                        last edited by

                                        @Roxsteady my image was 800x647 it probably explains why it turned out so small

                                        1 Reply Last reply Reply Quote 0
                                        • RookervikR
                                          Rookervik Global Moderator
                                          last edited by

                                          Haha, it depends on how you save the SVG for what size it comes out. I've found SVGs actually save smaller if you shrink them in Inkscape or Illustrator. It makes no sense, all the vector information is the same, but the file size doesn't reflect that.

                                          Be sure you don't have multiple layers saved into the SVG. I can't tell you how many times I made a logo for the Carbon theme and came out with a 100+kb file. Only to realize I still had an image on a layer I was using to create the Logo.

                                          Also, SVG vs PNG on the carousel has no affect on how large the image will display. SVGs are only better to use when you intend for them to be zoomed in on. SVG takes a little longer for the system to load than a PNG, and seem to slide slower as well. But I suppose the world will really be thankful Carbon uses SVGs when we have 16k TVs and our Raspberry Pi 34's are emulating IBM Watson.

                                          1 Reply Last reply Reply Quote 1
                                          • S
                                            SpacedInvader @herb_fargus
                                            last edited by

                                            @herb_fargus Should I make a copy of the es_system.cfg to /home/pi/.emulationstation if it does not exist there?

                                            herb_fargusH 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post

                                            Contributions to the project are always appreciated, so if you would like to support us with a donation you can do so here.

                                            Hosting provided by Mythic-Beasts. See the Hosting Information page for more information.