Im trying to resize a set of icons in photoshop.
They are circular, transparent background PNG files.
As is, they are clear & smooth.
Upon import they are automatically distorted, beyond belief.
At this point there has been no editing, i have simply opened the file in photoshop.
Im not sure if its relevant but they are opening as index, locked.
Its not a universal issue, other images open fine.
Any suggestions would be welcome.
Also any other advice on what im trying to accomplish;
- resize canvas up (to enlarge transparent background)
- resize image down to original size (to give the effect of a smaller icon)
Im aiming to batch convert a group, ive already defined the actions in photoshop so if i can get around the issue within photoshop that would be my first preference.
Cheers.
Related
I have made gifs for a custom boot screen and have been playing around with getting it them to work.
I flash over the previous bootscreen it reboots, my images show but then when they are meant to be animated the image gets scrambled and makes no sense, i did rather cheekily just replace the .gifs from someone elses custom boot screen and signed the zip file.
does anyone know whats going wrong or can anyone point me in the direction of creating the files to go with the gifs so i can get this working.
Cheers
John
They need to be in indexed 255 colors. And they mustn't have any transparent layers. Then they should work just fine.
ahh tristan...you've learnt well... ;D
cheers for the help gents, will try it in the morning.
hmm this is annoying, i have my gif files all built nicely but not using indexed 255 .... does anyone know of a tutorial for converting it without loosing all animations? im searching the net at the moment but no luck
gimp -> image -> mode -> indexed
Will it change a current gif or do i have to make the frames again in gimp?
It works through all the frames.
just used gimp under ubuntu, opened the animations selected image >> mode >> indexed flashed my boot files and they are still not displaying right, beter as you can see part of the animation playing but its far from perfect.
shal i just try creating the images again? or has anyone got any other suggestions?
thanks for everyones help so far though
John
Hello, first post here. I am having the same problems as jonny in creating a custom bootscreen. The first frame of my animation will show before it scrambles. Iam using photoshop. I created my animation in imageready, imported to photoshop, made an indexed 255 color palate and went back to imageready and loaded the palate. I feel like I'm missing something obvious.
BTW, I love this forum. You are all great. I am learning so much. Recently created my own lockscreen, and after I can get the bootscreen down I want to try my hand at the taskbar icons
I swapped to GIMP image editor (which is 100% free) to actualy animate my gifs in indexed 255, i did it in photoshop but it didnt work for some reason even when using indexed 255 colour.
Okay, after much fooling around, I finally got it to work properly . In case anyone cares, here's what I did:
Created the animation in PS (didn't realize you could do animation in PS and didn't need IR) to how I want it to run. Once it looks exactly how you want it, click "Flatten frames into layers". Now delete your original layers so all you have left is the animation frames. Save PSD and open it in GIMP. Go to file, save as, and save as a gif. Click the "save as animation" and "convert to indexed" (that is the key right there) bubbles, and click "export" then save.
Viola! now more problems. I can't figure out how to post it as a gif, but it is the boot process from windows xp.
Big question. When you rotate the phone, the status bar background (in themes like Darkness, with a design) gets messed up because it's shaped for our screen and not a small piece that gets tiled like the original. Can you make a landscape version of the background? I noticed in TouchWiz30Launcher.apk there is a homescreen_icon_bg.png and homescreen_icon_bg_h.png the latter being for a horizontal orientation of the launcher. Can we apply this concept to a custom made portrait AND landscape drawer background in twframework-res.apk? I would really like to know if it is possible, but am not asking for the creation of the background. I can make my own, but I need to know how to make it work.
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
CuriousTech said:
I think you have to create a layout-land and layout-port folder and put something in there. Hopefully someone else will chime in.
A simpler idea might be to modify status_bar_expanded.xml to have multiple images for the background and bottom bar, like 3 where the center is fixed and the outer 2 are tiled matched up to look seamless of course. Or just allow certain parts to be stretched and some not with draw9patch.
Click to expand...
Click to collapse
Thanks a lot for your post, I looked into status_bar_expanded but couldn't find anything applicable. Looked at status_bar.xml and it contains all the info on status_bar_background in the vertical position. How would you put it all into horizontal? Would you have to edit the existing xml or make a new one in layout-land? Could I just copy it into layout-land and edit in some new filenames and stuff?
EDIT: You know how to signify a file it says @drawable/statusbar_background? Does this actually refer to status_bar_background.9.png? And how would you signify a drawlable-land destination? @drawable-land/statusbar_background?
That's mostly what I don't understand yet. In framework-res there are 3 folders:
layout
layout-land
layout-port
icon_menu_layout.xml is in land and port and not in just layout. I think because layout is default for both, and land or port is used for those modes if the file doesn't exist in layout. Just like an xml in drawable can replace an image if the same name is used. But I think there's more to it than that. I tried creating a layout-land and layout-port and moved status_bar_expanded.xml to both and it looked normal both ways. I would think that layout-land would automatically use the drawable-land images too. Something else is missing.
EDIT: Oh yes @drawable/statusbar_background is the png in drawable-hdpi, unless there's actually a drawable/statusbar_background.xml which would make it use that instead. I just don't know where drawable-land-hdpi fits in.
Inside the XML there is a "vertical" and "horizontal" section, you'd have to change that too. I have changed it and will try it tonight in my framework. I just don't understand the references it makes too well...
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
CuriousTech said:
I've been trying to find a simple reference, but I guess most of it's here:
http://developer.android.com/guide/topics/ui/layout-objects.html
Or around that area of the docs. The vertical/horizontal I think is the alignment of objects in a group. I don't think it has to do with land/port.
This looks interesting too. I just found it. It looks like a way to view layouts on the computer.
http://developer.android.com/guide/developing/tools/hierarchy-viewer.html
Click to expand...
Click to collapse
I honestly don't know what that stuff means with a headache, so I can't understand what the links refer to, sorry
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
CuriousTech said:
It's all really disorganized or I'm just used to Microsoft docs. The xml corelates with the android classes for coding java. So xml is used sort of like html tables where everything is nested so you can have rows or collumns of buttons (horiz/vert) or menus or whatever, but the elements used are all the members of the android class. It's just so hard to find the meaning of each one.
Click to expand...
Click to collapse
Crap 10char
I think I'm finally understanding how the draw9patch tool works, and with that, how .9.png files work as well. Just because it wasn't clearly explained in anything else I saw (well, clearly to me, anyway), I'm going to try to do a quick explanation of how it works.
The first thing to remember about the draw9patch tool is that it's generally for use after you've already edited a .9.png file, and that a .9.png file is built to be stretched. To start editing .9.png files, just decompile the source apk (usually something like framework-res.apk) with the apk manager or apktool.
Open the .9.png file in Photoshop and edit everything except for an area 1 pixel wide around the edges of the image. That area is sacred. There is probably already something there - if so, leave it.
If you want an easy way to make sure it stays clean, just create a new layer, use the "select single row/column" tool in photoshop to select those single pixel borders one at a time. Using the bucket tool, fill in that single pixel border with a solid color as a visual reminder. Keep that layer in place as you edit as a guide, and when you get ready to save the file, make that the active layer, and use the magic wand to select the area inside the border, then invert the selection (so you just have the one pixel border around the outside selected). Go through any other layers you have in the drawing with that selection still selected and delete anything inside the selection. That will keep the area clear on all layers. Once you've done this, delete the layer with the border and save your .9.png.
Once your .9.png file is saved, start the draw9patch tool (usually in android-sdk-windows/tools/draw9patch.bat).
When you fire up the draw9patch tool in the android SDK, you'll see an arrow on the screen. The easiest option is to just drag the .9.png file into the window. It will open it, but it might be hard to see. If that's the case, drag the "Zoom" slider as far to the left as you can until you can see the entire image.
The first thing you'll want to do is activate the buttons that will best show you how your .9.png file will stretch and move. Here's what each button/setting will show you:
Show/Hide bad patches - this will show you areas where it will stretch, but it will probably look bad. Go ahead and make this show bad patches (the button will say "hide bad patches" if you are currently showing bad patches)
Show lock - I honestly don't know. I haven't yet seen this setting work for anything. Leave it unchecked.
Show patches - This will show you where your image is going to stretch. Check it.
Show content - This will show you where things get written/overlayed on your image. Check it.
Zoom - Zooms the image.
Patch Scale - adjusts the preview of how your image will stretch at different scales.
Now, you're probably wondering how .9.png files determine how the image stretches, and where stuff gets written. That's what the 1 pixel border tells it (except for where two borders overlap - that's a dead area). Here's the way it works:
The border on the top of the screen controls the area of the image that stretches left-to-right. Every black pixel you put in this border selects a portion of the drawing that will be repeated when Android needs to stretch the image in the landscape direction.
The border on the left side of the screen controls the area of the image that stretches up-and down. Every black pixel here will set a repeating area as the image stretches in the portrait direction.
The border on the right side of the screen sets how much area in the portrait direction is available to have items drawn inside of it. If you have some text that will be written on your image by Android (a clock, for example), it will check the black pixels on the right side of the screen to determine where it can put them.
The border on the bottom of the screen works in conjucntion with the border on the right side to determine the landscape portion of the area where things can be drawn.
One thing you'll notice with draw9patch is that it will only let you draw in the 1-pixel borders. This makes it generally easier than Photoshop to work with.
To start, just draw a few pixels at the top and left side borders, then look in the preview pane on the right side of the window. That will show you how those areas will repeat. If you adjust the scale, you can see how it will repeat over a greater area. If a patch isn't going to work, it will show up highlighted in a red border. If you need to erase, just hold shift and then click on the pixels you need to get rid of.
Once you have a stretchable area that works for you, put some pixels in the bottom and right borders until you're happy with the area that will accept drawing items. If you look in the window on the right, you'll see a blue area highlighted where that stuff would go. As long as that looks ok to you, you're good to go.
After you've checked everything and it all looks like it will stretch well, you can just use the File-Save command, and it will save a good .9.png file that (should) compile properly.
A quick pointer that I'm discovering: If you have an image that really won't stretch well in any direction, just delete everything two pixels in from each edge, leaving a transparent line just inside the 1-pixel border. Then select those areas as your repeating areas. It may mean your item shrinks on the screen, but it also means it will look the way you intended.
Good info, thanks.
Sent from my SAMSUNG-SGH-I897 using XDA App
Well done!
If I don't have to make an image with customized draw9patch guides, I personally prefer to make my images before adding the 9patch guides. If you have the fully decompiled .png with the 9patch pixels visible, any slight mistake (partial erase, glow/fade/shadow overlap, ect.) can cause an error when you try to compile it.
Check the size of the .9.png you want to edit before it has been decompiled, and open a new photoshop document in that same size. Make your .png. Decompile, then drop your new image on top of the old one and merge the layers (you may need to erase some parts of the original if they are overlapping). If you find yourself repeatedly editing some of the more common .9.png files, it can also help to make a transparent image template that only has the draw9patch guides on it. Make sure it decompiles and compiles properly, and then you can drag and drop it over your new images, merge layers, and you're finished. Obviously, this only works on images that will be the same size and have the exact same draw9patch guides. Those template borders are very useful for porting and minor changes to common .9.pngs.
Thanks, 10ton.
Since writing up that first post, I came across this. It's the xUltimate-draw9patch tool. I know it's been posted before, but this is the super stripped-down version. It has the application and two folders. You dump your decompiled, doctored up .9.png's in the deepest folder of the "originals" folder set, and then run the xUltimate-d9pc tool. It will compile the .9.png files (assuming all is well - it'll give you useful error messages if they're not right) and spit out the finished ones in the deepest folder of the "done" folder set. From there, it's just a matter of sticking them back into the apk's with 7zip.
I personally have found it to be pretty useful when compiling multiple .9.png's at once, instead of using the draw9patch tool or apk manager.
I hope it's OK to ask a question here ...
What is a good program/tool to use to change the color of multiple .png files all at once? I am trying to convert a blue theme to a different color and have tried FastStone Image Viewer with some success but it will still require modifying a lot of files one at a time. For instance it changed the entire stat_sys_wifi_signal_2_fully.png to the new color even though only the bottom half should convert. When previewing the new images it also looks like the transparent background was replaced with a white background and when I opened the image in gimp the background was indeed white instead of transparent.
I know I could change the color with gimp but I'd have to do them one at a time which would take a lot longer than I'd like to spend on this theme. Thanks for any help.
Hi all,
This program is called "Knob Man"
http://www.g200kg.com/en/software/knobman.html
It is originally created for making animations for synthesizer knobs used in environments such as syntedit and synthmaker.
It can be very handy for creating complex animations with 100+ frames, for battery charge frames for example.
It also has various Color -> Color or rotating masks etc so the first frame can be green and gradually reaches red (empty battery).
The only downside is that the frames are saved as a .png strip which will then have to be divided by hand, or with some other software.
Alll the best
htckt said:
The only downside is that the frames are saved as a .png strip which will then have to be divided by hand, or with some other software.
Click to expand...
Click to collapse
just found this thread, as i had to see if someone had mentioned Knobman here on xda before, and there was
well, for the export image function, it can easily be exported as individual png files, instead of the long all-in-one png file.. just watch my small tutorial
best viewed at 720p and fullscreen..
Knobman - Battery Mod Theming - Simple Tutorial
cheers