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

    New comic theme and SVG problems

    Scheduled Pinned Locked Moved Projects and Themes
    themesvg
    54 Posts 24 Posters 22.2k 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.
    • mattrixkM
      mattrixk @lipebello
      last edited by

      @lipebello: Holy crappers, that theme looks awesome! I can't wait to see the rest of it. I especially love the System Logos. Is that a font or did you make them from scratch?

      I only have one suggestion, and that would be to make the spaces around each image equal (eg: the space between the 2 top images is quite a bit larger than the space between them and the 2 below them, while the space around the outside is somewhere between those 2).

      PNG vs SVG

      What size are the background images you are currently using? If they are 1920x1080, EmulationStation on the Raspberry Pi has problems displaying too many images that size, so if you have more than 10 systems, each with it's own 1080p background image, you're going to end up with what is called the White Screen of Death (This hopefully won't be an issue soon, as some very talented people are working on a fix, and from what I understand, they are almost done.).

      There are some basic differences between PNGs and SVGs. SVGs are vector graphics, meaning they can be resized to any size and they won't become pixelated. You could have a 640x360 SVG image and stretch it to 1920x1080 and it would still look nice and crisp. PNGs are raster graphics, so if you stretched a 640x360 PNG image to 1920x1080, you would get a blurry, blocky, pixelated mess.

      However, you have to think about resource management:

      • If you stretch a 640x360 SVG image to 1920x1080, it will use the resources of a 1920x1080 image.
      • If you stretch a 640x360 PNG image to 1920x1080, it will still only use the resources of a 640x360 image.

      I would suggest using the link @EctoOne gave you to turn the System Logos into SVGs, and keep the background images as PNGs, but shrink them down to 1280x720 (or even 1024x576). Considering they are pixel images anyway, they won't look too bad when ES stretches the back to full screen.

      My ES themes: MetaPixel | Spare | Io | Indent

      1 Reply Last reply Reply Quote 2
      • RionR
        Rion
        last edited by

        @lipebello This theme looks great! Cant wait!

        FBNeo rom filtering
        Mame2003 Arcade Bezels
        Fba Arcade Bezels
        Fba NeoGeo Bezels

        1 Reply Last reply Reply Quote 1
        • InsecureSpikeI
          InsecureSpike
          last edited by

          this looks cool! mate awesome work

          RPi 3 - RetroPie + 500gb HDD [consoles] + Razer Onza Tournament
          RPi 3 - RetroPie + 32gb USB [computers] + Keyboard
          both with AttractMode + FuzzBoxx Layout

          1 Reply Last reply Reply Quote 1
          • lipebelloL
            lipebello @EctoOne
            last edited by

            @EctoOne - Thanks for the tutorial - i think that i will not be able to save my vectors in SVG format is that i have some rasterized forms on in. I will try to modify them and remove these parts.

            @mattrixk - Thanks, i'm using the shaka pow font.
            And thanks for these infos, i am comparing the files i'm saving with the ones on the simple theme.
            nes_art_blur.jpg - 1280 x 720 96 DPI - 40KB
            BG.jpg - 1280 x 720 96 DPI - 172KB
            When i saved the image on svg, i got around 300KB for the same image.
            As for the logos, each one saved in PNG is 80KB and the logos in SVG on simple theme is 8KB, so i will try to save them on SVG.

            @Rion, @InsecureSpike - Thanks!


            Retrorama Tshirts:
            https://www.teepublic.com/user/lipebello
            https://www.instagram.com/phillbello/

            1 Reply Last reply Reply Quote 1
            • lipebelloL
              lipebello
              last edited by

              I've managed to save a SVG file on inkscape, but it can't have any raster image ou opacity effects, but now i have a logo.ong with 60kb and a logo.svg with 500KB.
              0_1485627441127_Sem título.png


              Retrorama Tshirts:
              https://www.teepublic.com/user/lipebello
              https://www.instagram.com/phillbello/

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

                @lipebello ES does not support SVG transparency levels or blurring as far as I know.
                It does support gradients. Looking at your screenshots there should be no reason to have raster parts in your System logos; they can be made with vectors; I see no particular complexity that justifies so big svg files as you're mentioning.
                Can you post just the png of one of your logos ?

                lipebelloL 1 Reply Last reply Reply Quote 1
                • lipebelloL
                  lipebello @UDb23
                  last edited by

                  @UDb23 - Sure. The first is the old logo, with shadows and a rasterized halftone on it. Second is the new version with no raster at all, but the halftone pattern is in color burn opacity.
                  0_1485640913973_old.png
                  0_1485640921047_new.png


                  Retrorama Tshirts:
                  https://www.teepublic.com/user/lipebello
                  https://www.instagram.com/phillbello/

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

                    @lipebello Are the vector haltone dots a single "entity" ? If you can combine them in Inkscape you could apply a vertical gradient from dot color (top) to the letters internal color (bottom). In that way it should give similar result as opacity levels .

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

                      Funny idea for a theme, love it.
                      Looking forward too see the rest of it.

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

                        @FlyingTomahawk Only problem with SVGs is that they're going to push the Pi beyond it's memory limit. There is a fix coming for EmulationStation soon that will load wallpapers dynamically, remedying this problem, but it's not here yet.

                        So don't be afraid of PNG. You don't have to have a single SVG in your entire theme for it to run just fine.

                        lilbudL herb_fargusH lipebelloL 3 Replies Last reply Reply Quote 1
                        • lilbudL
                          lilbud @Rookervik
                          last edited by

                          @Rookervik What would dynamic wallpapers bring to the table?

                          Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                          Backlog: http://backloggery.com/lilbud

                          mattrixkM 1 Reply Last reply Reply Quote 0
                          • mattrixkM
                            mattrixk @lilbud
                            last edited by

                            @lilbud no more White Screen of Death.

                            My ES themes: MetaPixel | Spare | Io | Indent

                            1 Reply Last reply Reply Quote 1
                            • lilbudL
                              lilbud
                              last edited by

                              Could you explain it a bit more?

                              Creator of the Radiocade: https://retropie.org.uk/forum/topic/6077/radiocade

                              Backlog: http://backloggery.com/lilbud

                              mattrixkM 1 Reply Last reply Reply Quote 0
                              • mattrixkM
                                mattrixk @lilbud
                                last edited by

                                @lilbud https://retropie.org.uk/forum/topic/2389/solution-for-white-screen-of-death/132

                                I think it basically comes down to being able to use large images for many systems without the theme breaking. It think it required a major change to how ES displays each system.

                                My ES themes: MetaPixel | Spare | Io | Indent

                                1 Reply Last reply Reply Quote 0
                                • herb_fargusH
                                  herb_fargus administrators @Rookervik
                                  last edited by

                                  @Rookervik but rookervik! What about the rpi8 that outputs 5K TV?! How will they scale then!

                                  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

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

                                    @herb_fargus Good lord I hope to not still be using ES when 8k TVs come out. LOL

                                    1 Reply Last reply Reply Quote 0
                                    • lipebelloL
                                      lipebello @Rookervik
                                      last edited by

                                      @Rookervik - Thanks a lot, i will just continue as it is.


                                      Retrorama Tshirts:
                                      https://www.teepublic.com/user/lipebello
                                      https://www.instagram.com/phillbello/

                                      1 Reply Last reply Reply Quote 0
                                      • ?
                                        A Former User
                                        last edited by

                                        Amazing, hope to see it soon on my retropie :D

                                        BuZzB 1 Reply Last reply Reply Quote 2
                                        • lipebelloL
                                          lipebello
                                          last edited by

                                          Update on the detailed menu.
                                          0_1485943011001_Sem título.png


                                          Retrorama Tshirts:
                                          https://www.teepublic.com/user/lipebello
                                          https://www.instagram.com/phillbello/

                                          mattrixkM 1 Reply Last reply Reply Quote 3
                                          • mattrixkM
                                            mattrixk @lipebello
                                            last edited by

                                            @lipebello I like it a lot. The lines behind the box art look great.

                                            I think I like the font you used for the Logo on the System View more than this one though.

                                            My ES themes: MetaPixel | Spare | Io | Indent

                                            lipebelloL 1 Reply Last reply Reply Quote 2
                                            • 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.