[TIPS, TRICKS, GUIDES and SHORTCUTS] Graphics Software Help for Themers - Android Themes

TIPS, TRICKS, GUIDES and SHORTCUTS
Graphics Software Help for Themers
I created this thread for anyone who would like help or want to learn quick ways in which to make theming and/or modding easier while using various graphics software. This software includes Adobe CS(Photoshop, Illustrator, etc.), GIMP, Paint.NET, Xara, CorelDRAW, Painter, etc.
This thread ideally should be able to help those who would like to use a particular program to create icons, launcher themes, boot animations, wallpapers, etc. There are lots of great theming help threads but within these threads there may be a few questions on how to use certain software to accomplish various tasks. A thread dedicated to just that would be ideal so as to not to deviate from the main topics of those threads.
All questions pertaining to how you would use a particular software for your creation are welcome and I would encourage other themers or anyone else who has knowledge and would like help, to please do so.
I am mostly familiar with Photoshop. I'm by no means an expert but I'm comfortable enough with the program to be able to be helpful wherever and whenever I can. There are XDA members who know more than I about this particular program as well the others mentioned.
I will add to this thread as much as I can and will also add helpful posts of other users to the OP.
Lets start:
How to open multiple images as Photoshop layers:
1. Opening Adobe Bridge and navigate to the folder that contains the images you want to add to your document. I have Bridge open to a folder on my Desktop with five images inside of it. I’ll select the first image (the one on the left) by clicking on its thumbnail.
{
"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"
}
2. Then, to select the other two images as well, I’ll hold down my Shift key and individually select images or click on the last of the five images (the one on the right). All five images are now highlighted and selected. Or CTRL+A to select everything in your folder.
3. With all of the images selected, go up to the Tools menu in the Menu Bar along the top of the screen in Bridge, choose Photoshop for a list of Photoshop-specific options, then choose Load Files into Photoshop Layers.
4. Photoshop will open automatically, if it’s not open already, and will add all five images (or as many images that you have selected) into the same document. It may take a few moments for Photoshop to process everything, but when it’s done, you’ll see a single document open on your screen containing all of your photos.
(Photoshop) How to apply an action for your images. You can record an action and set it to one to three buttons. (Photos may be provided later)
1. Go to Window and click Action and the Action popup or menu will show on the right.
2. Click the drop-down next to Action and click New Action.
3. Name your action whatever you'd like. Where it says Function, I would recommend creating one so you don't have to keep selecting your action and clicking the Play button every time you want to use your action. For example, you can make F2, Shift+F2, or Ctrl+F2 a function and anytime you you want your action to start, just click the button or button combinations you made.
4. Click Record and perform your action from start to finish then click the Stop button. Now all you have to do is keep clicking your pre-programmed button anytime you want to use these actions on your images.
(Photoshop) How to batch apply one action to multiple images. Once you have a recorded action you can apply it to an endless amount of images at one time without pressing anything.
1. Go to File > Automate > Batch.
2. At the top in the Play section, where it says Set, find your folder in the drop-down.
3. Underneath Set you will see Action. The drop-down will have your pre-programmed actions and select the one you want.
4. Now go to the Source section. Click the Choose button and select the folder in which you would like your image files saved then Click Ok.​

Reserved

One more

vanessaem said:
One more
Click to expand...
Click to collapse
cool work......this will help new members

Good job, are you still playing on adding more to this thread?

mloc33 said:
Good job, are you still playing on adding more to this thread?
Click to expand...
Click to collapse
Thanks a lot. I would like to but don't have the time at the moment. This thread was also created for the community. It's for anyone looking for troubleshooting with the various graphics programs used to theme. Any and everyone could take part and is encouraged to do so. But I guess no one needs the help...lol.
However, the thread is still here.

On gimp, I opened a .PNG file, a quick setting toggle icon to be specific, it is in a greenish-yellow color and I wanted to change to white. So I set the foreground color to absolute white and picked the pencil tool, lower its size down to a pixel then I clicked on the image,expecting white color to fill the pixel, instead it "popped" out the same greenish-yellow color of the original image. Tried another tool, still the same result. But tried another .PNG image and BAM! white comes out.......then I realized some .PNG images worked while some didn't. Does anybody know what's causing this?
I'm still new to GIMP
And also the foreground color never changed from white and background never changed from black......... also if black is used as foreground color it works. So what's wrong with white??

Samuel2599 said:
On gimp, I opened a .PNG file, a quick setting toggle icon to be specific, it is in a greenish-yellow color and I wanted to change to white. So I set the foreground color to absolute white and picked the pencil tool, lower its size down to a pixel then I clicked on the image,expecting white color to fill the pixel, instead it "popped" out the same greenish-yellow color of the original image. Tried another tool, still the same result. But tried another .PNG image and BAM! white comes out.......then I realized some .PNG images worked while some didn't. Does anybody know what's causing this?
I'm still new to GIMP
Click to expand...
Click to collapse
Are you trying to do image masking in order to fill a particular area white?

Actually, Im trying to add white on top of the old color to as to change the whole icon to white. If that is what you also meant, then yes....

Samuel2599 said:
Actually, Im trying to add white on top of the old color to as to change the whole icon to white. If that is what you also meant, then yes....
Click to expand...
Click to collapse
I'm not sure if GIMP had anything to do with one .png's ability to work properly over another. However, it may depend on the quality of the actual image itself.

Related

[UPDATED 3/29] 350 + Ultimate Launch Icons (Over 80 Prada Plus Icons)

{
"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"
}
80 Prada Plus Icons Specialized Icons can be created as well using this template.
More Games (Just Icons)
PNG Images in post 38
RENAISSANCE http://i297.photobucket.com/albums/mm227/rmingram/Renaissance.jpg PNG Images in post 38
World Flag Icons http://i297.photobucket.com/albums/mm227/rmingram/wf.jpg (Any requests?)
Internet Icons http://i297.photobucket.com/albums/mm227/rmingram/RegionCapture1-1.jpg
Game Icons http://i297.photobucket.com/albums/mm227/rmingram/RegionCapture2.jpg
SummerBoard Icons http://i297.photobucket.com/albums/mm227/rmingram/iFoley_Summerboard_Springtime_by_ra.jpg PNG Images in post 38
Comic Iphone Icons http://i297.photobucket.com/albums/mm227/rmingram/handdrawiphone.gif I know it it shows only 3 handmade icons, but in the file, there's close to 20 icons. PNG Images in post 38
Prada Icons http://i297.photobucket.com/albums/mm227/rmingram/prada.jpg PNG Images in post 38
(special note), "Calendar" Icon will not display as in pic, due the type of device. Only on a Iphone will it be displayed that way.
With the help and inspiration from Bluemetalaxe and many others here, I was able to create some icons for UL. All the icons are 48x48 pixels, which the size can be altered in the UL settings. Up to five 48x48 icons can be placed side by side and flushed on the bottom of your today screen.
What I suggest is creating a new "UL Icon" folder on your SD card, so that you can save and use as many icons as you'd like, without worrying about memory.
I also posted some PNG images and icons here as well http://forum.xda-developers.com/showthread.php?t=378260&page=4 post # 37, but from now on I'll be posting my releases here.
The application I use to make the icons (Icofx) can be located in post # 13. Also if you have any icon request, please let me know.
A Brief Tutorial about using UL icons is in Post #9
PC-Style
Transformer
Credit goes to luiggi for taking the time to convert these (PC- Style and Transformer) PNG images into ready-made UL icons.
Original Images are in Post #13
robosiris said:
I have these icons as well. If you'd like, I'll make any of these icons for you as well.
Click to expand...
Click to collapse
Nice icons robosiris, thanks, would love to have them.
Thanks
Very nice!
iggy said:
Nice icons robosiris, thanks, would love to have them.
Click to expand...
Click to collapse
Thanks iggy, still learning though. Which ones, lol? I have them in png now because I'm coming across some many pictures, and can possibly convert them all. But, if you'd like I can post them in png format and you can create the icons yourself.
karch4 said:
Very nice!
Click to expand...
Click to collapse
Glad you like them. There's more to come
I can only say "They are a beauty", man all of them are work of art. Thanks
the icons are simply gr8,.. but i dont know how to use them
kindly guide me... thanks
A brief tutorial on using and installing UL icons:
Bottom Task Bar: If you and when you want to disable the bottom task bar in your today screen, download and install dcinobar.exe, and place it in your windows\startup folder in your device, then reboot.
Scroll Bar in Today Screen: If you and when you want to disable the scroll bar on your today screen, (so you can place your UL icons on the bottom), go into the registry settings of your device, (HKLM\Software\Microsoft\Today\Items\Ultimatelaunch\" and change "Type" from "4" to "5”. This value locks the plugin to the today screen effectively, thus disabling (removing) the today screen scroll bar (then reboot so the setting will stick). Special note … you have to also Uncheck all your “today” plugins, which is located in your settings/today/Items folder, you want nothing but icons on your today screen like the pics in the first post.
Icons on the bottom of the screen: If and when you want the UL tabs/icons to sit against the bottom of the today screen, you have to go into the UL settings, then go into the “Display” folder like in the picture above. Pllease note the settings I currently have. Checking the "Fixed Plugin-height" box will enable you to adjust the space between the top and bottom tabs. The higher the number, the more space between and vice versa get it? Good!!. Now also make you choose "bottom" in the "Tab Headers position" drop down box as well.
The quickest and easiest way (for me) of placing these icons on my deivce is through active sync. Now go into your "Program Files/Ultimate Launch\Icons" folder in your device. This is where you place the icons.
(1) go into your UL settings on your phone, (for example) in the "Tab" folder,
(2) Highlight the first item and hit "change" which is the 3rd button on the right,
(3) Go to "tab" again, and you'll see XP-Icon button. Hit that and it'll browse your device/storage card. Look for where icon you placed it, which was in Program Files\Ultimate Launch\Icons folder. There you will find the icons.
Also remember, you can assign two images to one (.exe) an application, "Normal" and "Pushed'. This is a cool feature many other launchers don't have.
If anyone comes across anything significant I missed and should mention, please don't hesitate to tell me, and I'll update the tutorial.
MySpace Icon?
The icons look great man....Could you create a MySpace icon also?
robosiris said:
I have these PNG pictures and can convert them to icons as well. There's way too many to convert them all...
Click to expand...
Click to collapse
Maybe you could post them as png so long and some creative members can convert what they like to ico format, and share what they convert? This way, the burden is not all on you...
robosiris said:
Thanks iggy, still learning though. Which ones, lol? I have them in png now because I'm coming across some many pictures, and can possibly convert them all. But, if you'd like I can post them in png format and you can create the icons yourself.
Click to expand...
Click to collapse
Excellent, PNG would be fine.
Moe5508 said:
Maybe you could post them as png so long and some creative members can convert what they like to ico format, and share what they convert? This way, the burden is not all on you...
Click to expand...
Click to collapse
Good Idea
Below is the app I use to create/edit icons. Basically using this is fairly simple. If I can do it, you or anyone can too, lol.
I'm still learning how to use the application because the original picture size varies. Also, I included some ready-made icons as well (some of which are pictured above). Hopefully, this will spark many to create unusual and interesting new icons
Ya Boi D, I'm not sure if you're looking for something like this. You can see it on my today screen, and it's included in the random icon file. I'll keep searching. You know have the tools to create some yourself and share.
Very nice icons - Thanks
ico not as mamy as in the finger
I downloaded the summerboard zip and found few icos not exist in tne zip shown in your posted finger. How can i get them?Thanks
awesome! thanks for the great collections.
all i can say is wow ive probably downloaded over 300 icons for UL and none of them even hold a candle to these looks like im not gona sleep for a few days i hope i can figure out how to convert them or i might not ever leave my computer. but ive got no job and 2 cases of beer ill get em done thanks for some killer icons
To all, I'm glad you like the icons,
The "Summerboard" zip has been updated with the 4 missing icons. Thanks for bringing it to my attention.
Several icons on the bottom of my today screen are game icons, which I'm currently working on. I have 19 of them and will post them (in icon form) tomorrow at the latest.
is there a tutorial on how to install the skins?
first time using UL xD
Hi!
Excellent icons but can you you explain how you did the firts screen shots like iphone without windows task bars?
I use too UL but i still have the task bar...
Thanks

Bulk image editing (ie for drawable folder)

A quick tip to change the colors of hundreds of images in seconds, for example to make new versions of your android theme.
We are using a loop and a shell command that is technically an image editing software:
for i in $( ls ); do convert $i -modulate 100,100,160 $i; done
Results:
{
"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"
}
You should check the documentation for further info (this thing, ImageMagick, does absolutely everything). But if you only want to change the color you have to know those three values in the example are brightness,saturation,hue. More.
I use linux but in it's website you can download binaries for Windows and MacOS too.
(Posted in my blog some time ago, link)
Awesome man, just used this to work on a personal theme. Works like a charm.
Technically this is good for easy color changes, you'll still have to manually fix the .9.png files to work.
I prefer to use the 'file>automate>batch' and custom actions in photoshop to do the same thing. Works like a charm, and if you know how to record custom actions you can get more than just color changes out of it.
prash said:
Technically this is good for easy color changes, you'll still have to manually fix the .9.png files to work.
I prefer to use the 'file>automate>batch' and custom actions in photoshop to do the same thing. Works like a charm, and if you know how to record custom actions you can get more than just color changes out of it.
Click to expand...
Click to collapse
what's the method of doing this in photoshop? i have the CS4 edition and gimp. thanks
opasha said:
what's the method of doing this in photoshop? i have the CS4 edition and gimp. thanks
Click to expand...
Click to collapse
What I normally do is open a single image from frameworks, open up the actions tab, hit record and record everything I do to that single image. Then save the action. Then personally I like to open all the images I want that same action run on and goto file>automate>batch and let it run the action i create on all open files. You can let the automate process save the files by itself too but I like to create a second action that just saves on its own. So I can review the changes before running the save action.
prash said:
What I normally do is open a single image from frameworks, open up the actions tab, hit record and record everything I do to that single image. Then save the action. Then personally I like to open all the images I want that same action run on and goto file>automate>batch and let it run the action i create on all open files. You can let the automate process save the files by itself too but I like to create a second action that just saves on its own. So I can review the changes before running the save action.
Click to expand...
Click to collapse
thanks a lot prash
prash said:
Technically this is good for easy color changes, you'll still have to manually fix the .9.png files to work.
I prefer to use the 'file>automate>batch' and custom actions in photoshop to do the same thing. Works like a charm, and if you know how to record custom actions you can get more than just color changes out of it.
Click to expand...
Click to collapse
I love that action. Helped me to do the color change on your alien aqua icons and made it easy to make the remainder icon for the rest of the apps. Thanks for letting me borrow some of it. I love the white with the blue outer glow, it looks great in the purple and pink too
As far as I've tried it works fine with .9s too.
But yes, I'll have a look at that photoshop thingy next time I fire up windows
Nauxer said:
As far as I've tried it works fine with .9s too.
But yes, I'll have a look at that photoshop thingy next time I fire up windows
Click to expand...
Click to collapse
What I meant is that if you ONLY do the color shift/hue change on the .9 images, it will LOOK different sure, but it will look all stretched out and weird once you put them back on the phone. You WILL have to redo the .9.png borders and compiling on the new edited images once you do the color changes stated in this method.
(That is, unless you're working with source images, then its probably the best way to bulk edit all the images before compiling them into a theme)

(How to) change that god awful clock font

Heya,
Pretty basic tutorial on how to get rid of the god awful honeycomb clock font.
1) find a font you like, make sure it's a TTF (True Type Font).
2) make three copies of said font, and name them:
AndroidClock.ttf
AndroidClock_Solid.ttf
AndroidClock_Highlight.ttf
3) Get them on your xoom (email them to yourself, connect via USB and stick them in a folder, whatever floats your boat).
4) fire up Root Explorer (or your file browser of choice) and navigate to /system/fonts
5) rename the existing files listed above, just in case you ever want them back.
{
"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"
}
You can see the ones in hot pink are the actual files that get read, and the blue ones are those I've renamed by adding an "x" to the end of the name.
6) drop your own files in that folder. Be aware that Android is case sensitive, so "AndroidClock.TTF", as well as "androidclock.ttf" would both fail.
7) profit
Again, this is hardly a "tutorial" and more like "hey just replace some basic files".
Get to the lock screen and you can see right away the fruits of your labor:
In order to see the lower right hand clock change, you'll need to reboot:
I'm not wild about the font I used in my demo here. It looks alright in the corner, but the lock screen looks bad. Then again, I don't really use the lock screen (No Lock app FTW), so meh.
Hit the thanks button if you love me.
<3
oops, forgot to explain why there are three versions of the font... I mean, it's pretty basic... but if you look at the original clock font, certain parts "show through" the font and are more opaque then others... the "_Solid" is only parts of the numbers, and the "_Highlight" serves a similar function. Basically, as you can see in my screens above, my entire font is opaque, since I'm using the same file in all three places.
If you want to get fancy and edit a TTF you could end up with really nice drop shadows or whatever. I'm just showing you how to do it. The creative part is in your hands
Is it really that bad? lol. I don't think it is bad but to each his own. Thanks for giving more options.
ixobelle said:
oops, forgot to explain why there are three versions of the font... I mean, it's pretty basic... But if you look at the original clock font, certain parts "show through" the font and are more opaque then others... The "_solid" is only parts of the numbers, and the "_highlight" serves a similar function. Basically, as you can see in my screens above, my entire font is opaque, since i'm using the same file in all three places.
If you want to get fancy and edit a ttf you could end up with really nice drop shadows or whatever. I'm just showing you how to do it. The creative part is in your hands
Click to expand...
Click to collapse
Regardless of how you feel about the stock font, this is a great tutorial for customizing your Xoom and making it your own.
Thanks for a great post!
Awesome!
One question I have. Since the original Honeycomb clock uses three fonts, is it possible to nix two of them and just have one font load?
arrtoodeetoo said:
Awesome!
One question I have. Since the original Honeycomb clock uses three fonts, is it possible to nix two of them and just have one font load?
Click to expand...
Click to collapse
I'll go out on a limb and say "probably yes".
I say this because during my font shuffling last night, I would up with two different fonts overlapping each other. I had one Bauhaus style font named AndroidClock.ttf, and one that was a handwriting style named AndroidClock_Solid.ttf... since they were totally different, I was able to see one through the other, and it was generally a jumbled mess.
I reckon you could get rid of _Solid and _Highlight if you just want a single semi-transparent font file being loaded.
I'll also throw out that you'll need to experiment with which fonts work... some look great on the lock screen, but then have the bottom 10 pixels or so cut off while it's in the corner... other times it looks great in the corner, but has a few pixels cut off on the lock screen. Something about the native size of the font probably comes into play.
I'm still poking around with options... currently running a "busted old typewriter" font that looks kinda cool.
Will probably poke around with making custom _Solid and _Highlight pieces, and maybe trimming the font down to just the numbers to lighten the load. I work in IT at an art school, so we certainly have a zillion apps to dink around with fonts on the machines here.
ixobelle said:
oops, forgot to explain why there are three versions of the font... I mean, it's pretty basic... but if you look at the original clock font, certain parts "show through" the font and are more opaque then others... the "_Solid" is only parts of the numbers, and the "_Highlight" serves a similar function. Basically, as you can see in my screens above, my entire font is opaque, since I'm using the same file in all three places.
If you want to get fancy and edit a TTF you could end up with really nice drop shadows or whatever. I'm just showing you how to do it. The creative part is in your hands
Click to expand...
Click to collapse
So if I want to design this, what you're saying is, _Solid is where I need to have my completely opaque file, _Highlight is where i put what i want my shadow file to look like?
Whats the other file do?
just grab the TTFs off the Xoom, and get them on your windows desktop. Double clicking a TTF in windows will open up a preview of what the font file is "made" of (what the font looks like, different sizes it will scale to, etc).
It's pretty apparent looking at the file. I'll grab some screen caps in a sec...
edit** here ya go, you can see which each font "does"... I'm going to mess around in FontLab Studio tonight and see what I can come up with.
Where do you get the fonts from? Can I just move them over from my windows fonts folder and they will work?
Have you figured out/found how to change clock colors yet?
Sprockethead said:
Where do you get the fonts from? Can I just move them over from my windows fonts folder and they will work?
Click to expand...
Click to collapse
As long as you name them accurately and make sure they are TTF then yes.
I've just tried it with the Calibri font from Windows fonts folder and it's a vast improvement already!
One pointer (on something that threw me for a few seconds) is when you're in Root Explorer make sure you set it to Read/Write access otherwise you'll just get an error message about protected read only system files.
hmm...
I wonder what's causing the edges of some fonts to get cut... I tried changing the glyph size. I thought it might be the larger characters some fonts have but the glyph size didn't seem to make a difference.
ixobelle said:
just grab the TTFs off the Xoom, and get them on your desktop. Double clicking a TTF in windows will open up a preview of what the font file is "made" of (what the font looks like, different sizes it will scale to, etc).
It's pretty apparent looking at the file. I'll grab some screen caps in a sec...
edit** here ya go, you can see which each font "does"... I'm going to mess around in FontLab Studio tonight and see what I can come up with.
Click to expand...
Click to collapse
Just curious if you ever came up with something you want to share? I use the lock screen version as my alarm clock, but it is hard to read sometimes - 5's and 3's in particular.

[Program] PNG Un-Optimizer v1.1 [Windows][02-11-2012]

hi themers!
After png's have been optimized, they are shown as indexed color mode, and therefore isnt correctly loaded with photoshop.
So made a small tool, that is able to convert lots of png-files, into 32bit RGB Alpha mode, so that they are all readable with photoshop, and other image editors as well.
I made this tool, because i thought it was a bit of a hassle to convert every png with indexed color mode, into 32bit RGBA mode, one by one. I do realize that it can be accomplished by batch processing, but thought it would be a lot easier with a GUI tool, so I made this
What it does exactly, is that the themer can add thousands of png's to a list, and then convert all of them, with only a few clicks.
I actually dont know how 9-patch png's (*.9.PNG) are behaving after the convertion, so made a button to exclude them from the list, before converting, so they dont get "hurt" in the process.
*EDIT* - Un-Optimizing compiled ninepatch files will mess them up, and they will not work afterwards!
Index color mode png opened with photoshop:
(Before)
{
"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 exact same png opened with photoshop, but Un-optimized with my tool:
(After)
​
If i helped, i only ask for a "Thanks", and if anyone run into problems, have some ideas for changes or anything else, please let me know
And if just one person find this useful, ill consider this project: "time well spended"
Cheers!
TODO List:
+ Add "Un-Optimize selected file(s)" to the right-click context menu
+ Add panning/scroll feature at View Image window
+ Add "Un-Optimize" to windows context menu, when right-clicking png files
+ Add "Optimize" functionality, to make files optimized again
+ Port it to Linux (?)​
Current release:
v1.1
+ Added Double-Click on items in list, to show image and its resolution, but not bitdepth as it showed 32bit on index png-files as well. Making it show if its index mode seems like a bit of a struggle to accomplish, so didnt add that.
+ Added Right-Click context menu at items in the list, with the ability to show the image, open in favorite editor and remove from list.
+ Added Drag&Drop function.
+ Added Settings window, to set Favorite Image Editor (like photoshop or such...) and Exclude 9-Patch (*.9.PNG) files from list on every add.
+ Fixed a lot of code, so its now more stable and user-friendly.​
Previous releases:
v1.0
(First official release)​
How to use this tool
First of all, if you havent already, then extract the zip content to anywhere you feel like.. Some place you remember
When starting it up, you will see some buttons, and they are kind of self-explanatory, but nevertheless ill explain it anyway.
The first thing you are going to do, is to add some files to convert:
Or you can just drag+drop files and folders from explorer or something similar, onto the tool. This is a newly added feature, so please report if anything goes wrong ​
Then you might want to remove some file(s), you can just select the one(s) from the list, holding CTRL down while left-click on the items. After that, click the "Remove selected..."-button.
I recommend that you click "Remove 9-Patch files..."-button, before starting the convertion, as *.9.png files gets messed up in the process. The technical thing, is that they loose the byte chunk binary information in the header, and therefore cant decode.
​
Now, you should be ready, so just click the "Start !"-button, to begin the convertion. It will take a few minuttes to finnish, depending on your machine and how many PNG-files to convert, and their size and details.
​
For future use, it would be a good idea to check out the Settings for this tool.
​
When the settings window is open, you are able to set your Favorite Image Editor (like Photoshop or such...), so that you are able to select one or more files in the list, right-click and "Open selected file(s) in Favorite image editor". This will then launch you image editor, and then open the selected file(s), within this and your are ready to edit them from there.
There is also the option to make it exclude 9-patch files, by default everytime you add files to the list.
​
If you have any questions, constructive critism, or just some ideas to be made, then feel free to post
Damn... thanks limit... I'll try to remember to give you later the one you deserve.
I've not tried your tool, I'm at the office, leaving in two minutes, but I'm sure it's going to make my life easier.. this indexed color mode drives me crazy..
Thanks anyway, I'll give you feedback later too..
fredmode01 said:
Damn... thanks limit... I'll try to remember to give you later the one you deserve.
I've not tried your tool, I'm at the office, leaving in two minutes, but I'm sure it's going to make my life easier.. this indexed color mode drives me crazy..
Thanks anyway, I'll give you feedback later too..
Click to expand...
Click to collapse
thanks mate
yeah, that was how i felt before making this tool.. so im glad it will make your life easier as well
looking forward for your feedback :good:
Thanks my friend. I'll work when I have some time :good:
Simply Superb :highfive::good:
App Test On Its Way Brother :highfive:
edit : ran a simple test and this is so sexy mate , big thanks will save alot ,, alot of time for users and new themers
just an opinion : if you can add an open button for the converted file , would be awsum
thanks my friends! really glad you like this.. and yeah, this is making theming a whole lot faster..
the point with this, is just select all the apk's output folders, and click "Yes" to include subdirectories, and then it will add all pngs to convert into nicely editable files but, dont know about the 9patch ones, so made a button to exclude them from the list, right before converting, just in case
vegeta, ive already planned to make a double-click function on the items, in the list, to show the image in another window.. and some small description of the image, like resolution, bit depth, and such... so, that will be added into the next version
EDIT:
you guys should probably subscribe to this thread, because updates will come, guaranteed.. just a suggestion
EDIT2:
Updated the TODO list
Great work mate! And I see it's very useful for win users.
Using Mac I have no such issues at all. Photoshop opens 9.png with no problem and the thing which necessary to do is decrease Canvas size to get real image size for future patching after editing.
Just Checked And Works Fine...
Thanks A Lot Mate....
A very nice and Important share for theme makers.
Thanks a lot my friend!!! Work fine! :good:
Feedback time as promised..
It just does it's work.. perfectly.
Congrats anbech, great work ! :good:
Thanks for all that feedback mates! really appreciated
will update it soon, might already be tomorrow..
Update!
I updated my tool.. changes is written in OP
cheers
anbech said:
I updated my tool.. changes is written in OP
cheers
Click to expand...
Click to collapse
thanks alot mate, just kind of update i wanted
double click , right click options to remove file , multi selecting
thanks alot again brother
vegeta, im glad that youre glad about the new changes
hope it comes handy for all the themers at xda.. i certainly, as the developer of it, think its making the theming process a lot faster.. just add the SystemUI extracted apk and framework-res.apk, and it will make ALL the png's fully editable, except 9patch files though...
Thank you
I had to come out of exile to say many, many thanks for this tool.
I've been looking for something like this for a long time instead of using fireworks or pixlr.com.
It runs very smooth and is very light on resources.
If i may make a suggestion. How about adding a right click "un optimize" option to the windows right click menu?.
Highlight png/s> right click> un optimize.
dully79 said:
I had to come out of exile to say many, many thanks for this tool.
I've been looking for something like this for a long time instead of using fireworks or pixlr.com.
It runs very smooth and is very light on resources.
If i may make a suggestion. How about adding a right click "un optimize" option to the windows right click menu?.
Highlight png/s> right click> un optimize.
Click to expand...
Click to collapse
awesome mate! really appreciate it, means a lot to me, since ive used countless hours on this project already
great idea mate, dont know why i havent thought of that.. going to add that to the TODO list at OP, and will be available in the next release..
so may i suggest that you subscribe this thread, to keep yourself updated..?
cheers mate, and thanks for all the "thanks" you gave
You should give mksip a friendly nudge and have this app put in the everything thread
thanks man needed this tool pretty baddly
Sent from my GT-S5830 using xda premium

[KLWP] [TUTORIAL] Create a Material animated Floating Action Button

This is the first of a set of basic animation tutorials for KLWP. If you do not know what KLWP is main thread is available here.
Final result (full video tutorial at the end, final result KLWP file attached)
{
"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"
}
Step 1: create the FAB button that will trigger the animation
Start from an empty preset
Create a global that will be used to trigger the animations (Globals -> Add -> Type Switch), this global will be used to control animations around
Add the Image for the FAB, change its name to better see it in the list
Load an Image that you like, here i am using a generic "plus" button
Set single Touch action to "Global Switch" and pick the global we just defined ("FAB"), so when touching this image that global will be toggled on/off
Go to animations and add a new one, select "ReachOn -> Global Switch" so it will be triggered by the global switch, set speed to 5 to make it faster (5 is 50ms), set type to Rotate and amount to "63" so it will not rotate completely and stop a bit earlier looking like an "X" instead of a "+" (you can test the animation pressing the "play" button on top)
To make it a bit fancier add another animation triggered by the same global, set speed to 5 as above and select "Color Filter Out", this will desaturate the image on click, making it black and white when opened
Your button is done! Save, go back to screen and see it in action. Cool eh?
Step 2: create app button
Add another Image object, change its name to "Facebook" or whatever you want
Add a Switch animation of type Scroll so the Image will move when switch triggers, set speed at 5 as above, and play with "speed" and the "play" button on top right until you reach the desired result, set also the "angle" param if you want to change scroll direction and mode to "overshoot" if you want to bounce when opening
Add another Switch animation of type "Fade In" so the item will fade in when switch changes (and while fades), the item will disappear because its initial state will be invisible, if you click the play button you will see it become visible
Go back to the root and check with the global switch (changing it) if the animation is ok, if its ok change the position of the Facebook button and place it on top of the list so it will go below the FAB (so it will look like it appears from the back)
Done! Save and test it on screen
Step 3: create additional buttons
Copy the facebook button using copy / paste
Change the name and the image (in this case we use Youtube)
Go to animations and change the scroll "speed" parameter to make it go farther, test it with play (you will just see an empty red rect because the item is transparent but it will be enough to tune speed
Save, done!
Video
https://www.youtube.com/watch?v=-UA1kIZcCp4
Nice job Frank. As always.
Sent from my OnePlus One using Tapatalk Pro
Awesome thanks Frank!
Great lil tutorial...thumbs up!
Sent from my LG-D850 using XDA Premium HD app
Great Tutorial.
Could you make a tutorial with animation between wallpapers (screens)?
mimidudu said:
Great Tutorial.
Could you make a tutorial with animation between wallpapers (screens)?
Click to expand...
Click to collapse
Like changing wallpaper when swiping or something different?
frankmonza said:
Like changing wallpaper when swiping or something different?
Click to expand...
Click to collapse
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?
Sample Menu:
Files Home Weather - white letters
Screen 1: Home data
Screen 2: Weather data
Screen 3: Calendar events
When the corresponding screen is showed in menu the word corresponding is yellow, the other two whites.
Thanks in advance for your help.
mimidudu said:
Hi frankmonza,
How to make a horizontal menu to switch the color of the letters, when we move the screen?
Click to expand...
Click to collapse
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.
In general the idea is the following to create the text item (and i will try to create a tutorial on this):
You create a Text object, position it, set font and so on, and set text to one of the menu items
Go to animations and set animation to "fade out"
Copy the text module you created, set color to yellow or what you prefer (the selected color)
Go to animations and replace "fade out" with "fade in"
Done, at this point your text will be white in all the screens and fade to yellow in the center one
Then, in order to create the ones in screen 1/3 do this:
Copy the 2 modules you created above
Change text and position them to the left or right (depending on where it should be)
Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
Done, these items will get selected in their screen
Finally to create the bar below that moves:
Create a rect, yellow, thin, below the center
Go to animation and set animation to "scroll"
Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)
Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.
Hope it helps and i will try to make a video / proper tutorial soon.
I will try.
Thanks.
Can you fix the YouTube link?
AndreAkaNick said:
Can you fix the YouTube link?
Click to expand...
Click to collapse
Fixed sorry
how add touch actions??
frankmonza said:
Hi!! And thanks for the details! So, first of all you can find this implemented already in some template on the store like "Matdd for Kustom" from Jeppe.
In general the idea is the following to create the text item (and i will try to create a tutorial on this):
You create a Text object, position it, set font and so on, and set text to one of the menu items
Go to animations and set animation to "fade out"
Copy the text module you created, set color to yellow or what you prefer (the selected color)
Go to animations and replace "fade out" with "fade in"
Done, at this point your text will be white in all the screens and fade to yellow in the center one
Then, in order to create the ones in screen 1/3 do this:
Copy the 2 modules you created above
Change text and position them to the left or right (depending on where it should be)
Go to the animation tab and change the "center" option from "center screen" to "first screen" or "last screen" depending on the item
Done, these items will get selected in their screen
Finally to create the bar below that moves:
Create a rect, yellow, thin, below the center
Go to animation and set animation to "scroll"
Tune "speed" in order to be at the right distance in screen 1 / 3 (scroll in the editor then change speed to match position)
Finally, to make this more portable i would suggest doing this with 6 globals, 1 for background color, 1 for selected color, 1 for text color not selected and 3 for the text in the menu entries, in this way you can then just copy these items from one setup to another and just change the globals.
Hope it helps and i will try to make a video / proper tutorial soon.
Click to expand...
Click to collapse
This could be a separate tutorial in itself. :good:
Bump.

Categories

Resources