Graphics Tutorial 1

Discussion in 'Tutorials' started by Jerry-me, Apr 24, 2012.

  1. Jerry-me New Guy

    Member Since:
    Jan 6, 2012
    Message Count:
    85
    Likes Received:
    14
    Trophy Points:
    0
    Updated the tutorial for the 2.1 release


    As you work with Live Wallpaper Creator You might want to add more or bigger graphics to your application and especially with 2.5 version on the horizon it might be required to start to optimizing and reducing the file size to prevent to lessen the ram, power and prevent the wallpaper from force closing.

    For the Tutorial I’ll be using a graphic that I’m going to be using for a wallpaper update.
    [IMG]

    The LWC uses PNG files which the file size is determined by the color and file size. So the first measure you have to do is to create the best site for presentation and size. It’s best to tweak the size a bit and compare the file size and how it looks on the phone and if you’re working with a lot or several graphics.
    [IMG]

    Now just saving the file the current file size would be 54.16K and you might want to improve the file size a bit. The simplest way is to use the save for web.

    The best you can do with a 24 bit color is to reduce the file size to 41.34K
    [IMG]

    I think we can do better a good way to lower the file size is by using the posterize effect. By using this you’ll lower the file size by lowering the amount of color in the picture.
    [IMG]


    The end result managed to reduce the file size down to 26.6K. I could go lower to improve but I just choose a mix between the quality of the image and the file size.
    [IMG]


    The last way to lower the file size is best suited for bigger pictures due to you just making a GIF. This is a technique I used for the Lunar Fashion G wallpapers due to the pictures size. If you go through this route this will reduce the file size to 12K depending on how you adjust the settings and any pre optimization before you deploy the picture.

    Note the picture is 200 x 262 that I used for this demonstration. To prove that good tweaking can reduce the file size all the Reiko pictures in Lunar Fashion G series are about 210~270 x 700 with the file size around 27K~29k each while the Hina pictures ranges from 17K~22K.
    [IMG]
    (2.1 Users Only)
    For 2.1 users you can improve the file size and heap size by further optimizing the wallpaper by modifying a few images.

    The first thing you should do is to go to the res folder and go to the drawable folder and delete all the screen items due to its confirmed it’s not being used by the program.
    [IMG]

    Now that’s done but we have one more problem and that’s the program negates the optimization with the low res version. This is bad due to it takes up a huge amount of unneeded spade.
    [IMG]

    I suggest optimizing the Normal-MDPI images via the tutorial due to the file size reductions will reduce the file size greatly depending on the quality. The final image was around 7k which is a lot lower compared to the 41k version.


    While working with these over time I did find a few limitations with the 2.0 Version. One of the limitations is that when the wallpaper reaches around 1MB+ with non optimized graphics it begins to force close when you try to set it up as your live wallpaper. Optimized and heavy optimized graphics should allow up to 2MB+ Wallpapers without much issue where the biggest one I made was Lunar Fashion G 1+2 which was about 1.82MB. I don’t have an exact cap on how much you can add with optimization but I don’t know the actual limit in terms of how big the exact file size can get due to I haven’t hit the wall yet and it varies on the quality of the picture. The 2.5 version should be better optimized due to its build to handle more graphics and I’ll do an update on the tutorial once it’s out and I’ve played around with the new SDK.

    In closing should improve some boost in frame rate and reduce the file size allowing more items to be displayed in the wallpaper and I think some of these techniques can help people who want to put more or bigger items into 2.0. It might be more of a suggested practice in future versions due to more people might be more inclined to add more graphics to the wallpaper and the future versions having more advanced features.
    Maximus, NewKid and Vas like this.
  2. Vas Origin

    Member Since:
    Jan 4, 2012
    Message Count:
    770
    Likes Received:
    175
    Trophy Points:
    500
    Great tutorial! Optimization is always important :)
  3. Jerry-me New Guy

    Member Since:
    Jan 6, 2012
    Message Count:
    85
    Likes Received:
    14
    Trophy Points:
    0
    I was kind of busy the past few months and it looks like we’re still in the 2.1 release so I decided to post the updated version of the tutorial.
    This should help with the file size a bit more and you should be able to pack more stuff with the fix due to a few performance issues being removed that was in the 2.x version.
    Maximus likes this.
  4. Maximus Seasoned Vet

    Member Since:
    Jan 16, 2012
    Message Count:
    122
    Likes Received:
    42
    Trophy Points:
    100
    Awesome :) Thanks Jerry!
  5. Vas Origin

    Member Since:
    Jan 4, 2012
    Message Count:
    770
    Likes Received:
    175
    Trophy Points:
    500
  6. Ramjet Active Member

    Member Since:
    Dec 2, 2013
    Message Count:
    67
    Likes Received:
    12
    Trophy Points:
    50
    tinypng is good, I use it a lot. If you have jpg's, try kraken.io, it's really impressive. They have a free online version. Try lossy crunching, followed by lossless crunching, it can reduce file sizes by up to 90% even after photoshop/fireworks optimization.

    A trick to help prevent out of memory errors (OOM's) in eclipse is to add - android:largeHeap="true" to the application settings in the manifest. It's a little bit dirty, but who's to know.. ;)

    *EDIT*

    Direct link to kraken.io web-interface: https://kraken.io/web-interface

Share This Page