FORUMS

The Ultimate Showcase of dBrand Skins

In the search for ways to protect, accessorize, and personalize; a user has many options. One … more

Huawei’s Rapid Rise to Third Place in the Smartphone Race

Huawei has quickly grown to become one of the world’s biggest … more

OnePlus 2 Bares All in New Tear Down Gallery

Last year, the launch of the OnePlus One, dubbed ‘the flagship killer’, visibly … more

Focus – An Attractive But Raw Gallery Replacement

Focus is an attractive new app built by XDA members Liam Spradlin … more

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

257 posts
Thanks Meter: 22
 
By xenio2000, Senior Member on 4th November 2009, 09:47 PM
Post Reply Subscribe to Thread Email Thread
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:	13226
Size:	92.2 KB
ID:	243414  
Attached Files
File Type: zip NinePatch_example.zip - [Click for QR Code] (56.9 KB, 7007 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
 
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
 
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
 
More
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
 
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
 
More
in some ways stretch could be better.. thanks its good to know
5th November 2009, 05:28 PM |#7  
Senior Member
Thanks Meter: 3
 
More
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
 
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
 
More
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
 
More
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 ]
19th April 2010, 03:54 AM |#11  
Senior Member
Thanks Meter: 19
 
More
near as I can figure (and I may be wrong) but the bottom and right side lines denote the entire content area. the single dots on the top and left define the 1- pixel column or row that is allowed to be stretched. Remember, a line of pixels is not a 1- dimensional line, it has width and area as well.

If you have photoshop, try this. Open up any random picture and make a 1 pixel selection (either vertically or horizontally) and then use the free transform tool and scale it in the direction perpendicular to the selection. For example, if you make a 1 pixel selection vertically across the middle of the image, scale it horizontally, you'll see what I'm trying to get at.

I am curious though, will photoshop automatically recognize the black lines on the sides as defining these areas and automatically append the file name to *.9.png?

Read More
Post Reply Subscribe to Thread
Previous Thread Next Thread
Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes