Leave Stripes Gradient in only 3 Steps and export a PNG 32 Bit

BlackSheepTeamBlackSheepTeam Member Posts: 37
in Community Tutorials
Hello everybody, today i will show you how you can leave the stripes on gradient image show on iOS devices.

There's a problem sometime to export a PNG gradient file on iOS devices from GSCreator, we see all passage stripes on a gradient image, and is ugly, wrong and our game have a graphic style like a Sega Genesis 16Bit :) so how we can fix this?

We take for example one full background gradient, from a deep blue to light blue iPad landscape 1024x768px

Ready?

1) create your square 1024x768px or Retina 2048x1536px with your favorite software, for us Illustrator and Photoshop is the best way to do that, but every software is ok.

2) Now select your gradient square and change Alpha Channel bye 100% to 99%, is only one point less to transparency, is imperceptible to human eyes but not for GSCreator.

3) Now export you PNG 24 with transparency Layer and flag interlaced (this is optional but make the PNG more defined)

That's it! Import your file in GSCreator and try on your device... now is lovely!

What happen?

The best way to create image file is export to a 32Bit, but this for the PNG is apparently impossible, because we have only two way to export: PNG-8 and PNG-24.

Now the PNG-8 is old web system and is not for us, is like a PixelArt 256 colors maximum so we need to use PNG-24Bit but how can add more 8Bit?

Simple, whit a transparency layer, 24Bit of the image and 8Bit of transparency = PNG 32Bit.

Attention!!: this process is valid only if exist a layer transparent on the BG, and not a Transparent overLayer on a full image.

So we hope this tutorial help you on the future.

Bye Bye, King Milano Team.

Comments

  • SocksSocks London, UK.Member Posts: 12,822
    . . . . change Alpha Channel bye 100% to 99% . . .
    You only need to make a single pixel 99% opaque rather than the whole image.
    Now export you PNG 24 with transparency Layer and flag interlaced (this is optional but make the PNG more defined)
    Using 'interlaced' doesn't add definition to a file, it controls how an image is read and displayed when downloaded over a network, this will have no effect within GameSalad but will make your file size larger than it needs to be.



  • BlackSheepTeamBlackSheepTeam Member Posts: 37
    Thx for your clarification about interlaced command, but what is the best way? one PX hole in a corner or just one point less to alpha channel in a BG? this do not change a weight of the file and is the same, but this simple tutorial is for a guys with a difficult to use IMG creator software, if they using Illustrator o Photoshop they know how can do that, do not you think?
  • SocksSocks London, UK.Member Posts: 12,822
    edited December 2012
    . . . what is the best way? one PX hole in a corner or just one point less to alpha channel
    They are the same thing, it's not that one method is a 'hole, and the other method is a 'point' less in the alpha channel, they are both just reducing the transparency in exactly the same way.

    If we want to call one method a 'hole' then the question is: 'what is the best way? one pixel hole in a corner or a giant hole covering the complete image'. . . . . or . . . . 'what is the best way? Just one point less to the alpha channel in just one pixel or just one point less to the alpha channel over the complete image.

    I would say having a single pixel in the corner of your image set at 99% will effect your image much less than having all of the pixels at 99%.

    But like you say, in many situations just making the whole image a tiny bit transparent won't be noticed.
  • PixelMetalPixelMetal Member Posts: 283
    edited December 2012
    I'm having a hard time figuring out exactly what you're trying to do, but if you're just trying to get a smooth gradient, create a layer of noise over the gradient in Photoshop on a solid BLACK fill, then set the noise layer to screen and 5-10% Opacity. This little bit of noise should remove banding and not be noticeable as noise. This is an old trick to avoid compression artifacts in video with gradients, but works just as well with a still image that may be getting compressed/color reduced in some way. This has the added benefit of not increasing your image to 32bit color, which could increase file size.

    Chances are, if GS is doing conversion to your images and that's creating banding, it's better to chalk it up to one of the many things in GS that doesn't work as it should and find a workaround with another tool. For example, you could also download one of the many, many, MANY free .PNG optimizer tools available for both Windows & OSX, run the images through the optimizer, then while GameSalad is closed copy the images directly to the GS project folder (on OSX, you'll have to open up the project file and navigate to the internal /images folder).

    As stated elsewhere above, checking interlacing won't do anything - except maybe increase your file size.
  • SocksSocks London, UK.Member Posts: 12,822
    edited December 2012
    I'm having a hard time figuring out exactly what you're trying to do . . .
    By adding an alpha channel to the image he is forcing it to be read as 32 bit rather than 8 bit.
    . . . create a layer of noise over the gradient in Photoshop on a solid BLACK fill, then set the noise layer to screen and 5-10% Opacity.
    This is not a good move as the noise will increase the file size, sometimes enormously - you can solve the banding issue without adding noise to your image.

    Although if the dynamic range of your gradient is too shallow for even a 24 bit file to handle then adding noise can often help.
  • PixelMetalPixelMetal Member Posts: 283
    @Socks: As I mentioned, I find I get better results w/ getting 24bit images into gamesalad using an external tool and moving the images into the right directory in the project folder after optimization. Also a good way to change that ugly loading wheel before signing an app.

    As for adding noise: Yep, it has the potential to increase file size, absolutely, but since it's only needed for smooth gradients and unless a game is ALL gradients (which would be ugly) it can be compensated for elsewhere. But a good point to make @Socks!
  • SocksSocks London, UK.Member Posts: 12,822
    Also a good way to change that ugly loading wheel before signing an app.
    Sounds good ! How would you go about doing that, does it exist as a resource of some kind ?

  • PixelMetalPixelMetal Member Posts: 283
    edited January 2013
    Also a good way to change that ugly loading wheel before signing an app.
    Sounds good ! How would you go about doing that, does it exist as a resource of some kind ?

    There's two .png files inside of the unsigned (it won't work with signed as you're changing it and thus, the signing is invalid) Android .apk file. Look for a directory called "res", and inside of that a directory called "drawable" - change the files loading_bg.png & loading_spinner.png to change the look of the especially nasty GS loading wheel. Use an image of the same size to replace it.

    Why this isn't exposed when publishing is beyond me, but at least it's easy to change. I can't imagine it works all the differently with iOS publishing, but I haven't played with that feature very much and if you can't download an unsigned iOS app after generating it, it won't work, but if you CAN download an unsigned iOS app, it should work there too, so long as you can find where the images are being stored if the structure is different than the Android version.

    There's also duplicate images in the other drawable-(whatever) folders of these images, so update those too just to be safe.
  • RPRP Member Posts: 1,990
    Just a note, how about crediting the original forum topic/s and people that alleviated this issue rather than making this your own.
  • PixelMetalPixelMetal Member Posts: 283
    Just a note, how about crediting the original forum topic/s and people that alleviated this issue rather than making this your own.
    Eh? What? A question was asked and it was answered. Is this a bad thing now?

  • SocksSocks London, UK.Member Posts: 12,822
    @PixelMetal

    Cheers for the info, interesting stuff, I will have a look at this when I come to the publishing stage (if I ever get there!).
  • RPRP Member Posts: 1,990
    Just a note, how about crediting the original forum topic/s and people that alleviated this issue rather than making this your own.
    Eh? What? A question was asked and it was answered. Is this a bad thing now?

    I am addressing kingmilano's original post. If that is a question, then I've lost any grasp left that I had of the english language.
  • SingleSparqSingleSparq Member Posts: 1,339
    edited January 2013
    I gather English is not his/her first language but understood it was a tutorial.
    "So we hope this tutorial help you on the future."
    Not a question.
    Warning There was an error rendering this rich post.
Sign In or Register to comment.

© Vanilla Keystone Theme 2024