Post Reply

How to draw NinePatch images with Photoshop - .9.PNG

OP xenio2000

4th November 2009, 09:47 PM   |  #1  
xenio2000's Avatar
OP Senior Member
Flag Sassari
Thanks Meter: 22
 
256 posts
Join Date:Joined: May 2009
More
If you want draw a .9.png (NinePatch) image in Photoshop just make your image with a 1px transparent for each border and draw with a pencil 1px size black color #000000 the area you want to use for the content and the stretchable area.

Save it with "save for web" in png-8 or png-24 (if you use a lot of color)
in the option check Transparency, matte none, metadata none.

you can check it with the draw9patch tool in the sdk.
get more info about the NinePatch here: http://developer.android.com/guide/d...raw9patch.html
Attached Thumbnails
Click image for larger version

Name:	NinePatch_Photoshop.jpg
Views:	12224
Size:	92.2 KB
ID:	243414  
Attached Files
File Type: zip NinePatch_example.zip - [Click for QR Code] (56.9 KB, 6072 views)
Last edited by xenio2000; 4th November 2009 at 10:26 PM.
The Following 14 Users Say Thank You to xenio2000 For This Useful Post: [ View ]
4th November 2009, 10:23 PM   |  #2  
Member
Flag Las Vegas
Thanks Meter: 0
 
96 posts
Join Date:Joined: Jul 2009
More
f'n thank you
dude ive been going hard on these .9's and found that making them huge compared to normal is doing better, just dropping it down (resize) from the massive one, to the appropriate filesize yaknow. kinda confusing but hopefully it helps, if i get these down its onnnnnn ..
5th November 2009, 12:06 AM   |  #3  
prash's Avatar
Senior Member
Philadelphia
Thanks Meter: 16
 
565 posts
Join Date:Joined: Feb 2009
Donate to Me
More
Nice job on a quick explaination of it, oddly enough I was just working with the draw9patch tool working on google's own images that they sort of messed up as well (you're not alone if you mess up on these..they're tricky) To show you what difference a small dot makes, here is an example:



I plan on submitting the fixed images to google's open source project. Basically their own .9.png file gets stretched out oddly when bigger.

Hopefully the above image shows you the difference the border makes.
The Following User Says Thank You to prash For This Useful Post: [ View ]
5th November 2009, 04:22 AM   |  #4  
Senior Member
Thanks Meter: 8
 
439 posts
Join Date:Joined: May 2009
so its posible to put 2 dots in top\left.. the question is whats the limit?
can i put 5 dots close to eachother or 3 dots conected togather that make a lilte line..?
5th November 2009, 05:03 AM   |  #5  
prash's Avatar
Senior Member
Philadelphia
Thanks Meter: 16
 
565 posts
Join Date:Joined: Feb 2009
Donate to Me
More
Quote:
Originally Posted by Barina

so its posible to put 2 dots in top\left.. the question is whats the limit?
can i put 5 dots close to eachother or 3 dots conected togather that make a lilte line..?

Actually the MAX is 2 dots, on left and top, anything more and Eclipse starts freaking out and won't compile at all. I used 2 dots because I saw it being used in official android source images for the pull down tray image. Figured if it works for them, it'll work for us.

Also as far as making a LINE, its fine but I'd stay away from full lines on top and left. You CAN get away with it, but it would mean that entire line area of the image will stretch.
5th November 2009, 11:26 AM   |  #6  
Senior Member
Thanks Meter: 8
 
439 posts
Join Date:Joined: May 2009
in some ways stretch could be better.. thanks its good to know
5th November 2009, 05:28 PM   |  #7  
Senior Member
Thanks Meter: 3
 
291 posts
Join Date:Joined: Dec 2007
I have so much trouble with .9s...UGH! This KIND of helps. I dont understand why an extra dot makes a difference or why it's their. So you can't just draw those 2 dots on the left anywhere on the left side? And is there a certain amount of pixels needed to be filled or not filled on the right and bottom?
18th November 2009, 12:14 AM   |  #8  
Member
Flag Las Vegas
Thanks Meter: 0
 
96 posts
Join Date:Joined: Jul 2009
More
bretheren
okay,
so i think i am getting it. the image will be stretched via the black lines? kind of like a guideline type deal huh? if i could figure these damn things out it would make life that much easier!
3rd April 2010, 11:48 PM   |  #9  
nebenezer's Avatar
Senior Member
Thanks Meter: 131
 
3,103 posts
Join Date:Joined: Dec 2009
Quote:
Originally Posted by xenio2000

If you want draw a .9.png (NinePatch) image in Photoshop...

wow, thank you for this thread!!
5th April 2010, 12:48 AM   |  #10  
Senior Member
Thanks Meter: 6
 
179 posts
Join Date:Joined: Oct 2009
Ohhhhhh, THAT'S how it works!

Thank you, xenio2000. Awesome post

The Following User Says Thank You to Super Jamie For This Useful Post: [ View ]
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Top Threads in Android Themes by ThreadRank