Jump to content


Photo

Editing .9's for dummies...like me. *With pictures!


  • Please log in to reply
19 replies to this topic

#1 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 26 February 2013 - 04:59 PM

Hello. If you are reading this you probably are or have had issues with these wonderful little pains in the butt. While there are lots of tutorials out there, for some reason I just couldn't wrap my head around what they were saying and I will admit,after reading 100's of posts, I probably missed it. Although the way I have been editing them in the past worked...it takes much longer and the results were not as good...plus it wasn't the "correct" way. If you have searched for what .9's are you realize that the idea and function is rather awesome as it allows for images to have smaller file sizes while being able to fill a specific field and helps to cut the size of .APKs.

The biggest thing I was not understanding was the addition of using draw9patch to give the image it's stretching patches ( The black lines) for 2 reasons.

1. Draw9patch is a difficult program for me to use (..as is using apktool which is why I wrote this tutorial on an alternative)
2. The fact that I was doing my edits WRONG!!!!

I read repeatedly how important it was to keep from altering the black patch lines but my problem was, the .9's I was editing didn't have patches...and I didn't know why. Here is why and a quick and simple guide to doing them correctly.
  • disturbed58, T3T3droid and jp1044 like this


 

 

 


#2 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 26 February 2013 - 04:59 PM

What I was doing wrong

Basically...



Attached File  1.png   151.66KB   69 downloads

I was editing the wrong files! I was unzipping the compressed images and doing my edits from those. Now,before I make myself sound really dumb,yes..I know that when you decompile a .APK , that it decompresses everything so that XML's etc. can be edited . But what I didn't realize was that it also decompresses the hidden information in those .9's and you can edit those all day long , but you will always see those black bars in your theme. (I'll fill you in later on how dumb I felt when I finally understood what I was doing wrong)


YES...I ADMIT..I AM DUMB!

OK..let's start doing this the RIGHT way.First,decompile whatever .APK you want with whatever your preferred app. I am using VTS so this is what my decompiled framework-res drawable-hdpi folder looks like.

Attached File  2.png   178.77KB   80 downloads

First thing we want to do is make a copy of the image that we want to edit and place it somewhere you'll remember,just in case you get an error in apktool because you destroyed the patch.

Select a .9 and open it up in Photoshop,GiMP or whatever image editor you like.

Select the rectangular marquee tool and make a selection around as much of the image that you are trying to edit

Attached File  3.png   160.52KB   84 downloads

Attached File  4.png   163.83KB   87 downloads

And create a new layer

Attached File  5.png   173.75KB   87 downloads

Repeat the rectangular marquee tool around the image you are wanting to change but this time delete it..this is what you will have...

Attached File  6.png   161.88KB   86 downloads

Now,select the top layer so you can edit it. The easiest things you can do are to either change the Hue/Saturation or to create a layer style such as a color overlay...well stick to the basics for now.

Attached File  7.png   214.76KB   80 downloads

Whatever color you have selected is the color you will be altering the image..but to see the changes,you'll need to click the colorize button. As you can see the black bars are still nice and black...and aren't being touched.

Attached File  8.png   176.62KB   78 downloads

You can add your special little touches, change the transparency...whatever. Just make sure that any of your edits such as glow effects do not encroach too close to where the patch lines are going to be because there is a good chance you'll get an error when compiling. Once you are done,merge the layers (delete any that you are not using first) And just save. if you did it correctly,it will automatically overwrite the original.

Attached File  9.png   220KB   82 downloads

And here is our newly created .9

Attached File  10.png   269.6KB   72 downloads

Now recompile....

And here is our compressed .9

Attached File  11.png   224.09KB   62 downloads



Now...because I was hung up on the whole draw9patch thing and since I never fully understood what recomiling a .9 actually did, but didn't want to be that kid in class that asks the teacher a question in fear of being laughed at..I wrote this....which is almost like asking that question and being laughed at! Hahahaha

Now you understand why I felt so DUMB!
  • disturbed58, usmcamgrimm, T3T3droid and 3 others like this


 

 

 


#3 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 26 February 2013 - 04:59 PM

Here is what our new .9 looks like compared to the original


Attached File  Screenshot_2013-02-26-19-26-50.png   295.65KB   43 downloads Attached File  Screenshot_2013-02-26-19-47-18.png   238.6KB   42 downloads


I hope that this helps somebody!
  • s.dubs, usmcamgrimm, T3T3droid and 4 others like this


 

 

 


#4 Bama

Bama

    Needs Beer

  • Superuser
  • 582 posts
  • Locationsalem,al

Posted 26 February 2013 - 07:12 PM

nice,detailed write up sir
  • B.E.McAllister and jayrod like this

#5 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 27 February 2013 - 12:19 AM

Interesting...I'm going to have to get more in depth into using VTS. I have been doing 9 patches completely different, maybe this will help. Thanks

  Exodus-Sig%204.png


#6 ZKK007

ZKK007

    That Kiwi Guy

  • Developer
  • 1,687 posts
  • LocationDallas, TX, USA.
  • Current Device(s):XT912, XT907

Posted 27 February 2013 - 02:20 PM

Good write up! This is how I've been doing it in the past after 24v helped explain .9's to me :) Before that I could recolor, but images were all over the place! :P

bWyLE9l.jpg

 

Donate? Click on signature :)


#7 Maxxaholic

Maxxaholic

    Droid Master

  • Members
  • PipPipPip
  • 628 posts
  • LocationWashington, USA

Posted 27 February 2013 - 06:08 PM

Great write up. Someday I may get into theming.

#8 Guest_24v_*

Guest_24v_*
  • Guests

Posted 27 February 2013 - 06:38 PM

Here is a good explanation of how 9 patch images work, and what the guides do.
http://developer.and...html#nine-patch

And here is a good image showing them.

Posted Image
  • jayrod likes this

#9 jp1044

jp1044

    DEVELOPER

  • News Writer
  • PipPipPipPip
  • 1,104 posts
  • Twitter:@jp1044
  • Google+:jp1044@gmail.com
  • LocationColorado
  • Current Device(s):MOTO X Developer Edition, Droid RAZR HD (backup)

Posted 27 February 2013 - 06:42 PM

Nice writeup! Will definitely be referencing this.

If you feel the urge to donate to me, you can do so here -> Donate

#10 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 27 February 2013 - 07:08 PM

Here is a good explanation of how 9 patch images work, and what the guides do.
http://developer.and...html#nine-patch

And here is a good image showing them.

Posted Image


Thanks for that..I have looked for something like that for a while


 

 

 


#11 tucstwo

tucstwo

    www.drdevs.com

  • Administrator
  • 14,435 posts
  • Twitter:tucstwo
  • Google+:tucstwo@gmail.com
  • LocationNJ
  • Current Device(s):LG G3 VS985, Nexus 7 (flo)

Posted 28 February 2013 - 06:37 AM

Moving to theming how-to (new section)

Visit DRDevs.com hosting site for all official Droidrzr.com ROMs, Apps, GApps and other mods/files!!
Please PM me if you need help!
I will be hosting AOSP-Based ROM GApps packages!
Download the most Up-to-Date GApps Packages for AOSP ROMs from me here!


#12 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 04 March 2013 - 06:19 PM

My problem with 9 patches stems from transparency. On my new theme I'm trying to modify text boxes and some other things and getting errors. Is there a rule for setting the alpha of a pixel next to the black borders? Some sort of allowable threshold perhaps?

Sent from my DROID RAZR using Tapatalk 2


  Exodus-Sig%204.png


#13 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 05 March 2013 - 03:24 AM

What are you using to edit images?

Sent from my Flying Spyder that likes jelly beans


 

 

 


#14 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 05 March 2013 - 03:30 AM

Also..these may help understand how to edit with the shadow/ glow effects..I break them down into 3 layers..

Attached File  uploadfromtaptalk1362484624501.jpg   72.77KB   25 downloads

Attached File  uploadfromtaptalk1362484635941.jpg   73.43KB   27 downloads

Attached File  uploadfromtaptalk1362484655251.jpg   79.36KB   27 downloads

Sent from my Flying Spyder that likes jelly beans


 

 

 


#15 usmcamgrimm

usmcamgrimm

    Berserker

  • Developer
  • 958 posts
  • Twitter:@usmcamgrimm
  • LocationMassillon, OH
  • Current Device(s):VZW G3

Posted 05 March 2013 - 09:40 AM

What are you using to edit images?

Sent from my Flying Spyder that likes jelly beans


I've been using Photoshop and paint.net depending on the image. I followed this thread to edit through VTS and had the same issue.
Trying to work on some semi-transparent boxes and stuff for the theme I'm working on.

Sent from my DROID RAZR using Tapatalk 2


  Exodus-Sig%204.png


#16 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 05 March 2013 - 10:00 AM

OK...here is my secretest non secret ...Open them in Image Ready then import them into Photoshop


 

 

 


#17 Guest_24v_*

Guest_24v_*
  • Guests

Posted 05 March 2013 - 10:21 AM

Or edit them in fireworks. Photoshop and gimp have problems with indexed png's.

#18 jayrod

jayrod

    Bacon, Cheese & Mod Connoisseur

  • Moderator
  • 6,525 posts
  • LocationWilmington NC
  • Current Device(s):Taimen

Posted 05 March 2013 - 10:35 AM

Never tried fireworks.. and this has been the only thing I've used Image Ready for.

Sent from my Icarus HD Edition Bionic


 

 

 


#19 mrlolli

mrlolli

    Put Member Title Here

  • Developer
  • 761 posts
  • LocationNowhere

Posted 05 March 2013 - 01:14 PM

hey, jayrod...thanks an awful lot for your writeup. i have been studying your op for a couple of days now, and i finally got it to work :D . Thanks for spelling it all out the way that you did so dummies like me can do this too :lol:
  • jayrod likes this

2qa7hv4.jpg

Nice job on the signature, jl90...thanks! 


#20 jp1044

jp1044

    DEVELOPER

  • News Writer
  • PipPipPipPip
  • 1,104 posts
  • Twitter:@jp1044
  • Google+:jp1044@gmail.com
  • LocationColorado
  • Current Device(s):MOTO X Developer Edition, Droid RAZR HD (backup)

Posted 06 March 2013 - 05:23 AM

Or edit them in fireworks. Photoshop and gimp have problems with indexed png's.


Ooooooohhh I just got Fireworks not too long ago. Might have to try it out on some pngs :)

Sent from my Nexus 4 using Tapatalk 2



If you feel the urge to donate to me, you can do so here -> Donate




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users