Database Develop

[HELP] error when opening png files in photoshop

im having some trouble opening some png images in photoshop. for instance
i want to open this file
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
and it opens looking like this
using cs4 on windows 7

uh...thats how png files open. the checkerboard background means its transparent.

was that a joke?

xxmonsterx said:
was that a joke?
Click to expand...
Click to collapse
He's right though, the checkers are there since that is a transparent image excluding the blue dot of course. It looks like that on mines too.

no no nooo, i mean the distortion in the color and gradient

xxmonsterx said:
no no nooo, i mean the distortion in the color and gradient
Click to expand...
Click to collapse
Are you zoomed in?

no lol when i open the first file in pscs4 it opens looking like that, wheras if i open the same image in say, paint. it looks normal, but paint isnt very good for image manipulation

then i cant help you, its gotta be something unique to your settings/computer. i use cs4 for everything, even tried opening the png you posted and it looks perfectly normal to me.

wierd, hm im gonna try to reinstall in x86 mode

If you zoom out to original size, perhaps it will look as you expect?

Is the color mode in Index or RGB?

Kazan22 is right - you need to switch color mode from "indexed" to "RGB" ant it will look as it should. It's been a while since i last used photoshop, but if i remember correctly there's a selection in the image->mode menu (or something like that).
GIMP also has similar problem - you have very limited editing capabilities if you don't change the colorspace to RGB. But at least it displays images correctly

changing color to rgb mode it still looks the same, but your right it was opened as index by default. i figured out a rather complicated method to get to do what i want using photoshop and ms paint together lol

Download paint.net, open said file. save. open newly saved file in photoshop.

I know what you mean, I have the same problem with some pngs from framework too. I still don't know what can it be

prash said:
Download paint.net, open said file. save. open newly saved file in photoshop.
Click to expand...
Click to collapse
This.
Photoshop has horrible png support.. it can't deal with alpha or indexed images properly. If your images have been run through optipng, photoshop will mess them up like this.

goldenarmZ said:
This.
Photoshop has horrible png support.. it can't deal with alpha or indexed images properly. If your images have been run through optipng, photoshop will mess them up like this.
Click to expand...
Click to collapse
Well, you can always use the GIMP, It's free and handles these png's properly (if set to rgb colorspace)
Inkscape (free/opencource as well) also imports these png's properly. It's a vector drawing program, not raster like photoshop or gimp so it takes a bit of time to get used to, but in the end it pays off since image created once can be saved at any resolution - makes porting themes to different resolutions a breeze That's what i used to create some icons for windows mobile, and i was really glad i did when i switched from a qvga to wvga device

mr_deimos said:
Well, you can always use the GIMP, It's free and handles these png's properly (if set to rgb colorspace)
Inkscape (free/opencource as well) also imports these png's properly. It's a vector drawing program, not raster like photoshop or gimp so it takes a bit of time to get used to, but in the end it pays off since image created once can be saved at any resolution - makes porting themes to different resolutions a breeze That's what i used to create some icons for windows mobile, and i was really glad i did when i switched from a qvga to wvga device
Click to expand...
Click to collapse
The GIMP actually has the same PNG problems as photoshop.. images run through optipng won't render or save properly.
Personally I'm using Illustrator mainly now since I'm making themes in ldpi and hdpi.. I only use photoshop to chop things up.

goldenarmZ said:
The GIMP actually has the same PNG problems as photoshop.. images run through optipng won't render or save properly.
Click to expand...
Click to collapse
Well, that's not entirely true:
The same image as in original post (pulled from ADW launcher apk), the left one is in indexed color mode (colors are fine, but there's only 1 bit alpha), the right one is exactly the same image but after changing colorspace to RGB. After modifying the file, saving it (as RGB) and applying a metamorph with it, android displays it correctly. The resulting RGB file might be a bit larger in size than indexed one, but i never really compared them.
Not trying to prove anything here, just correcting a slight misinformation - everyone uses the tools he/she is best at

mr_deimos said:
Well, that's not entirely true:
Not trying to prove anything here, just correcting a slight misinformation - everyone uses the tools he/she is best at
Click to expand...
Click to collapse
Weird.. I was absolutely convinced I'd tried that in gimp. Thanks for the info.

Help Modifying Notification Pull Down

I am trying to modify the background of the pull notification pull down screen in Cyanogenmod 6.00 RC0. I am assuming this image is the one in the framework-res.apk, in the drawable-mdpi folder, named 'status_bar_background.png'.
I want it to look like this:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
with the Modest 'mouse' image at the bottom of the screen when you pull down the notification. However after I edit it and push the new framework-res.apk to the phone and reboot it ends up looking like this:
Is there any way to make it so that the mouse only shows up at the bottom of the screen and only one time?
Another question is why isn't the semi-transparency applied so that i can see my home screen behind the pull down screen like in the original:
I attached the pngs that I have been working with, and the original framework-res.apk
Thank you for any help.
P.S. Modest Mouse is indie rock band that I highly recommend you give a listen to.

I'm not an expert but here my comments.
Russss said:
Is there any way to make it so that the mouse only shows up at the bottom of the screen and only one time?
Click to expand...
Click to collapse
You will have to change the resolution size of the image to match the screen. Currently status_bar_background.png is 120 x 120 px. So having a image of 120 x 120 it will filled the screen with multiple of same image. You can try modify your image so it fit the screen by change the resolution but it a trial and error case.
Russss said:
Another question is why isn't the semi-transparency applied so that i can see my home screen behind the pull down screen like in the original:
Click to expand...
Click to collapse
I checked the image and it not semi-transparency so that the reason you don't see the home screen. You might need to modify with any photo editing software to make semi-transparency.

pbp776 said:
I'm not an expert but here my comments.
You will have to change the resolution size of the image to match the screen. Currently status_bar_background.png is 120 x 120 px. So having a image of 120 x 120 it will filled the screen with multiple of same image. You can try modify your image so it fit the screen by change the resolution but it a trial and error case.
I checked the image and it not semi-transparency so that the reason you don't see the home screen. You might need to modify with any photo editing software to make semi-transparency.
Click to expand...
Click to collapse
Thank you,
I was able to get it working and pushed it using metamorph. Now it is time to try messing around with other images.

Modest mouse is one of my favorite bands, and I'd love to have that on my hero. Could you make a flashable, or at least upload it?

radxcoresteven said:
Modest mouse is one of my favorite bands, and I'd love to have that on my hero. Could you make a flashable, or at least upload it?
Click to expand...
Click to collapse
Nice to see another Modest Mouse fan. They are my favorite band (second right now is Wolf Parade).
I don't know how to make it flashable, I used metamorph. I will upload my metamorph zip that I made and will also upload the framework-res.apk and the photoshop file that I used to make it. It has been working real good for me all day. I am using Cyanogenmod 6.00 RC0 just so you know.
I would like to eventually make a full modest mouse theme but I don't know enough about editing all the images to really get going good....also I'm not real good with photoshop.
Attachments:
Modest Mouse.zip is the metamorph theme
framework-res.apk is the framework apk from my /system/framework/ folder
status_bar_background.zip contains the photoshop file that I used.
If you edit/use it save it as .png. the file goes in the framework-res.apk in the
res/drawable-mdpi folder
If you have any ideas for any improvements let me know and I will see if I am able to do it (still learning)

[Q] How to theme for T-Mobile theme chooser?

I recently have been trying to create a theme for the T-Mobile Theme Chooser that comes with CM7. I pulled the cyanbread apk and extracted it and just began to replace the images with my own, until I came across some indexed images. Basically when I open these in photoshop it turns all the alpha transparencies to opaque.
Original Image:
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
After import then saved:
Obviously I can't work with this.
Is there a template or something that I can work with? Or an easier way? I'm basically just taking the best parts of a couple themes and putting them together, and editing the colors. I'm not smart enough with xml to write code from scratch.
Thanks.

I use gimp. It has a setting to change the mode from "indexed" to "RBG" or "greyscale".

When I run into those, I open them in pixlr.com (a free image editor that pretty much ignores permissions), save them, then re-open in Photoshop.

iamthebigcheeze said:
When I run into those, I open them in pixlr.com (a free image editor that pretty much ignores permissions), save them, then re-open in Photoshop.
Click to expand...
Click to collapse
Thanks man, helped a ton.
Unfortunantly I keep running into speedbumps, anyone mind helping me here?
I have two themes at the moment, mine and another one. The other one replaces the widget icons in the notification bar. I like those much better than the stock cm7 ones. The problem is is that I can't just drag them and drop them from drawable folder from theirs to mine, as I'm assuming the XML in mine doesn't have any code to tell that image where to go.
How would I go about editing the xml file(s) to add support for theming of these icons? I have never really touched xml before, plus I haven't had any success finding how to edit any of the xml's in the apk.

Leave xml alone just drag and drop
Sent from my GT540 using XDA App

pashinator said:
Leave xml alone just drag and drop
Sent from my GT540 using XDA App
Click to expand...
Click to collapse
Problem is is that the apk I'm using as a template does a ton of stuff I don't want it to, but some stuff I do.
Like it reskins the whole browser and shrinks the pop-up menu when you hold your finger on the home screen. I don't want this, and just deleting the images doesn't solve the problem because I get errors while compiling.
The only thing I really want is the ability to skin notification bar widget icons (toggle wifi, gps, etc). Haven't had much luck finding themes that do.

You still need to resign a theme.apk after replace new png files!

What key do you sign it with?

I've got a couple themes up and running right.now and would be happy to help. Do you use Linux, Mac, or windows? Do you have decompiled Apk's that you're working with or are you editing compiled ones?

With theme *.apk file, I can only replace the existing icons, then use apk manager to sign, i cannot add new icons into it!

You can check out my theme chooser guide here

nhnt11 said:
You can check out my theme chooser guide here
Click to expand...
Click to collapse
+1. I used this guide as well. It's a great help

[Theme]Virtuous 2.35.0 Blue Glass Transparent MOD

Just some good old candy with lots of Transparency. Thought I would share my theme I use. This is made for the Virtuous 2.35.0 from the UOT Kitchen and graphic changes.
Thanks to M10 tools, Liamstears, kalagas, Capy and Virtuos team. May have to mount data and system in recovery before flashing. HTC weather lockscreen background modded, Htc People, mail, freindstream, weather widgets transparent. Status bar transparent. Plenty of color icon changes and alittle bit more.
Link dropbox.
Virtuous_Glass_Blue.zip
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}

thanks for creating such awesome themes.
could you plz make just the separate mods for just dialer/ transparency in rosie/status bar/notifications pull down or, even just those amazing pop-ups (whichever is possible would be greatly appreciated )

Hi trock62, great work!!!
I've got a question about the "Personalize" button on the home screen. The one next to Phone. It has the Personalize icon but on button press it loads the internet app. Is this by design?
Also I've been looking for a better locking ring but can't seem to find one that works with VU 2.35, there are plenty that work with Android 2.3.4 but not in VU. Is there something about VU that causes a problem?
Thanks for a great theme!!!

Personalize button is set in the tweaks to an app of your choice. Change the lock ring is is fusion and idlescreenbase.sold using m10 tools
Sent from my HTC Desire HD using XDA App

Running on a mt4g and looking great. Really nice work. Thank you.
Sent from my HTC Glacier using xda premium

Very nice theme. I really like the spirit of transparency.
How can you put the wallpaper on the desktop lockscreen weather?
Again thank you for the great job.

steftolo said:
Very nice theme. I really like the spirit of transparency.
How can you put the wallpaper on the desktop lockscreen weather?
Again thank you for the great job.
Click to expand...
Click to collapse
http://forum.xda-developers.com/showthread.php?t=1160206
1. Image needs to be resized to EXACTLY 540x960. You can do this in any image editor.
2. Flip the image upside down.
3. The images MUST be PNG format.
Once you have this done, you want to grab the IdleScreen_Weather.apk out of the rom youre usings zip folder. Its located in system/apps. Once you get the apk, you want to open up m10 and click load file. Navigate and select the IdleScreen_Weather.apk.
Once this loads, you want to click the tab that says m10 Files. At the bottom of the screen, youll see where it says Decode Images, make sure you check that box.
You want to double click the Lockscreen_weather_bg.m10. It will ask if you want to decompile it. Click yes. At this point, youll be brought to the next tab which is Editor.
From here you want to expand until you see Textures. Under there you will see three spots labeled Texture. Click that and it will bring up an image to the right. Right click on this image and click "Show in Explorer". You will see three png files in here. You want to replace each one with the images you created earlier. This is important though. Make sure you copy the name of each file youre replacing EXACTLY. Im not responsible for any errors you make on renaming.
Once you get all three of the images replaced, go back to start and then save .apk Make sure to use the same name.

trock62 said:
http://forum.xda-developers.com/showthread.php?t=1160206
1. Image needs to be resized to EXACTLY 540x960. You can do this in any image editor.
2. Flip the image upside down.
3. The images MUST be PNG format.
Once you have this done, you want to grab the IdleScreen_Weather.apk out of the rom youre usings zip folder. Its located in system/apps. Once you get the apk, you want to open up m10 and click load file. Navigate and select the IdleScreen_Weather.apk.
Once this loads, you want to click the tab that says m10 Files. At the bottom of the screen, youll see where it says Decode Images, make sure you check that box.
You want to double click the Lockscreen_weather_bg.m10. It will ask if you want to decompile it. Click yes. At this point, youll be brought to the next tab which is Editor.
From here you want to expand until you see Textures. Under there you will see three spots labeled Texture. Click that and it will bring up an image to the right. Right click on this image and click "Show in Explorer". You will see three png files in here. You want to replace each one with the images you created earlier. This is important though. Make sure you copy the name of each file youre replacing EXACTLY. Im not responsible for any errors you make on renaming.
Once you get all three of the images replaced, go back to start and then save .apk Make sure to use the same name.
Click to expand...
Click to collapse
Thank you, but I do not think it was as complicated

Nice
Virtuous unity v2.3.5

i applied the theme on virtuous 2.37 where the photo widget was resised correctly but the theme seems to applie the old unresised photo widget ,thanks if you can fix it

nice theme tx
could I have circular battery please?

link
why link dont work???

Does anybody use PNGOptimizer when creating themes?

I'm not a themer, but I'm a designer and I do a lot of Android UI design which includes slicing the images and making 9patches. In my workflow I always use PNGOptimizer to remove unneeded information from png files. I use PNGOptimizer which I find very usefull and easy to use.
I opened some of themes and almost every one of the were not optimized. I took the PNGOptimizer and cleaned all pngs and on theme that is 8.1MBs in size I have gained 0.7MBs in size. This is not only the filesize gain, but the theme is acting pretty much faster (by observing).
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
The app is pretty much straight forward, just drag and drop the png files, and it will optimize them in batch. It will give you the log, where you can see how many %s have you gained.
There is a settings view by right clicking on a window where you can set the desired cleaning process.
This app is Windows only, and it's free
http://psydk.org/PngOptimizer
I'm sure there are similar apps for OSX and Linux, but I haven't tested them as I don't use these OSs.
I just wanted to share the tool with you guys, and if I posted in wrong thread, I'm really sorry, and please move my thread to the appropriate one

This is something I've always done for my themes and ROMs
Sent from my LG-E739 using Tapatalk

Maybe I didn't opened your themes then

I dislike when people use PNGOptimizer. I've seen a lot of people using it on MIUI lockscreens, and some themes (ZDune's MIUI for CM7, for example) and it makes them incredibly hard to edit, because it changes the PNG from RGB to index color mode. When you open the PNG in photoshop, it has a big thick black border around it, loses gradient transparencies, etc. I tried to edit a theme for my sister to make it all pink but found it impossible to do because all the PNGs were in index color mode. Oh well.

kcls said:
I dislike when people use PNGOptimizer. I've seen a lot of people using it on MIUI lockscreens, and some themes (ZDune's MIUI for CM7, for example) and it makes them incredibly hard to edit, because it changes the PNG from RGB to index color mode. When you open the PNG in photoshop, it has a big thick black border around it, loses gradient transparencies, etc. I tried to edit a theme for my sister to make it all pink but found it impossible to do because all the PNGs were in index color mode. Oh well.
Click to expand...
Click to collapse
You can always convert them back to 32-bit.

kcls said:
I dislike when people use PNGOptimizer. I've seen a lot of people using it on MIUI lockscreens, and some themes (ZDune's MIUI for CM7, for example) and it makes them incredibly hard to edit, because it changes the PNG from RGB to index color mode. When you open the PNG in photoshop, it has a big thick black border around it, loses gradient transparencies, etc. I tried to edit a theme for my sister to make it all pink but found it impossible to do because all the PNGs were in index color mode. Oh well.
Click to expand...
Click to collapse
paint.net is a free image editor which can do the conversion to rgb 32-bit if you want (and opens the files correctly, without the black border)

picard666 said:
paint.net is a free image editor which can do the conversion to rgb 32-bit if you want (and opens the files correctly, without the black border)
Click to expand...
Click to collapse
Thats true, I've heard that. However, Doesn't it save them with a non-transparent background? And even if it does save with a transparent background, batch editing a ton of images from a theme would take forever, having to open each with paint.net and saving them before I can edit with photoshop. I can't imagine doing that with 200+ png's.

Batch processing is your friend.

Jumba said:
Batch processing is your friend.
Click to expand...
Click to collapse
i know this is a rather old post, but just want to share the program ive made for Un-optimizing the png's for editing..
http://forum.xda-developers.com/showthread.php?p=33520176
cheers