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

    Want to build a new theme for PlayStation

    Scheduled Pinned Locked Moved Projects and Themes
    playstationtheme
    43 Posts 7 Posters 11.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.
    • TMNTturtlguyT
      TMNTturtlguy @hansolo77
      last edited by

      @hansolo77 Thank you for asking! Yes of course, please feel free to use whatever you would like. Please just give credit for what you use in the readme and the text in the main file similar to what I have done. Look forward to seeing what you come up with!

      Also as a side note, carbon is my third favorite theme.....@ruckage nes theme is top notch, and I like my theme as well, I would suggest when @ruckage releases his neogeo theme that may break top 3! But after that is good old carbon, so I would disagree that no one likes it!

      Again, have at it, let me know if you need any help and good luck!

      mediamogulM 1 Reply Last reply Reply Quote 1
      • hansolo77H
        hansolo77
        last edited by

        Thanks for your blessing! I will definitely keep things updated as I progress, and will have your readme/etc files updated to show proper credits.

        Who's Scruffy Looking?

        1 Reply Last reply Reply Quote 0
        • mediamogulM
          mediamogul Global Moderator @TMNTturtlguy
          last edited by

          @TMNTturtlguy

          carbon is my third favorite theme.

          Carbon is like a classic black tuxedo. I use it mostly because it has support for the most systems, but I also love the way it looks.

          RetroPie v4.5 • RPi3 Model B • 5.1V 2.5A PSU • 16GB SanDisk microSD • 512GB External Drive

          1 Reply Last reply Reply Quote 1
          • hansolo77H
            hansolo77
            last edited by

            Yeah I'm getting this feeling like maybe I shouldn't have said nobody likes Carbon. I appoligize for that. I should have just said "I" don't really like Carbon. I feel like it's too dark. Maybe if it was more white/silvery instead of black. Meh, everybody is open their opinions. :)

            Who's Scruffy Looking?

            mediamogulM 1 Reply Last reply Reply Quote 1
            • mediamogulM
              mediamogul Global Moderator @hansolo77
              last edited by mediamogul

              @hansolo77

              Meh, everybody is open their opinions.

              Certainly. Also, variety is the spice of life. The more choices, the better.

              Maybe if it was more white/silvery instead of black.

              @Rookervik is also responsible for the spiritual sister to 'Carbon', 'Luminous'.

              RetroPie v4.5 • RPi3 Model B • 5.1V 2.5A PSU • 16GB SanDisk microSD • 512GB External Drive

              1 Reply Last reply Reply Quote 1
              • hansolo77H
                hansolo77
                last edited by

                Wow, nothing but respect for @TMNTturtlguy ... finding screenshots and then making a system background image takes a lot of work. I've been working on it since he said I could.. and 4 hours later, this is what I've come up with. Bear in mind, I did these examples in Photoshop, so the actual render with the system name (flags) would be better.. I just created a white field, set opacity to 75% and pasted them on. I don't know how to take screenshots from within ES, so this was all done on my PC.

                Essentially, I found a website that listed region exclusives, and used that to create the images for the background. I cheated on a couple of them because many of the games weren't necessarily region locked, but had originated in that region.

                alt text

                alt text

                alt text

                I found a nice free site that hosts flag images, and picked the nifty 3D glossy ones. Also, without the comic-book inkdrop dithering going on, the images appear much crisper. Going to bed soon. Tomorrow I'll work on the game list background.

                Who's Scruffy Looking?

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

                  @hansolo77 looking good. Is that Faye Valentine in the bottom left of the Japan image? I had no idea there was a Cowboy Bebop game on playstation. Off to google I go.

                  My ES themes: MetaPixel | Spare | Io | Indent

                  hansolo77H 1 Reply Last reply Reply Quote 0
                  • TMNTturtlguyT
                    TMNTturtlguy
                    last edited by

                    @hansolo77 these are looking good. One thing I noticed is that you are cutting your images to the exact size of the black outline. Doing this is the easy method, but when this is done it often leaves a 1 pixel width line between the black outline and the image. If you look closely at most of your images you can see the checkered background bleeding through, especially on the bottom edge of the bottom row. What I did was create a separate outline layer that had an border line that was thin and located in the middle of the thick black outline. This way the thick black border overlaps the cut edges and you won't have any bleed.

                    As for the dither in the ComicBook theme. As you have noted it is very hard to find great images. Try finding good quality clear images of older systems, especially hand helps and very old computer based systems. They are often blurry and poor resolution. Also when trying to load 15+ systems the background images need to be 720p and less than 525kb in size. When compressing the backgrounds you loose a lot of clarity. By adding the comic dither it did 2 things for me: 1. It helps hide poor quality images for a lot of systems and 2: it helps hide any loss of quality when compressing from original size which is often 5+ MB to compressed size of about 500kb.

                    Since you are only loading 3 or 4 backgrounds i hope you do not need to compress. Keep up the good work. Looking forward to seeing what you do with the gamelist view.

                    1 Reply Last reply Reply Quote 0
                    • hansolo77H
                      hansolo77 @mattrixk
                      last edited by

                      @mattrixk said in Want to build a new theme for PlayStation:

                      @hansolo77 looking good. Is that Faye Valentine in the bottom left of the Japan image? I had no idea there was a Cowboy Bebop game on playstation. Off to google I go.

                      Yup! I was never really able to play it on my modchipped PlayStation. I think it's completely in Japanese. Most of the game was like a shooter if I recall.

                      @TMNTturtlguy said in Want to build a new theme for PlayStation:

                      @hansolo77 these are looking good. One thing I noticed is that you are cutting your images to the exact size of the black outline. Doing this is the easy method, but when this is done it often leaves a 1 pixel width line between the black outline and the image. If you look closely at most of your images you can see the checkered background bleeding through, especially on the bottom edge of the bottom row. What I did was create a separate outline layer that had an border line that was thin and located in the middle of the thick black outline. This way the thick black border overlaps the cut edges and you won't have any bleed.

                      I noticed this as well. I didn't really know how to do the image editing on this particular design. The black border element was in the/art folder, and I discovered it was in 1080 res. The comic.png background was in 720 res. So in order to create the mockup, I had to enlarge the completed image to 1080 before overlaying the black boarder layer. I think the enlargement created the extra pixels. The other thing that could have created it was the way I actually made the image. I used the Magic Wand tool to select the gray frame, then did an Inverse Selection to select everything else (the windows) and deleted them. That gave me the clear windows to plug in the new screenshots. Then I placed them into the background layer (so the gray frames were on top) and used the Eraser tool to remove the bits exposed inside the other windows. It's probably not the best way to do it. The Magic Wand tool is probably where my fault was, since the tolerance setting is tricky to get right so you only select the frame and not any matching color from the individual screenshots. You wouldn't happen to have a gray frame by itself would you? :)

                      Who's Scruffy Looking?

                      TMNTturtlguyT 1 Reply Last reply Reply Quote 0
                      • TMNTturtlguyT
                        TMNTturtlguy @hansolo77
                        last edited by

                        @hansolo77 I am traveling for the next 8-10 hours but will be home after that and can get a download link to the base files. It's hard to do quotes on my phone, so here are my responses to you post less quotes!

                        The outline file must be at 1080 and must be a separate file. If you scale it to 720 or you flatten it to the background the black outline will become very jagged, especially on large tv and 4K displays.

                        Running the backgrounds at 1080 is nice, but it is terrible for performance on the pi. I would recommend the backgrounds at 780.

                        As I stated in my earlier post, the only way to avoid the lost pixel line in the images is to create a thin black outline that sits centered in the middle of the thick black border. Using the magic wand and inverse selection is exactly how I do it, it is just that the images bleed under the black border file so they overlap.

                        1 Reply Last reply Reply Quote 0
                        • hansolo77H
                          hansolo77
                          last edited by

                          I was half asleep when I did those last night... I decided to re-do the American one as a test... First off, I started doing the same Magic Wand on the frame, but then grew the selection an additional 2 pixels. I then pasted it to a new image, and did a Flood Fill of the color. That helped tremendously on refining the edges. Lastly I resized the image to 1080 (will reduce to 720 when complete). When I started layering in the screenshot images, I did it a different way. I completely forgot about the Paste Special -> Paste Into option... so I copied the screenshot to the clipboard and then Magic Wand tool on the white void window, and pasted it into that. No more need to use the Eraser tool, as it creates a Layer Mask. Now I'm free to move the screenshot around inside the mas, and get it the way I like it, without having to re-erase/etc. So this is the end result, adding the black boarder frame, a white layer with 75% opacity, and a new Flag system image. I decided to re-create the system image, reducing the size of the flag a little so I could get the full shadow rather than the one previously that cropped it.

                          alt text

                          Remember, this is just a mockup... I didn't add the other systems to the image. I also decided to change to the logo rather than the controller.

                          Who's Scruffy Looking?

                          1 Reply Last reply Reply Quote 0
                          • hansolo77H
                            hansolo77
                            last edited by

                            Updated Asia background using the new method. I also changed out 3x3 Eyes for Lunar Silver Star Story.. I loved that game, and just had to include it. I also swapped the Super Robot Wars and Resident Evil (Biohazzard) games, since SRW wasn't nearly as recognizable.

                            alt text

                            Who's Scruffy Looking?

                            1 Reply Last reply Reply Quote 0
                            • hansolo77H
                              hansolo77
                              last edited by

                              Here's Europe's. I changed the images a bit, but the games are the same.

                              alt text

                              Who's Scruffy Looking?

                              TMNTturtlguyT 1 Reply Last reply Reply Quote 0
                              • hansolo77H
                                hansolo77
                                last edited by

                                Here's what I came up for as the game list menu background... I tested it by replacing the image in my pre-existing setup, and it looks great! I even swapped out the font. I simply renamed the existing font Shaka_Pow.bak and named mine Shaka_Pow.ttf. Simple cosmetic changes.. no changes to code.

                                alt text

                                I wish I knew how to take a screenshot of ES from my Pi. Then I could show you the fonts. I found (on the free dafont website) a font for PlayStation, and it looks great. So far, all my backgrounds are in 1080p. Once I get a full system scrape with videos, I might have to reduce down to 720p. It takes a couple seconds for the artwork to buffer in memory, even when I load up a 20-game list.

                                Who's Scruffy Looking?

                                mattrixkM 1 Reply Last reply Reply Quote 0
                                • TMNTturtlguyT
                                  TMNTturtlguy @hansolo77
                                  last edited by

                                  @hansolo77 I assume you no longer need the template? Looks like you have it figured out.

                                  1 Reply Last reply Reply Quote 0
                                  • hansolo77H
                                    hansolo77
                                    last edited by

                                    Yeah I think I got this.. quick question.. does the system.png file need to be in those specific dimensions? The top corner of my flags are right at the topmost pixel. When they render in the game list, there's no spacing between the top of the flag and the black outline. If I could say, add 5 pixels of dead void to the canvas for the system file, that would clean up the edges better. Otherwise, I'll have to go back and create new images with the flags a little smaller.

                                    Who's Scruffy Looking?

                                    TMNTturtlguyT 1 Reply Last reply Reply Quote 0
                                    • TMNTturtlguyT
                                      TMNTturtlguy @hansolo77
                                      last edited by

                                      @hansolo77 system.png can be made any size you want. Adjust in very small incraments.

                                      1 Reply Last reply Reply Quote 0
                                      • hansolo77H
                                        hansolo77
                                        last edited by

                                        Cool, I'll work on this more soon. Bad headache came on.. taking a nap before dinner.

                                        Who's Scruffy Looking?

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

                                          @hansolo77 I like your Detailed View background, but can I make a suggestion? Try to keep all the spacing between the boxes the same. It looks a bit weird having some spacing quite large (at the top) while others are really narrow (the bottom-right).

                                          I think if all the spacing was the same the whole thing would look a lot cleaner.

                                          My ES themes: MetaPixel | Spare | Io | Indent

                                          hansolo77H 1 Reply Last reply Reply Quote 0
                                          • TMNTturtlguyT
                                            TMNTturtlguy
                                            last edited by

                                            @hansolo77 look up raspi2png and install that. Is it a great and simple script that allows you to take nice screenshots of your pi.

                                            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.