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 ).
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
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.
I have a theme request for the Galaxy Nexus... I've tried doing this myself, but with my novice level of expertise, I'm afraid it's hopeless...
I really detest the new "Evil Snowman" image that shows up for all contacts without a pic, caller ID, text messages and some icons. I have no idea why Google chose this image. The little robot was much nicer. Anyway, if anyone has the time, I would really appreciate a theme that keeps everything stock, but replaces all the horrible "Evil Snowman" images with something better - a little Android Robot would be great.
I'd be happy to donate to anyone that can do this.
Thanks so much...
if you look a little further back in this forum (or maybe it was in Rootzwiki, not sure which) there were a few themed apks and zips that I found I looked through them but never saw anything that interested me.
I looked too... The problem is that I really just want a stock look, and no snowman. I don't want to change everything else.
Matt_TX said:
I looked too... The problem is that I really just want a stock look, and no snowman. I don't want to change everything else.
Click to expand...
Click to collapse
what img do you want there instead? i can do that for you as i get back home.
tell me what rom/version you're using too
Sent from my Galaxy Nexus
etoy said:
what img do you want there instead? i can do that for you as i get back home.
tell me what rom/version you're using too
Sent from my Galaxy Nexus
Click to expand...
Click to collapse
Honestly, I'm not that fussy... Perhaps a little Android man in a color scheme that goes with the stock look.
The problem is that the snowman is everywhere... Here's a list of places I've seen, there may be more...
- Phone App / Contacts
- Caller ID
- Conference Call
- Messaging
- People App Icon
- People App top of screen
- People App contacts
If you can do this for me, I would be delighted... I will also gladly donate if it works.
BTW, I'm running Stock 4.0.4 for the CDMA/LTE Galaxy Nexus (Rooted and De-odexed)
EDIT: I like the contact image shown here, but perhaps in colors that better fit the stock look:
http://forum.xda-developers.com/showthread.php?t=1467139
I agree with you Matt...although I never thought of the stock 'unknown' contact image as an Evil Snowman, lol.
Anyways, the files that you want to change are in framework-res.apk\res\drawable-xhdpi\ic_contact_pictureXXXX.png. Attached to this post below, you'll find a quick screengrab that I took from my theme's working project folder.
Speaking of which, I will be updating my PCB Blue theme to include the Android robot image (specifically 'ic_contact_picture_2.png') by default, as I also prefer it over the "Evil Snowman"
You should be able to just edit framework-res.apk with WinRAR since you're only replacing normal PNG files. Extract them first, rename them, then drop them back into the .APK...on the other hand, if you like my PCB Blue theme, you can always wait for the next version where that will be done.
** EDIT ** - I am attaching the 3 untouched PNGs from framework-res.apk to make things a bit easier for you. They have been renamed properly to have Android use the robot as default. You therefore shouldn't need to do anything else but pop them into your framework-res.apk (many guides exist on how to edit this file, but the quick version would be to use ADB in Recovery to make changes (pull --> edit --> push --> set permissions) to the file.
Also, it may be possible that the other apps/APKs have their own resource image for an unknown contact. If that's the case, you'll have to dive into those APKs too (I only mod framework-res.apk myself, didn't peek into any others).
Hope that helps.
scar45 said:
I agree with you Matt...although I never thought of the stock 'unknown' contact image as an Evil Snowman, lol.
Anyways, the files that you want to change are in framework-res.apk\res\drawable-xhdpi\ic_contact_pictureXXXX.png. Attached to this post below, you'll find a quick screengrab that I took from my theme's working project folder.
Speaking of which, I will be updating my PCB Blue theme to include the Android robot image (specifically 'ic_contact_picture_2.png') by default, as I also prefer it over the "Evil Snowman"
You should be able to just edit framework-res.apk with WinRAR since you're only replacing normal PNG files. Extract them first, rename them, then drop them back into the .APK...on the other hand, if you like my PCB Blue theme, you can always wait for the next version where that will be done.
** EDIT ** - I am attaching the 3 untouched PNGs from framework-res.apk to make things a bit easier for you. They have been renamed properly to have Android use the robot as default. You therefore shouldn't need to do anything else but pop them into your framework-res.apk (many guides exist on how to edit this file, but the quick version would be to use ADB in Recovery to make changes (pull --> edit --> push --> set permissions) to the file.
Also, it may be possible that the other apps/APKs have their own resource image for an unknown contact. If that's the case, you'll have to dive into those APKs too (I only mod framework-res.apk myself, didn't peek into any others).
Hope that helps.
Click to expand...
Click to collapse
Scar,
The snowman is definitely evil. I feel like he is mocking me with that sideways smile. I don't like it... Hahaha... Just kidding
From what I can tell, the contacts.apk, phone.apk and mms.apk all have their own "snowman" images so I think they would all have to be edited. I know that I can do this using 7-zip, but it's really a bit beyond my comfort level right now. I'm still learning
If I edit the framwork-res.apk, does it override the files in the individual apps? It sounds like it doesnt. BTW, your image with the droid at 45 degrees is fantastic. It is EXACTLY what I'm looking for. Do you have a larger version for to replace the one that shows up with caller ID?
Thanks,
Matt.
Matt_TX said:
Scar,
The snowman is definitely evil. I feel like he is mocking me with that sideways smile. I don't like it... Hahaha... Just kidding
From what I can tell, the contacts.apk, phone.apk and mms.apk all have their own "snowman" images so I think they would all have to be edited. I know that I can do this using 7-zip, but it's really a bit beyond my comfort level right now. I'm still learning
If I edit the framwork-res.apk, does it override the files in the individual apps? It sounds like it doesnt. BTW, your image with the droid at 45 degrees is fantastic. It is EXACTLY what I'm looking for. Do you have a larger version for to replace the one that shows up with caller ID?
Thanks,
Matt.
Click to expand...
Click to collapse
LMAO! You know, the more I look @ him, the more I dislike him too...especially with that sideways smirk...
If you did check those other APKs and see snowman images, then yep, it's quite certain that those APKs will need to be modded. I use WinRAR and it couldn't be easier...one thing you must remember is to choose ZERO or STORE compression when working with 'framework-res.apk' and possibly others. They are not compressed in the ROMs (at least AOKP, which I run).
So, if you edit only framework-res.apk, then it probably will NOT change the caller ID, contacts photos, etc.. In terms of the image, I took that directly from 'framework-res.apk', so I unfortunately don't have a better/larger image. You might try Photoshop/GIMP, using an image resize method that is "better for enlargement".
Cheers Matt!
I'm still no further forward in my quest to kill the snowman. I like the robot image posted above, but the issue is that it's 108x108 pixels. I basically need 4 different images. One light grey as shown which is 128x128, this will work for the People App, MMS and the Framework. Then I need a darker one which is also 128x128 for the contacts list in the phone app. Next I need a dark image which is 360x360 (for caller ID screen) and another light image which is 360x360 for the People app (viewing a contact).
In summary:
128x128 light grey
128x128 dark grey
360x360 light grey
360x360 dark grey
I have tried to resize the image, but it looks like crap. Can someone please help me? I think I can get this done with the right png files.
Thanks,
Matt.
Matt_TX said:
I'm still no further forward in my quest to kill the snowman. I like the robot image posted above, but the issue is that it's 108x108 pixels. I basically need 4 different images. One light grey as shown which is 128x128, this will work for the People App, MMS and the Framework. Then I need a darker one which is also 128x128 for the contacts list in the phone app. Next I need a dark image which is 360x360 (for caller ID screen) and another light image which is 360x360 for the People app (viewing a contact).
In summary:
128x128 light grey
128x128 dark grey
360x360 light grey
360x360 dark grey
I have tried to resize the image, but it looks like crap. Can someone please help me? I think I can get this done with the right png files.
Thanks,
Matt.
Click to expand...
Click to collapse
Looking for the same here. Any luck?
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.