I love HTC sense3.0's weather widget very much , so , I want to move it to MT3Gs,but the resolution is a big problem , I'm not a Dev. who can tell me , how to change the resolution ?
what tools is needed ?
thank you !
You would have to decompile the .apk using apoktools, re-size all the images in the res/drawable-hdpi folder, and put the re-sized images into a new folder in the res folder called drawable-mdpi, then probably edit the .xml files within the decompiled .apk to use the images in the drawable-mdpi folder on mdpi devices, and adjust the values used for the screen position of drawable elements, so that they are in the correct position on the screen when they get displayed, and not skewed all over the place ( they would be, as the .xml's were written with the expectation of being used on a hdpi device, so the screen positions are different for the screen size).
Even with all this done, there are quiite possibly other .xml edits needed, and lots of trial and error involved. This is only a rough outline of what needs done, theres probably minor details left out, but you can see that this isn't a job for a beginner, or anyone who doesn't have alot of time to invest in editing, testing, editing, testing...
Good luck, and if you decide to undertake this as a project, expect it to take a long time, so plan to do it in free time each night, and to try and enjoy the process and see it as a learning experience, a skill builder.
If you're already experienced in modding and such, please don't be offended at me explaining as if you're a newbie, the tapatalk app doesn't show titles or post counts.
Sent from my T-Mobile myTouch 3G Slide
huggs said:
You would have to decompile the .apk using apoktools, re-size all the images in the res/drawable-hdpi folder, and put the re-sized images into a new folder in the res folder called drawable-mdpi, then probably edit the .xml files within the decompiled .apk to use the images in the drawable-mdpi folder on mdpi devices, and adjust the values used for the screen position of drawable elements, so that they are in the correct position on the screen when they get displayed, and not skewed all over the place ( they would be, as the .xml's were written with the expectation of being used on a hdpi device, so the screen positions are different for the screen size).
Even with all this done, there are quiite possibly other .xml edits needed, and lots of trial and error involved. This is only a rough outline of what needs done, theres probably minor details left out, but you can see that this isn't a job for a beginner, or anyone who doesn't have alot of time to invest in editing, testing, editing, testing...
Good luck, and if you decide to undertake this as a project, expect it to take a long time, so plan to do it in free time each night, and to try and enjoy the process and see it as a learning experience, a skill builder.
If you're already experienced in modding and such, please don't be offended at me explaining as if you're a newbie, the tapatalk app doesn't show titles or post counts.
Sent from my T-Mobile myTouch 3G Slide
Click to expand...
Click to collapse
How kind you are £¡ I got it , great thanks to you
Related
I am very seriously interested in designing skins or themes or whatever for my blackstone but there really is nowhere to start. There are no definitions for the things people talk about and it makes it super hard to break into this developers world.
But I guess I am looking for a few answers and tips about Themes.
What is the Top Curtain?
What is the Bottom Curtain?
Flip Background? Flip Digit?
Slider?
How to create Icons for the slider and the task bar at the top?
Details like pixels sizes, formats and ect.
Just anything about themes.
Is there a book about this? haha.
I will probably be yelled at for this post and referred to the search function but from what I have seen, there is nothing about this topic. Hmmm, Maybe this is something to add to the Wiki? These are probably the questions developers do not want to answer because this is all probably fudamental and kindegarten but I have to try.
Thanks to anyone who can post some links to guides or some tips and answers.
I feel retarded.
Don't feel retarded.
If someone is retarded it's the Microsoft and HTC programmers who figured that absolutely everyone will just love their default colors / icons / wallpapers, and so they didn't provide any support for making new skins and themes.
To cut the long story short - yes, it can be done, and yes it's kindda frustrating but if you're serious about it and you know how to work with graphics, I'm sure you'll be able to figure it all out.
First of all, you need a Manila editor. There are a few, I recommend CFC GUI and M9EDITOR, the first one being intended only for graphics, and the second one having the same but also additional things too. If you only want to skin the graphics, then you'll be ok just with CFC.
Then go to your device Windows folder and copy over to your PC any file that ends with _manila. There's like a few thousand of them, so it will take a while.
Run CFC GUI and point it to the folder where you copied all those _manila files. It will then show you a list of all the files that contain ANY graphic elements.
Browse it through and you'll soon recognize the familiar graphic items from your device. You will also notice there's a "Save as PNG" option - that will create a transparent PNG in the appropriate resolution, which you can then open up in Photoshop, edit, colorize or whatever you like.
When you're done, you save the PNG, go back to CFC, select "Replace with", load your newly edited PNG, press "CFC Compress" and voila!
The 12345_manila file you just edited has been updated!
Now you take the 12345_manila file, copy it back to Windows folder and restart TF3D.
You will see your new graphic has been integrated into the system.
First of all, Thanks a Ton!
Thousands of them eeeek. Does it take a long time to make a theme?
No problem... I've just started messing around with all of this, so I'm no pro skinner either.
Does it take long... Well, depends on your skills. And also on what kind of extent you want to cover with the skin.
The biggest problem is that most of the graphic files are a complete mess. There's no logical pattern, and they've managed to complicate things beyond reason - for example, some of the most common graphics you see on the screen are actually made out of two or more separate bitmaps, and it's up to you to figure out what is what, etc.
For example, when you click on the flip-clock on your Home screen it glows up in green - well that "green background" is made out of THREE images!
Also, some of the files are coded into Manila format, while others are just plain BMP or PNG or even GIF. Then there's a lot of stuff that's controlled through XML files...
So, when you start with all this, keep your ambitions modest - it's not something you can overcome in one day. But it can also be very rewarding
Took like 50mins to copy over. Wow. I opened it up in CFC and I can not believe anyone who has made a theme. I am trying to figure out a pattern with the file names. Sooo confusing but thanks a ton again for your help. Now I just need to find a graphics editor.
Shival said:
Took like 50mins to copy over. Wow. I opened it up in CFC and I can not believe anyone who has made a theme. I am trying to figure out a pattern with the file names. Sooo confusing but thanks a ton again for your help. Now I just need to find a graphics editor.
Click to expand...
Click to collapse
that is why i am full of respect for these peeps...
Rozenthal said:
Don't feel retarded.
If someone is retarded it's the Microsoft and HTC programmers who figured that absolutely everyone will just love their default colors / icons / wallpapers, and so they didn't provide any support for making new skins and themes.
To cut the long story short - yes, it can be done, and yes it's kindda frustrating but if you're serious about it and you know how to work with graphics, I'm sure you'll be able to figure it all out.
First of all, you need a Manila editor. There are a few, I recommend CFC GUI and M9EDITOR, the first one being intended only for graphics, and the second one having the same but also additional things too. If you only want to skin the graphics, then you'll be ok just with CFC.
Then go to your device Windows folder and copy over to your PC any file that ends with _manila. There's like a few thousand of them, so it will take a while.
Run CFC GUI and point it to the folder where you copied all those _manila files. It will then show you a list of all the files that contain ANY graphic elements.
Browse it through and you'll soon recognize the familiar graphic items from your device. You will also notice there's a "Save as PNG" option - that will create a transparent PNG in the appropriate resolution, which you can then open up in Photoshop, edit, colorize or whatever you like.
When you're done, you save the PNG, go back to CFC, select "Replace with", load your newly edited PNG, press "CFC Compress" and voila!
The 12345_manila file you just edited has been updated!
Now you take the 12345_manila file, copy it back to Windows folder and restart TF3D.
You will see your new graphic has been integrated into the system.
Click to expand...
Click to collapse
Yet more thanks for this post!
Very useful and informative.
(and a refreshing change from the "do a search" unfriendliness that often befalls these forums ).
Hey guys, just getting into theming and got a few questions. I've been around the block more than a few times with skining, designing and all. Use to own and run a rather large sized graphics forum and skined god knows how many skins for ipb and vb boards. So I thought to myself that theming my phone should not be any different, just minus the html and css.
Now for my questions
filename.9.png, I take it that these images are ones that are tiled, correct? And is the ".9.png" is something that the system sees and says, "ok this needs to tile this way" or is it an actual file extension? If so how does one handle them in photoshop?
Thanks in advance
Posted by some phone named the Epic.
They're not tiled, they're stretched. As for using them with photoshop, there are two routes. You can add a one pixel transparent border around your image, then add pure black in the needed areas (described momentarily) or you can download the android sdk, go into tools and use the draw9patch program to make your .png into a .9.png. Now, the way it works for stretching is that the bottom and right sides of the image determine how the image stretches (play around wit draw9patch to see this best), while the left and top determine where the center of the image is and where text will be placed, if I'm not mistaken. Modifying any .9.png file will immediately ruin it and the borders will need to be re-added. However, you can simply steal them from other themes (I reccomend IDIOT, check the samsung mesmerize forums).
If you modify it, if must be recompiled not simply placed back in the apk with 7zip.. because the borders aren't seen after they are compiled... so either decompile with apkmanager and edit and recompile... or pull the 9patch with 7zip edit compile it alone with xultimate9 and put it back in with 7 zip
Sent from my SPH-D700 using XDA App
Thanks for all the info you two. I'll have to look into all that when I get home from work.
Posted by some phone named the Epic.
I really love the new graphic style in Android ICS, especially for the blue fades that replaced those horrible plain black backgrounds in almost every list/app/screen. However, the app drawer background is still completely dark, and I was wondering...is there a .png or a file in the android framework, that lets us customizing the app drawer background opacity or better, the entire drawer background image?
The settings blue fade background would be a lot better of plain black, for example. Can you at least point me to the right direction? Thanks in advance!
The app drawer is part of the launcher, I believe, so poking around inside the launcher's .apk file would probably be a good place to start. That said, I probably know less about modding Android than you do, so I could be dead wrong...
Actually, I think this too - despite I talked about the 'framework'. The problem is, that a common android application is made up by a res folder, full of .pngs and pictures, and a lot of other folders that contain all the .xmls for the app itself, that I never achieved to edit in any way. And because I'm sure the drawer background is part of a style .xml, probably being defined by a string such as "background_color=0,0,0/transparency=0" (example taken by some .xmls edited on PC, I actually have no idea of how these things are written in android), it could be useful to know where to find something like that or how to edit this kind of values ;P
C'mon, I can't believe everyone actually never tought of changing the drawer background! I mean...this is one of the first feature that you -devs of several alt. launchers- will have to add, and so far (think to ADW) it has not been so difficoult! So...please, if you know something on that, point me to the right file or config!
I downloaded Launcher2.apk, extracted it, and gone through each single file inside. And "Drawer Layout" or "Drawer Background" aren't there. What could I do next?
Looking at the Launcher2 source, it is a xml file in the drawables folder named wallpaper_gallery_background.xml.
Sent from my Galaxy Nexus using xda premium
wallpaper_gallery_background.xml - it was one of my search result for "backgound" keyword. But I went over it, since I think is related to the wallpaper picker (the little gallery of wallpapers at the bottom of the wallpaper selection screen...). Any other ideas?
p.s.: Happy that finally someone is paying attention to this topic... xda doesn't help people with a few posts or subscribed only some months ago (and that doesn't implies that they're newbie or dumb è_é) in ANY WAY... ;D I think this would be a very appreciated feature, this thread has a lot of views in just 1 day and a half!
I will play around with the source and get back with you.
Sent from my Galaxy Nexus using xda premium
Only thing I could find in Launcher2 is in drawable-xhdpi. The first PNG is apps_customize_bg.png and its a black image. Didn't see any XML files related to app drawer, which leads me to think its all hidden in smali code or another apk.
Sent from my Galaxy Nexus using XDA App
@AndHel Great! That's the answer I was waiting for! Thank you so much...I hope we'll be able to find something relatively easy to handle ;D
BTW, it would be very interesting knowing a bit more about Android decompiling and modding...if you want, explain me (even very quickly) how will you reach certain files/configurations, if you'll do, when you'll do.
@mb02 Thank you for your efforts too, I hope you're wrong but I fear you're right...absolutely not even a single word that remembers the "app drawer"! Maybe with your patience, we'll find out more!
...and I keep searching around /system for any kind of thing graphic-related to this damned drawer ;P
ledoweb said:
@AndHel Great! That's the answer I was waiting for! Thank you so much...I hope we'll be able to find something relatively easy to handle ;D
BTW, it would be very interesting knowing a bit more about Android decompiling and modding...if you want, explain me (even very quickly) how will you reach certain files/configurations, if you'll do, when you'll do.
@mb02 Thank you for your efforts too, I hope you're wrong but I fear you're right...absolutely not even a single word that remembers the "app drawer"! Maybe with your patience, we'll find out more!
...and I keep searching around /system for any kind of thing graphic-related to this damned drawer ;P
Click to expand...
Click to collapse
In every iteration of Android prior, including skinned versions (Sense, TW, blur) the app drawer coding and images resided in the launcher (Rosie, Launcher, etc). The naming, however, wasn't ever "app drawer" but "all apps" as drawer was never he official term for the all apps view. Rosie launcher had multiple XML files in the Rosie.apk res/layout folder that dealt with this "all apps" as well as related images. With the absence of anything related to apps in this Launcher2.apk, I feel as though everything was moved to smali or in another apk, unless they cleverly hid it in another XML in Launcher2.
Sent from my Galaxy Nexus using XDA App
It's within /res/layout in Launcher2. The file is called apps_customize_pane.xml
Just change the 2 values ff000000 into something else, i.e. bb000000 to make them slightly transparent.
It sounds promising...i thought that file was for a screen called "apps customization"
...may I ask which other letters could I use to increase/decrease opacity? AFAIK, numbers are for color and letters are for alpha...right?
Anyway, thanks so much for this solution! - I'll give it a try as far as I can. BTW, no way to replace a colour with something better, like a .png? Maybe just removing that string, and replacing it with something slightly different...
Edit: I'm having troubles in editing that .xml. Apktool fails decompiling Launcer2.apk probably because I'm using an old version of the android SDK, and this means...that I'm stuck at unreadable .xmls. I'm waiting for the SDK manager to have all updates installed, and then I might be able to finally "undress" this damned drawer ;P
This is likely harder than you expect. A few technical notes (and yes it's possible this will be a Nova feature in the future but it's not officially planned at this time).
1) App drawer is indeed called "AppsCustomizePagedView"
2) When viewing the app drawer, the launcher disables the wallpaper from showing (I believe as an optimization). I think if you made the drawer fully transparent you would see (in order from top to bottom):
Drawer
Smaller sized home screens
Black background
If you're editing source you can prevent the black background by changing updateWallpaperVisibility(). To hide the home screens you'd probably have to change the animation code in showAppsCustomizeHelper which could be a bit tricky.
[email protected] said:
This is likely harder than you expect. A few technical notes (and yes it's possible this will be a Nova feature in the future but it's not officially planned at this time).
1) App drawer is indeed called "AppsCustomizePagedView"
2) When viewing the app drawer, the launcher disables the wallpaper from showing (I believe as an optimization). I think if you made the drawer fully transparent you would see (in order from top to bottom):
Drawer
Smaller sized home screens
Black background
If you're editing source you can prevent the black background by changing updateWallpaperVisibility(). To hide the home screens you'd probably have to change the animation code in showAppsCustomizeHelper which could be a bit tricky.
Click to expand...
Click to collapse
i managed to get the app drawer transparent and indeed a black background..
but cant find updatewallpapervisibility anywhere
where can it be found? is it a xml or in a xml ?
thnx!
For that you have to edit source files and recompile, it's not just an XML edit.
Sent from The Past into The Future via The Present.
Milamber33 said:
For that you have to edit source files and recompile, it's not just an XML edit.
Sent from The Past into The Future via The Present.
Click to expand...
Click to collapse
ok!thnx!
i found the trebuchet source on gethub
i managed to change the source so the black screen and all is gone and the drawer is transparent.. but i cant test it because i dont know how to compile it
can you tell me ? thnx
There are plenty of tutorials on setting up an Android build environment and compiling the source floating around. They will be far more detailed and useful than I could be.
Sent from The Past into The Future via The Present.
I did it
I made it transparent its on a thread i started
locomain said:
I did it
I made it transparent its on a thread i started
Click to expand...
Click to collapse
Where is the thread?
Im gonna play around with this a bit when I have the chance....
But, using APKtool to decompile or recompile is very similar....
If you already have apktool all setup with your Roms framework file, and you already decompiled the file...... to recompile, all you have to do is use the command "apktool b foldername"
where folder name is the folder that it decompiled the apk to (likely Launcher2)
While I was researching how to go about creating my own theme I noticed quite a few different approaches to dealing with the infamous .9.png image files. I was curious about why they were so difficult before I attempted to edit them so I did a lot of reading on these boards but when it came to actually doing the editing I found it quite simple. With all my reading and after talking to a few other themers this method isn't mentioned anywhere that I know of so I figured I'd post a tutorial on how I edit them.
First off, this tutorial assumes that you have a working knowledge of how to use image editing software (I use GIMP) and apk multi-tool/manager (or apktool).
Things you need:
1. Gimp or another image editing software (this tutorial is based on Gimp)
2. APK Multi-Tool/Manager or apktool (tut. is based on APK Multi-Tool)
3. The apk that contains the images you wish to edit
4. TIME and PATIENCE!
Ok, first off you need to be able to see the ever important 1px border in the .9.png you want to edit so this requires you to decompile the apk that contains the images to be edited. Therefore go ahead and decompile the apk. Once you have that done you can go ahead and minimize the script window so you can work on them.
Now, go into the folder named "projects" and in there you'll find your decompiled apk. Right click on the folder that contains the images you want to edit and click on "Copy". Now move to your desktop (or wherever you want to save the folder) and "Paste" the folder there.
Double click on the folder and navigate to the .9.png you are wanting to edit. Right click on that image and select "edit with Gimp".
Once the image is open in Gimp "zoom" in to 800% so you can actually see the 1px border and use the rectangle marquee tool to select everything inside that border. Then you can make any edits you'd like to the image.
Once done editing the image, and if it's not still selected, go back to the marquee tool and, once again, select everything inside that 1px border. Right click over the image and select EDIT>CUT.
Close the image by clicking on the "X" in the top, right corner but when the window pops up asking if you want to save your changes click "DON'T SAVE". This is the important step!!
Go back to your folder where the original image is located that you are wanting to edit, you'll notice it went back to it's un-edited state. This is what you want. Open the same image file again in Gimp and again, zoom in to 800% so you can see the border.
Select everything inside that border using the rectangle marquee tool and then hit the delete key on your keyboard. That should clear out the image.
Right click on the image again and select EDIT>PASTE. You're edited image should show up where you cut out the old one.
Make sure that the one pixel border is NOT inside the dotted selection line and your pasted image isn't over the 1px border all the way around.
Anchor your image by clicking anywhere outside of it in the same window. (you'll see the little anchor show up by your cursor when you can click to anchor your pasted image) Now the hard part is done!! All you have to do is close the image you edited by clicking on the "X" again and this time you want to hit SAVE.
Voila.. your .9.png is edited and your 1px border is left untouched. Repeat the above steps on all the .9.png files you want to edit and when you're finished your editing move the folder from wherever you saved it back into the projects folder of apk multi-tool and compile your apk.
This is how I've done all my .9.png files and I have never had any errors!
Good luck and Happy Theming!
ttfn
CDL.
Thank you CDL for sharing what you have learned... this is what xda is all about...
Yea it's a lot easier if you just decompile the apk files then edit them and recompile, just make sure not to touch those borders unless it's what you want.
If your only trying to change one file and don't want to go through the whole process I recommend decompiling the apk and just sticking the one image you wanted to edit into XUltimate and converting the image by itself so you can easily place it back into your apk without the compiling, especially if you get errors.
Great tutorial, thanks for posting this.
So what's the trick with the mms bubbles .9s? Something goes wrong when I try to edit those, I had actually created all new custom bubbles with PSCS4 for sent, pressed, etc etc. The result was miss aligned text with bubbles...the text was outside instead of inside, and never could make it work....aaaahhhhhh! All that work! Lol
XML edits and all other edits worked fine, but not those damn bubbles!
Oh, I used draw9patch to re-add the .9 to the PNG.
Sent from my SPH-D710 using Tapatalk
Duce HD2 said:
Great tutorial, thanks for posting this.
So what's the trick with the mms bubbles .9s? Something goes wrong when I try to edit those, I had actually created all new custom bubbles with PSCS4 for sent, pressed, etc etc. The result was miss aligned text with bubbles...the text was outside instead of inside, and never could make it work....aaaahhhhhh! All that work! Lol
XML edits and all other edits worked fine, but not those damn bubbles!
Oh, I used draw9patch to re-add the .9 to the PNG.
Sent from my SPH-D710 using Tapatalk
Click to expand...
Click to collapse
Honestly, I'm not sure although it sounds like your 9patch isn't working correctly... and since I have never tried to mess with them I can't tell you how to fix it.. sorry.
What I'd do if I were you is use the original bubble image as a basis for your new images. I'm sure as long as you keep your custom bubble inside of those borders it should show up properly. If you wanted to you could create a separate image all together and then just cut and paste inside the original 1px border? Dunno if that'd work but that's something I'd try. Just remember, it won't work at all if the original image isn't decompiled first.
Duce HD2 said:
Great tutorial, thanks for posting this.
So what's the trick with the mms bubbles .9s? Something goes wrong when I try to edit those, I had actually created all new custom bubbles with PSCS4 for sent, pressed, etc etc. The result was miss aligned text with bubbles...the text was outside instead of inside, and never could make it work....aaaahhhhhh! All that work! Lol
XML edits and all other edits worked fine, but not those damn bubbles!
Oh, I used draw9patch to re-add the .9 to the PNG.
Sent from my SPH-D710 using Tapatalk
Click to expand...
Click to collapse
Duce send me ur bubbles and Ill fix em. Sounds like you moved the patches.
Sent from my SPH-D710 using xda premium
ssconceptz said:
Duce send me ur bubbles and Ill fix em. Sounds like you moved the patches.
Sent from my SPH-D710 using xda premium
Click to expand...
Click to collapse
That would be great, thanks for the help! I'll get back on them this weekend and send them over.
Crazy, thanks for the advice! They work fine if I change the hue of the originals etc, but I didn't like the shape, so I made them squaresh, kinda of like the ones included in the ICS theme, but with transparent center. So pretty much a thin border etc..I thought it looked cool.
Sent from my SPH-D710 using Tapatalk
i must be stupid or something
i dont understand
can someone post a video
When I first started porting themes and editing colors, I manually readded all lines. There's A LOT of .9s in framework-res alone, so it was torture. This method is the one I use now and I thank you for letting others know so they don't have to spend so much time like I did.
This method def works thanks for making it so easy! Although the apkmultitool Windows Version 1.0.2 doesn't want to compile for it's life. Downgraded to 1.0.1 works great now...wish i tried that first after like 30 mins of playing with stuff SMH
Glad this actually helped someone out! I didn't see any reference to this method anywhere on here when I was first searching.. but I do have to admit it wasn't a thorough search
ttfn
CDL.
This first post is about using Adobe Illustrator
I figured I would share a little knowlege of my designing and how when i came to android it helped out in making theming my rom so much quicker
ATTACHED AT THE BOTTOM IS A STARTER LAYOUT TO HELP MAKE LIFE EASIER FOR YOU!!!!!! :fingers-crossed:
THEME/DESIGN CHEAT SHEET
INDEX1. Tools..........................................................................
2. Begin.........................................................
3. The Setup...........................................
4. The Artboards.........................................................
5. Adding And Modifying Multiple Artboards.....................
6. Saving your Icons.................................
7. Layers, Colors, And Strokes................................................
8. SELECTING MULTIPLE LAYERS AND ICONS TO CHANGE COLOR AT ONCE.
9. TRACING TOOL...................................................
10. Keyboard shortcuts coming soon
1.TOOLS
First remove Adobe Photoshop and Fireworks from your playlist. To me these tools are crap or for short cuts. lol but short cuts coming soon
"Adobe Illustrator" and some quick learning or know how.
I'm not going to go over every single tool because if anyone knows illustrator lol its just way to many. Im just going to get to the main ones in this case in point.
2. BEGIN
Adobe Illustrator is one of the best graphic design tool I've ever used Ever. Your images would no longer start of as just a pic anymore. Now its time to learn vector.
Vector graphics is the use of geometrical primitives such as points, lines, curves, and shapes or polygon(s), which are all based on mathematical expressions, to represent images in computer graphics. "Vector", in this context, implies more than a straight line.
Vector graphics is based on images made up of vectors (also called paths, or strokes) which lead through locations called control points. Each of these points has a definite position on the x and y axes of the work plan. Each point, as well, is a variety of database, including the location of the point in the work space and the direction of the vector (which is what defines the direction of the track). Each track can be assigned a color, a shape, a thickness and also a fill. This does not affect the size of the files in a substantial way because all information resides in the structure; it describes how to draw the vector.
WIKI^^^^^ thanks
In short this means that all the res you would lose resizing images in Photoshop or Fireworks wouldn't be lost in Adobe illustrator because it use the vector format
When designing in vector you have so many capabilities that any format doesn't, like proper shading, 3D effects and the easiest way to change the color of multiple vec's at once on the same artboard.
The art board is the space and area in which your design would be held on. It's the only part that would be use to create the png, jpeg, etc. Anything on the edge or off of the artboard wouldn't come up at all in the image. This is convenient to me because I like to have almost the entire framework or system res themed perfectly. Meaning all color and tints and shade all match to the T. You also can line up anything to the artboard or to an object perfectly, so no more miss shaped png's lol.
There's also some tools there that you also seen in Photoshop and Fireworks.
My favorite part of adobe illustrator is the Effects section. This is how to avoid messing up when trying to make your own shading, shadows, 3D effects, glows and more. Trust me, when you get a taste of the effects your going to be trying anything!!!!!!
3. THE SETUP
Now it's time to prepare.
First you need to start a new project. Go to file and select new. Give your project a name. i prefer the name of the rom.
New documents profile - Don't change this because it going to change to custom by itself.
Number Of Art Boards - Keep this at 1 (im going to tell you how to add more)
Size - don't touch anything after size, just make sure Units Say Pixels
Advanced(drop down the menu) - There are 2 color mode RGB - and CMYK. Rgb modes give your stage for the artboards a white background as if it was on paper. Cmyk leave it empty or transparent like in a PNG. It's your choice on which you want.
Raster Effects - Make sure it's at High 300 PPI
4. THE ARTBOARDS
THERE IS A STARTER KIT FOR ARTBOARDS ATTACHED
The Artboard is pretty much a stage. This is where all the magic happens.
Now when your designing any icon you should make sure you know the sizes. Knowing all the sizes can be a hassle right, but this is where it gets really easy. Say you have 30 icons that are 72x72 if you have a project set up with multiple art boards you would be fine. because once you have made all the icons the save size is just a drag and click away.
5. ADDING AND MODIFYING MULTIPLE ART BOARDS
If you noticed which I'm sure everyone has, that some images match the size of other. This is where it gets very easy to make save and do it in a quick fashion.
Go to "File", scroll down to Document Setup and click on it. A window will appear don' worry about anything it the window unless you want to change things yourself. Just go to Edit artboard. You will notice that the screen has turned grey and now you artboard is the only thing thats white. If you hover over the grey you will see that your drag symbol has turned into a square. Us this to add more artboards. Click and hold on to the grey area and drag your mouse. You will see that you just added another artboard. To resize the artboard the Width which is labeled W and the Height which is labeled H will be in the upper right hand corner. Click on the artboard you want and start to reshape it according to the size you need. You can also drag the artboards to which ever place you want it to sit. Once done just click on the mouse pointer icon on the right and everything will be back to normal.
6. SAVING YOUR ICONS
When saving your icons make sure that where ever your project is you have it as the target location when saving. On your first save you should locate the folder and where the original file is and replace and save it. No need to type in the name. If you know where it is alphabetically, then just scroll to it, click on it and the name should appear in the File name box. If it tell you the file already exist, Do you want to replace? click Yes, but make sure you have a backup copy of the folder just in case. Also make sure you are on the right art board when saving. All it takes is a click on the artboard and you would be just fine.
7. ANCHORS, LAYERS, COLORS, AND STROKES
You ever find it a very long task to make all your icons the same or correct color. Or in short make them match. Well in vector format you can change all of the icons color at once. It has to be selected though. I know you wondered what the white arrow was for, well wonder no more. The white arrow it to select a layer, stroke, or any anchor on the vector image.
ANCHOR - this is single or multiple dots on a vector image that controls the path, line and/or stroke.
Layer is a section of the image thats either below, side by side, or on top of another image. You can change positions by right clicking on the image and use arrange to move its position.
Colors well you know what these are, But Illustrator has three different kind Grey Scale, RGB and CMYK (will be explained later)
Strokes are pretty much a line. It can be around the image, by itself or combined to create an image.( Will Be explained on how to manipulate a stroke in a image.)
To make it short grab the white pointer and have at it lol.
8. SELECTING MULTIPLE LAYERS AND ICONS TO CHANGE COLOR AT ONCE.
We all know images have layers but say you have several vector images that are 2 colored icons or more colors just stick with 2 for a sec. If you go to the image with the white pointer, You can click on the one color on the image and change it without making a mistake and turning the whole icon one color. Now to select more than one of the icons, say all of them where blue and green. Click on the green part of the icon. Now go to the top and click on "Select" scroll down to same. When the menu pop out, you will see that there are many ways to select multiple types of images. For right now click the one that says "Fill Color". All of the icons will be selected that has that same shade or ton of green. (note you must have them already colored in to match in order to select same). Now when you change the color they all will adjust together to make them Perfect.
9. TRACING TOOL.
This tool i would recommend that you stay away from and just design your stuff from scratch. Now I'm about to contradict myself lol but this tool is so f'ing handy if used right.
When tracing and image your pretty much turning it into a vector image with paths, strokes, and anchors. Its pretty much a conversion tool but difficult to use. If you have a colorful image that's when it gets hard. But if you have like a solid color shape its kinda easy.
Say like you have a picture of a solid black triangle in .png and .jpeg because you didn't feel like drawing one. Drag it to the artboard. You will see a button up top that wasn't there b4 called "Live Trace". Click on it and you will see your triangle go from a rough .png/.jpeg image to a smooth vector format triangle.
Now it gets hard.
If you have a multiple color image there are ways to trace it to a vector but not all get it the way you want. Just play around with it a little and you will see what i mean. The traces I'm talking about are in the drop down menu right next to the "Live Trace" button. You will see a slim button with a down pointing arrow.
10. Keyboard short Cuts(coming Soon)
To Be Continued - meaning im Sleepy lol
Photoshop Short Cuts
Photoshop Shortcuts
Index
1. .9 shortcuts Without Decompressed png
2. Batch File Opperation
Adobe Fireworks Shortcuts
Adobe Fireworks Shortcuts
even more
My biggest problem would be the dreaded 9patch
Sent from my SPH-D710 using xda premium
gtuansdiamm said:
My biggest problem would be the dreaded 9patch
Sent from my SPH-D710 using xda premium
Click to expand...
Click to collapse
dreaded 9patch? what is so hard about .9's
rujelus22 said:
dreaded 9patch? what is so hard about .9's
Click to expand...
Click to collapse
Lol yea thats the same thing i was thinking but, Im going to put a short cut for .9 patches for people who don't know how to do it. For Photoshop and Fireworks. But im not going to go into full details because there are post on here with that. Im just going to explain a quick way without decompressing a .9 png
Dude, this rocks. I will be using this like crazy for sure.
hi, I'm interested in learning how to theme, but I must admit, teaching me may be a pretty big project since the extent of my experience is making themes in UOT Kitchen.
would this tool be a good place to start?
mjs2011 said:
hi, I'm interested in learning how to theme, but I must admit, teaching me may be a pretty big project since the extent of my experience is making themes in UOT Kitchen.
would this tool be a good place to start?
Click to expand...
Click to collapse
yes sir this is the perfect place, while not done, im going to apply all of my knowledge of design to help out
Thanks! I may reach out to you privately as well, because I'd really be starting from scratch.
What would be killer is if we had a reference guide for the names for certain harder to find pngs. Background files and such.