Attend XDA's Second Annual Developer Conference, XDA:DevCon 2014!
5,729,023 Members 41,211 Now Online
XDA Developers Android and Mobile Development Forum

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

Tip us?
 
xenio2000
Old
(Last edited by xenio2000; 4th November 2009 at 10:26 PM.)
#1  
xenio2000's Avatar
Senior Member - OP
Thanks Meter 22
Posts: 256
Join Date: May 2009
Location: Sassari
Default How to draw NinePatch images with Photoshop - .9.PNG

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:	11995
Size:	92.2 KB
ID:	243414  
Attached Files
File Type: zip NinePatch_example.zip - [Click for QR Code] (56.9 KB, 5887 views)
The Following 14 Users Say Thank You to xenio2000 For This Useful Post: [ Click to Expand ]
 
georgegreco86
Old
#2  
Member
Thanks Meter 0
Posts: 96
Join Date: Jul 2009
Location: Las Vegas
Default 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 ..
 
prash
Old
#3  
prash's Avatar
Senior Member
Thanks Meter 16
Posts: 565
Join Date: Feb 2009
Location: Philadelphia

 
DONATE TO ME
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.
Professional Graphic/Web Designer/Front-end Developer
TeamDouche

My Themes: Chroma, Mau5, AlienAqua, SystemForce3, and more.
If you like my contributions..Donate?
The Following User Says Thank You to prash For This Useful Post: [ Click to Expand ]
 
Barina
Old
#4  
Senior Member
Thanks Meter 6
Posts: 436
Join Date: 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..?
כוסדכחמ
 
prash
Old
#5  
prash's Avatar
Senior Member
Thanks Meter 16
Posts: 565
Join Date: Feb 2009
Location: Philadelphia

 
DONATE TO ME
Quote:
Originally Posted by Barina View Post
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.
Professional Graphic/Web Designer/Front-end Developer
TeamDouche

My Themes: Chroma, Mau5, AlienAqua, SystemForce3, and more.
If you like my contributions..Donate?
 
Barina
Old
#6  
Senior Member
Thanks Meter 6
Posts: 436
Join Date: May 2009
in some ways stretch could be better.. thanks its good to know
כוסדכחמ
 
Honestly77
Old
#7  
Senior Member
Thanks Meter 3
Posts: 291
Join Date: 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?
Current:
Phone: HTC EVO 4G LTE
Rom: 100% Stock

Retired:
Phone: HTC Sensation 4G
Rom: OrDroid 8.20 Sense 4 Port.

Phone: HTC Droid Incredible AMOLED
Rom: Kingdom Sense 3.0

Phone: White T-Mobile G1
Rom: SuperEclair 3.0 Beta 4.1
 
georgegreco86
Old
#8  
Member
Thanks Meter 0
Posts: 96
Join Date: Jul 2009
Location: Las Vegas
Default 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!
 
nebenezer
Old
#9  
nebenezer's Avatar
Senior Member
Thanks Meter 131
Posts: 3,103
Join Date: Dec 2009
Quote:
Originally Posted by xenio2000 View Post
If you want draw a .9.png (NinePatch) image in Photoshop...
wow, thank you for this thread!!
this is my signature
 
Super Jamie
Old
#10  
Senior Member
Thanks Meter 6
Posts: 179
Join Date: Oct 2009
Ohhhhhh, THAT'S how it works!

Thank you, xenio2000. Awesome post
Current: Galaxy S2 (i9100), Galaxy Tab 10.1 (p4wifi)
Previous: T-Mobile G1 (dream), HTC Magic 32B (sapphire), Nexus S (crespo)

The Following User Says Thank You to Super Jamie For This Useful Post: [ Click to Expand ]
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes