[Q] Image Optimization for "Find Differences" Game - Design, Prototyping, UI, Graphics

Hi! I'm ertha from BKK and now i'm investing on one application. To start with, i'm not developer myself, so some of my vocab might look silly or may not sound right for developer (maybe) so i apologize for that
Now i'm struggling with my apps development, since the agreement i've made is that i'll responsible for the design and images for every stage in game, i'm facing the difficulty for the images optimization.
For the original images, they are downloaded from my account in ShutterStock (biggest quality) i have 2 of them for each stages (2 different images).
Then i use "tinypng" converter in website to reduce their size in order to optimize my application size. However the size is still too big (according to developer) he's looking for something smaller?
Do you have any suggestion to "optimize these images" that are already converted by "tinypng" ? My developer tell me some method like save it to jpg first and then convert it back to png? is that a really good idea?
Really thank you for every answer, i truly appreciate all the help coming here

ertha013 said:
Hi! I'm ertha from BKK and now i'm investing on one application. To start with, i'm not developer myself, so some of my vocab might look silly or may not sound right for developer (maybe) so i apologize for that
Now i'm struggling with my apps development, since the agreement i've made is that i'll responsible for the design and images for every stage in game, i'm facing the difficulty for the images optimization.
For the original images, they are downloaded from my account in ShutterStock (biggest quality) i have 2 of them for each stages (2 different images).
Then i use "tinypng" converter in website to reduce their size in order to optimize my application size. However the size is still too big (according to developer) he's looking for something smaller?
Do you have any suggestion to "optimize these images" that are already converted by "tinypng" ? My developer tell me some method like save it to jpg first and then convert it back to png? is that a really good idea?
Really thank you for every answer, i truly appreciate all the help coming here
Click to expand...
Click to collapse
Hey there, Ertha.
I'll tell you the way I optimize images and see if this may help you.
When you save a .png, it saves uncompressed(or very little) which means your data is pixel-for-pixel. Highest quality you can reach.
When you save it as a .jpeg, it runs an algorithm and compresses what you have thus making the file size smaller, yet still producing a clear image.
So in essence, his theory will work, and you can tell him you did exactly that. Pretty much all mobile platforms will handle a .jpeg as well so my recommendation would be to tell the dev to use them.
I use Photoshop for my image compression. When I have the image I'd like open in Photoshop, I choose "save for Web and Devices" which will give you an optimization screen. Most of the time you can still get a really good image if you save as a jpeg and reduce the quality to 60%. This will greatly lower the file size and garner the "optimization" he is looking for.
A further recommendation would be to use 1:1 aspect ratio(square) images to optimize across devices if you're new to it. It will make life much easier later on.

Thank you so much Im Saint!
So i can save for web to "jpg" first and then save back to "png" again?

ertha013 said:
Thank you so much Im Saint!
So i can save for web to "jpg" first and then save back to "png" again?
Click to expand...
Click to collapse
Yes, you can do that. :good:

Related

Holy Quran WVGA - optimised for WVGA 2 pages on-screen

This Qur'an Viewer was developed for my own use and will be invaluable to anyone who has memorised the Quran and wants to view two-pages at once so that it looks very similar to the mushaf.
Two types of Indo-Pak script are available, as well as two types of Uthmani script.
WVGA (800x480) resolution is an absolute necessity to run this application, any higher or lower resolution will probably not work properly and has not been tested.
You may find the size of the script is a little small, but as a Hafiz I find it invaluable as a quick reference when out and about.
You can click the page to move next/previous. You can also click the upper part of the page to go next/previous juz or surah.
You can choose from three bookmark positions, which will automatically remember your page position on each of the three virtual bookmarks.
Download it here. Unzip and see readme.txt for full installation instructions:
http://www.acclaimit.co.uk/downloads/HolyQuranWVGA_Release_20091001.zip
*** Please completely uninstall the previous Quran13Line application if you installed it before. This new application uses all new script images and a different folder structure. ***
Screenshots attached.
Jazzak Allah Khair
Could you please tell me which screen resolutions are compatible ?
qvga,vga,wqvga,wvga ???
Thank you
I'm sorry, WVGA (800x480) resolution is an absolute necessity to run this application, any higher or lower resolution will not work and has not been tested.
Thank you very much
DOWNLOADED AND INSTALLED
It is wonderful !
But could we get better Pictures ? with better script ?
Jazak-Allah, I'm glad it works. I tried my best to make the pictures look good using the 480 pixels page height so that we can fit two pages on-screen at a time. It's not going to be possible to make it any better unless we have more pixels to play with, or do you have any alternative ideas?
What do you mean by better script? Which part of the script are you having difficulty with exactly?
Thanx for your reply
I meant a different set of pictures, even the 15 line ones
attached are two samples (Zipped with WinZip)
and if you like, I can guide you to the link where you will be able to download the whole set of the first or the second sample.
Thanx again
I see. You forgot the attachments.
Please let me know the link to the whole sets of any other images you know of and I'll see what I can do... 15 or other lined ones, but I will have to rename the application too
I've resized the sample images to 480-pixel height. See attached.
I think the script on these images is much finer than the 13-line ones and is unreadable with two pages on-screen at a time. It would make more sense to show a full page at a time for the 15-line ones, which does not quite fit with the original design goal of this application.
I guess the answer would be to create a new application called "Quran15Line" showing one page at a time, but I am not sure how many people would be interested in this. Poll?
So? have you checked the samples ?
I guess the images without the frames can be visualised better especially when two of them are joined together on a horizontal WVGA screen, right ?
waiting for your reply
Well, as I have mentioned in my previous post, ( sorry just seen ur answer ), the ones without the frame are better.
Regarding your suggestion of the "Single Page", I don't think too many people will be interested in it since the images are originally taken from a software with a single page, full screen style.
These are the links to the 'non frame images' try them and give me your feedback ( Horizontal and Vertical )
http://www.4shared.com/file/96364556/390c2fa6/v_wvga.html
http://www.4shared.com/file/97539687/b3476020/h_wvga.html
Thanx again
Ahh, about your attachment, in fact they both seem readable ! and do not forget that this software is intended for a 'two page style' which means that it is obviously with smaller pages.
I am so interested in the new images !
hope you can make them.
and regarding the software, you can change the options in the TOOLS key, to 13 lines ( your old images ) and 15 lines ( my suggested images ) !
What do you think ???
Jazakhallah Khair Brother Ashiq
Inshallah you will receive Sadqah Jariya every time i use it
this is what i have been looking for for ages
if you do update it can you consider a transalation in english which corresponds to same
13 line quran if possible,maybe i am asking too much
but thanks anyway
Salaams
I was already considering English translation which should correspond with the script. However, it will take a while to do this because there are so many English translations and because we have tell the application which aayaat are on each page so that they can be matched up to the translation. It may take a few weeks, but Insha-Allah I will work on it during any spare time I have.
jaguaralani said:
These are the links to the 'non frame images' try them and give me your feedback ( Horizontal and Vertical )
http://www.4shared.com/file/96364556/390c2fa6/v_wvga.html
http://www.4shared.com/file/97539687/b3476020/h_wvga.html
Click to expand...
Click to collapse
bro what difference with this?
Code:
http://www.4shared.com/file/134351630/60362269/h_wvga-800x480-medina2.html
http://www.4shared.com/file/134114828/f2fe41e9/v_wvga-480x800-medina2.html
thanks bro
we need another resolutions plz
thanks alot
there is a collection of indopak script at pdaquran .com
which is clearer to read as it is a page per screen
wonder if you you could use the images in you excellent software
ibrahimh said:
there is a collection of indopak script at pdaquran .com
which is clearer to read as it is a page per screen
wonder if you you could use the images in you excellent software
Click to expand...
Click to collapse
This application is designed for WVGA to show two pages per screen, so unfortunately I cannot use the pdaquran images. I would urge you to contact pdaquran and ask them to provide you with a Windows Mobile application (they already provide an iPhone one). In any case, couldn't you just download the PDF and view it using Adobe Reader one page at a time?
Dear monzoyt and all - thank you for the various uthmani images you sent - I am currently preparing the Uthmani/Madinah images and will release a new application within a few days InshaAllah.
It takes a while because I have cropped the images to maintain high quality after resizing and need to also match up the bookmarks to the page numbers, and also need to render the page numbers in arabic on the page sides due to the fact that the images do not have enough space to render the page numbers at the top.
monyozt said:
bro what difference with this?
Code:
http://www.4shared.com/file/134351630/60362269/h_wvga-800x480-medina2.html
http://www.4shared.com/file/134114828/f2fe41e9/v_wvga- -medina2.html
Click to expand...
Click to collapse
800x480 and 480x800, landscape and portrait screen mode!

My First App, Need Serious Help :/

Hey guys, like the title says, I'm attempting to create an app, but with little success at this point.
What I want to do, didn't sound all that complicated in my head. I want to make an episode guide for a TV show I like. Nothing too fancy, but I do want it to look WP7-authentic.
First off, I don't know or really understanding coding in the slightest. I was hoping to be able to design most of the app through the on-screen WP7 display, which it seems I can do a lot on.
From what I've gathered, here's what I'd like to do:
Use the "Pivots" as the different story arcs or "seasons"
Within each pivot, Episode # and Title
But I'd also like to go one further and have each episode be clickable, which would take the user to a page containing info about the respective episode. Synopsis, International Titles, Airdate, etc.
It's a big project, I just need a little help getting it going.
Thanks!
dbG33K
what you're describing can be done one of two ways.
1. just display images after images
2. input text into the program
from what im gathering, it should be fairly easy for you to do as this is the sort of beginner stuff in most windows phone 7 programming books. id suggest you look into programming because even the slightest pivots and transitions require code.
now if you were on android or webos, thats different. they have full on graphics based programming thats a simple matter of drag and drop and choose function.
Download Expression Blend. You can do pretty much everything without having to write any code. It includes a "Pivot" template which has a pivot all ready for you, then you just add PivotItems using your mouse. Then you can use the Sample Data feature to mock up how your episode data will look.
The only thing you would have to write code for would be to pull the episode information from a datasource. Bind it to your controls and Expression will have the rest done for you.
http://www.microsoft.com/expression/windowsphone/
Sample Data:
http://expression.microsoft.com/en-us/ee426896.aspx
First thing you'll need before you even open Visual Studio or Blend is a data feed.
An rss feed is ideal, And I'm sure theres alot of them out there for TV listings. Without that, theres little you can do (other than screen scraping websites, but people don't look too kindly on that)
If you can find me a Url for the RSS feed you want to use, I'll be more than willing to help you out
xanderkaiber said:
First thing you'll need before you even open Visual Studio or Blend is a data feed.
An rss feed is ideal, And I'm sure theres alot of them out there for TV listings. Without that, theres little you can do (other than screen scraping websites, but people don't look too kindly on that)
If you can find me a Url for the RSS feed you want to use, I'll be more than willing to help you out
Click to expand...
Click to collapse
What he said
I'd be willing to help you out as well. I'm in the process of writing a feed reader to help me make the move WP7 from WPF/Silverlight. The idea I have for the UI is similar to yours and the feed reader (at least in the basic form) will be open source so I've no problem sharing my code...
I appreciate your willingness to help me out, but it's actually a series that has been over for quite a while.
Hey guys, I've gotten much further on my app and have become a little more well-acquainted with coding in the form of using Expression Blend 4. That said, I do have a few questions:
1. After making a few pages, I decided to make a sort of Welcome page for my app. How do I tell it to show that page first instead of "MainPage.xaml"?
2. On that welcome page, I would like to make a button that pulls up the user's E-mail and have it have my e-mail as the recipient.
Thanks a bunch!
This is in the WMAppManifest.xml file within the Properties folder.
for the email look into the email compose task
barryallott said:
This is in the WMAppManifest.xml file within the Properties folder.
for the email look into the email compose task
Click to expand...
Click to collapse
That doesn't really help me too much...
What am I supposed to do in the WMAppManifest.xml?
And where do I find the email compose task, and how do I implement it into the app?
EDIT: Nevermind, I figured out both of those questions. A new question, though: How do I take screen shots of the app? I need at least one to submit it to the marketplace, but I don't know how :/
dbG33K said:
That doesn't really help me too much...
What am I supposed to do in the WMAppManifest.xml?
And where do I find the email compose task, and how do I implement it into the app?
EDIT: Nevermind, I figured out both of those questions. A new question, though: How do I take screen shots of the app? I need at least one to submit it to the marketplace, but I don't know how :/
Click to expand...
Click to collapse
Download this:
http://www.innovativetechguy.com/?p=13
Make sure your emulator is set to 100% size and uncheck the "Show Device" checkbox in the tool. That will give you the necessary 480x800 sized .png
There's a fair lot you can do using the designer panel, but you will definitely need C# code for what happens 'behind the curtains'. Things like pulling the episodes from the internet and such.
I definitely recommend these tutorials:
Windows Phone 7 Development for Absolute Beginners.
It builds up slowly, but definitely gives you the foundation you need to put together basic applications.
Hey guys I found this thread and after reading it I feel I have a lot in common with dbG33K's tasks & questions. I feel I have a lot to offer WP7 apps as I learn more! I started out in January learning and studying as an absolute beginner (even did the 5 day course online). After a lot of studying, I felt confident enough to write my first BIG app.
I'm pretty good at the xaml part and getting real familiar with c# as I go along. Also, I think I have all the pieces I need, just need help putting it all together. I'm using an API for the data source (i have all the dlls and resources in place even all the c# methods for the API).
I have the UI all put together, now working on the c#. I'm just unsure on the binding part. I know my listboxes and other controls should be binded to a method in c#, but what calls that method? When the page loads that listbox, textblock, etc? Also, what kind of coding is generally used inside the {} of the methods that pulls info from the datasource?
As I have learned a lot aver the past couple of months, I find that I've learned it from examples I've found online, but I'm drawing a blank on this one. Any help would be great!
Thanks!
Do any of you can tellme how can I save text from the text box??
Sent from my LG-C900 using XDA Windows Phone 7 App

[GUIDE] App/Graphics Design Tips,Tricks & Warnings

Hi Guys This is a guide on app design guidelines.This can be applied everywhere and not only app design. I have seen many apps that perform awesome but their UI scares people away! This won't be a very detailed guide, only basic pointers on UI Design.
First off i would like to say that User experience and functionality of the app is equally or more important than it's UI. There's no point in a app that has a awesome looking UI but is very laggy or lacks functionality.
Lets begin with a few tips :
Try to make the UI simple and clean with no extra clutter.Hide extra functionality in menus. Keep the main function of the program in the front.
Make the UI flat.Use subtle gradients and shadows. Don't make it too flat like the metro ui,in which you can't distinguish an icon from a button
Use a specific color scheme. Select two to three lead colours. and select 1 or 2 background colours.
Either make it dark themed, or light themed, don't mix the two!
Use transitions. But not too fancy.
Split your app into different parts and provide a easy way to navigate
Fix Whatever you can behind the scenes
Use short Phrases, No one wants to read too much to do a simple task!
Use pastel colours or darker colours. ie. one shade lighter or darker than the original color.
Have contrast between the text color and the background color, making it easier to read.
Tricks :
Don't waste much time making animations. Use LayoutTransitions (android 3.0+)
Test your apps on different screen sizes.
Download the color swatches provided by google -click here
Google is your friend. Go to developer.android.com for more guidelines, application fundamentals etc.
Use good typography. Roboto and helvetica are some of the good fonts. Download roboto - click here
Guide on iconography - click here
Warnings! :
Do not use harsh gradients! for eg.. black to white , It makes the app feel cheap.
Try and stay away from putting ads
Do not let the app make decisions for itself, let it ask the user!
Do not make the app too colourful.
Make sure it runs smooth without jitter.
Don't put too much info. at once!
Don't use too flashy colors that hurt the eye.
Again, this isn't meant to be a very long guide, just a few basic things you should keep in mind while designing. For more detailed guidelines use developer.android.com
If i missed something important let me know! :good:
That's really helpful..
Thank you
wad!e said:
That's really helpful..
Thank you
Click to expand...
Click to collapse
Glad you liked it
Amazing guide! Thanks so much! I'm glad more people love great design.
Sent from my Galaxy Nexus using Tapatalk 4 Beta
Hello there, thanks for this guide.
I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?
thx in advance
phentex said:
Hello there, thanks for this guide.
I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?
thx in advance
Click to expand...
Click to collapse
Maybe it would be easier.
However, you would need a proper library to do that. Android does not support adding *.svg vector graphics by default. So all the conversion of the vector graphics need to be done manually. (There are some libs out there, but they do not support all features of *.svg graphics.)
For basic things there is support to do that using the standard Android development APIs provided by Google (declaring drawables in xml files) but it will not be enough for shapes which are more complicated than lines, rectangles or circles or a combination of those.
Addititionally the conversion of vector graphics to bitmaps (graphics consisting of single pixels) would need much processing power and would slow everything down.
Hence *.png and *.9.png files are still the standard way to do that.
@TechMasta: By the way, great guide.
TechMasta said:
Try and stay away from putting ads
Click to expand...
Click to collapse
No ads? How does one go about monetization then? Don't get me wrong. I'm a Windows and Windows Phone developer. I was thinking of porting my apps to Android. I'm just getting started. But I'm using Windows Azure for which I do have to pay for. How should I go about those expenses?
TechMasta said:
Do not let the app make decisions for itself, let it ask the user!
Click to expand...
Click to collapse
Sometimes it should. However, the user should be able to change the default behaviour. Or as the android design guidelines express it:
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.
Click to expand...
Click to collapse
(http://developer.android.com/design/get-started/principles.html)
Great guide, though.
akshay2000 said:
No ads? How does one go about monetization then? Don't get me wrong. I'm a Windows and Windows Phone developer. I was thinking of porting my apps to Android. I'm just getting started. But I'm using Windows Azure for which I do have to pay for. How should I go about those expenses?
Click to expand...
Click to collapse
You can put ads if you want. Just don't bombard the user with them, place them in a way it does not interrupt or come in the way of the user when he is using your app
phentex said:
Hello there, thanks for this guide.
I am no developer so I don't have to mess with the graphics, but I still often wonder : in android programming, where there will always be the probrem of multiple display size / resolution, why isn't the most primary & most basic guideline to use as much as possible vector graphics instead of bitmap based graphics ? wouldn't it save a huge amount of hassle of having to make gfx resources for different screen sizes ?
thx in advance
Click to expand...
Click to collapse
With google's plugin for eclipse you can add your graphics in multiple resolutions by Copying your layout from "layout" folder of resources and paste it in the "layout-land", "layout-xlarge" etc.
SahilC said:
Amazing guide! Thanks so much! I'm glad more people love great design.
Sent from my Galaxy Nexus using Tapatalk 4 Beta
Click to expand...
Click to collapse
Glad you liked it
Thank you very much, very useful information.
Thx for it mate I will develop good think
Sent from my GT-I9100 using xda app-developers app
Looks good
graphics design
Thank you for this information about web design. Really nice.
Good set of tips for the first version of an app!
The next level of designing should ideally be with testing different design variations via split testing.
Making Decisions
TechMasta said:
Do not let the app make decisions for itself, let it ask the user!
Click to expand...
Click to collapse
Hai,
Thanks for your guide. But I am having a different opinion from one of your warnings.
Let the app make decisions by itself, for example when user deletes an item DELETE it. But do provide an option to UNDO it. Showing another dialog to confirm it, in your words "ask the user", is redundant.
Because providing too many options makes the user overwhelmed in an unexpected way. Choose the best/defaults for your app and provide some ways to configure them [Ex : Colors, Themes, Font size etc]
Ahamed.M said:
Hai,
Thanks for your guide. But I am having a different opinion from one of your warnings.
Let the app make decisions by itself, for example when user deletes an item DELETE it. But do provide an option to UNDO it. Showing another dialog to confirm it, in your words "ask the user", is redundant.
Because providing too many options makes the user overwhelmed in an unexpected way. Choose the best/defaults for your app and provide some ways to configure them [Ex : Colors, Themes, Font size etc]
Click to expand...
Click to collapse
True. This can also be found in the Android design guidelines:
Decide for me but let me have the final say
Take your best guess and act rather than asking first. Too many choices and decisions make people unhappy. Just in case you get it wrong, allow for 'undo'.
Click to expand...
Click to collapse
(Source: http://developer.android.com/design/get-started/principles.html#simplify-my-life)
a
nice
Nice Tips
These tips are very useful. One should keep in mind while dealing with apps whether in Android or iPhone.

How to Boost Faster Loading Images like WhatsApp?

Zingoo is a new promising app that will rock your weekends, outings and any happening that you want to easily enjoy watching its moments over & over again (we are now doing the Android version, then the iOS one). Because we want Zingoo to be born strong, it has to deliver the best possible [UX] to all awesome-moments lovers around the world, which means we have to do our best in loading the images.
Because we (at Begether) do listen to our users, we heard a lot of comments on how WhatsApp is loading images super-fast, so we dug deeper to know what we can do about it, & here is what we find,
What does WhatsApp do?
WhatsApp is doing the following (numbers are approximate):
Photos sizes range around 100KB, which loads the images pretty fast on most common mobile-network speeds.
Photos are cached, so no need to load them every time you open the app almost no need to mention this!
They first show a very small thumbnail (about 10KB or less) until the real image is loaded, & this is the real pro-tip for their better UX.
How is it done?
To achieve the caching there are some good Android libraries out there that are doing a good job, but one of them is doing a way better than the others, which is Picasso. Both caching on disk & on memory are built under the hood, with a very developer-friendly API, I just love what Jake Wharton & his mates did for all of us, thanks guys.
You cannot copy/paste articles without linking to the source at least.
Thread closed.

Question about RAW compression in OP3.

As not a single person replied to this on OnePlus forums, I decided to post it here. Hoping to get some answers.
When a RAW image is captured with stock camera, the size is always constant, i.e. 31.07MB.
Recently, I discovered that someone has ported Google Camera to OP3/T and it also has an option to save RAW images when captured in HDR+.
The RAW files saved when captured with with Google Camera vary in size; up till now I've got variation from 11MB to18MB - depending on scene.
**[Both in auto mode and same focusing point and same resolution (16MP)]
When processing these two files, it seems I can pull out more highlight details and a slightly better shadow details from the RAW file from Google Camera compared to the stock camera.
.
.
.
.
Now, even my Nikon DSLR[(7200) 6000×4000]-14bit lossless compression makes 15-21MB *.NEF files -- which when converted to *.dng make 19-27MB files -- depending on scene. And they pull out A LOT of details from overblown highlights. A LOT.
So, the question:
>> About the highlights details; Why must this be happening because usually larger the *.dng file, more the detail, right? But so doesn't seem to be the case. What is the matter?
>> Can OnePlus make some changes to their compression algorithm?
>> Can it be helped? In any ways?
More detail? No. More information? Yes.
bronderb said:
This is in the wrong section, the q/a section exists for a reason. This section is meant for development
Click to expand...
Click to collapse
Yeah, thanks. I forgot about it.
justin654 said:
More detail? No. More information? Yes.
Click to expand...
Click to collapse
That's what I mean(wrong choice of word). I mentioned what happens with highlights for the same reason.

Categories

Resources