Posting images - About xda-developers.com

As some of you may have noticed, attaching large images breaks the phpBB layout.
[DSC00580.JPG left]There is a way to make the "phpBB attachment MOD" do thumbnails, but I didn't like the way attachments get all their meta-info displayed. Nice for zip files and the like, not for images. They should be a natural part of the layout.
Luckily I had some code lying around I wrote for the school website I built a while ago. At that site we use phpBB as a sort of content management system, and the code allows for some flexibility when attaching images.
From now on, if you attach an image, you can give it a place in your message by enclosing the name in square brackets anywhere. So if you attach an image called 'DSC000237.jpg' then if you put '[dsc000237.jpg]' in the text, this gets replaced with the image. (The name is not case sensitive). The image will be resized if it is wider than 500 pixels, clickable for those that want to see the original image. Unless you put 'noframe' after it (i.e. '[dsc000237.jpg noframe]' ), the image will be placed inside a narrow white frame that also holds the attachment description.
[DSC00579.JPG]
If you say '[dsc000237.jpg left]' or '[dsc000237.jpg right]', the image will be inserted to the left or the right of the text flow, and resized to be 200 pixels wide. Again, you can add 'noframe' after the left or right to make the frame disappear.
Any images not mentioned in the text get shown at the bottom of the message, two side by side.
I've added a few pictures with this message so you get the idea. For the curious: it's a school in Eastern Germany, redesigned by Friendensreich Hundertwasser.

Peter Poelman said:
I've added a few pictures with this message so you get the idea. For the curious: it's a school in Eastern Germany, redesigned by Friendensreich Hundertwasser.
Click to expand...
Click to collapse
Oh, are you from Wien?

his flag leads one to believe that he's dutch
a picture is worth 1024 WORD's
or 512 DWORD's if you pref

Rudegar said:
his flag leads one to believe that he's dutch
a picture is worth 1024 WORD's
or 512 DWORD's if you pref
Click to expand...
Click to collapse
It's a Hundertwasser house that's why ...

How many posts do have to have to post an image?

Related

Alphanuma 0.9 an Alpha-Numeric Display [Deprecated, 1.0 released]

Do you miss knowing which letters are on which numbers, like when dialing a number from a business? Like, "Call Now! 1-800-YES-YEAH" Here's the fix for Kavana/Ricky/HTC based ROMs.
This is a mod of Surreal Networks Alpha-Numeric Display patch (grey), without the T-Mobile Branding:
Now, with correct spelling. (Hey it was late!)
download BRANDING.GIF
place in the Windows folder
browse to it with resco explorer
rename to ms_mobile.gif, confirm
May require rebooting. You are welcome to modify this, make into a .cab or desktop installer.
UPDATE April 4: Newest version, no branding, simpler install, and works on both the in-call and dialer screens here! Or jump to page three for preview.
UPDATE April 18: One Point Zero release here: http://forum.xda-developers.com/showthread.php?p=2129954#post2129954
Thanks, that's great. Although, you spelled Excalibur wrong...
Thanks a ton! This is a great help!
Nice but I was wondering how the hell to get the panel AFTER you make a call to show the numbers on Kavana's 6.1. Like automated service tells you to put in your name or whatnot on the dialpad....
dialpad cab minus excalibur branding
attached is the same dialpad without the Excalibur branding.
install cab, reboot, enjoy.
thanks to Ben Hirashima for the cab
MountainDrew said:
Thanks, that's great. Although, you spelled Excalibur wrong...
Click to expand...
Click to collapse
Fixed!
Now, I am analyzing how to make a slicker package from Ben's example.
Yianaki said:
Nice but I was wondering how the hell to get the panel AFTER you make a call to show the numbers on Kavana's 6.1. Like automated service tells you to put in your name or whatnot on the dialpad....
Click to expand...
Click to collapse
Not sure. I will look into it. I suppose it could be added to the top of whatever image is in the "next" screen?
So it's only in one colour, and it might not match your blues, but I'll share the one I made for my phone if any of you like it.
I made one too
Windows standard colors
Here are original ones for each of the default colors and Segoe text. No Branding. Included one in grey, too!
Anyone else having a problem with the automatic alpha-num installers with a cooked ROM?
I like the one with T-mobile Branding. It makes the rom feel more official. (Extracted from the Surreal Networks CAB)
ygb said:
I like the one with T-mobile Branding. It makes the rom feel more official. (Extracted from the Surreal Networks CAB)
Click to expand...
Click to collapse
I am working on a complete suite of not T-Mobile Branding, trying to figure out the splash screens at the moment. I just cant dig the pink T; Ive tried! Been cruising the other forums for clues...
It seems that the Ben dialpad works on the in-call screen, but I cant simulate the behavior if i uninstall his cab and manually it the reg. What keys do others use to change background on the in-call screen? IT really needs some livening up anyway.
Profezza said:
It seems that the Ben dialpad works on the in-call screen, but I cant simulate the behavior if i uninstall his cab and manually it the reg. What keys do others use to change background on the in-call screen? IT really needs some livening up anyway.
Click to expand...
Click to collapse
Just one key...but it has to point to a file that exists. So if you've extracted the .gif file from the .cab / make sure you drop the .gif file in the windows directory and note what the .gif filename is as thats what you're going to put in the regitry entry...also make sure you soft-reset otherwise it won't change until then.
And as far as the in call screen is concerned ... look for a file in \windows directory named cprogback_land.png for your in-call screen
Here's the one that i use: It looks good with technology's another blue color scheme .......Just rename the extention from .jpeg to .png if you want to use it
nice tip! thanks!
pudgedaddy said:
...And as far as the in call screen is concerned ...
Click to expand...
Click to collapse
It appears that that file is hard-coded, so there is no way to mod the reg with the installer, but it looks like windows mobile's .cab-install system will back things up alright from a file replacement approach. So, a single installer for both is do-able.
Interestingly, the image I am overwriting is called Carrierlogo.gif, not cprogback_land.png. Are there two potential images retrieved for the call screen, one in the fore and one in the back? I wonder what I could do with that info...
Or, maybe it is named differently in different source roms with the same purpose. Will text that next.
boom, got it
So, I think i this is how the in-call graphics work:
It appears that the call screen does indeed call up two images (not including a contact thumb, if applicable) The background is hardwired as "cprogback_land.png". Also, instead of having the carrier text string at the top, it can have an image across the top, which is hardwired as "carrierlogo.gif". Nothing can be done, as far as I can tell, to change the pointers to other files, so overwrites are the only method of changing.
If the graphic is put inside the background image itself, it can be the full width of the screen, like any background, and likewise any height (up to 213) But the in-call screen is a bit busy.The top 24 pixels (after the window top) are reserved for the carrier branding text string (or image), followed by 2 blank rows of pixels and a horizontal rule at row 27. The next 88 pixels (the middle area is a call status area followed by another rule at row 116, and pressed digits fill the bottom area.
However, if the graphic (.gif only) is in the foreground, it can be any size and proportion, but if it is taller than 24 pixels, or wider than 311 pixels, it will be (UPDATED) scooted over four pixels and cropped to fit a box of those dimensions at the top. If it is smaller, it will be top-, then left-aligned. Either way, if it is there, it replaces the carrier text string, rather than having to be designed around it. One thing to keep in mind, if using this method is that it has to be 10 pixels narrower than the image that might be used on the dialer screen, or it will "shrink" when you switch screens, if you want them to "match".
If anything is unclear, or anyone has any details to add, or corrections to make, please let me know! Thanks
pudgedaddy said:
Just one key...but it has to point to a file that exists. So if you've extracted the .gif file from the .cab / make sure you drop the .gif file in the windows directory and note what the .gif filename is as thats what you're going to put in the regitry entry...also make sure you soft-reset otherwise it won't change until then.
And as far as the in call screen is concerned ... look for a file in \windows directory named cprogback_land.png for your in-call screen
Here's the one that i use: It looks good with technology's another blue color scheme .......Just rename the extention from .jpeg to .png if you want to use it
Click to expand...
Click to collapse
Thanks a lot pudgedaddy we definitely needed better visuals for the call in screen. Does anyone else have any other variations of screens like this laying around?
killswitch said:
...Does anyone else have any other variations of screens like this laying around?
Click to expand...
Click to collapse
One could be made by renaming any wallpaper that would work on the home screen.
I am working on a png one that blends seamlessly with a floating .gif dialpad right now. Must test it out tho'
Here is a trio of images to bring a consistent and mellow dialpad feature to BOTH the dial and incall screens.
Directions

Background4AllTabs, Photoshop & Pixelcounting

hi,
i wanted to create my own background-theme, and this thread was very helpful:
http://forum.xda-developers.com/showpost.php?p=3062019&postcount=54
(you need the Background4AllTabs "5c9aa261_manila" & "4a087e41_manila" from NisseDILLIGAF)
the problem was, i had a circle in the picture, and every time it was stretched or squashed, wrong aspect ratio, not fitting well. so i did a little research myself - pixelcounting fun.
conclusion:
1. crop your original-pic (maybe 800x480) to 700x480 (the real background size, 50 px from the top and 50 px from bottom)
2. create an new empty 512x512 file
3. resize your 700x480-pic to 512x460, squash squash squash (!)
4. paste it in the empty 512x512 on the left side(!) leaving an empty unused bar of 52px on the right side
5. do all steps from the link above to convert it for manila
nothing stretched or squashed anymore. full circles.
FINAL note:
this method works only for NisseDILLIGAF's *5c9aa261_manila* that came from the diamond. it works, but it also has the blackhole problem.
bbonzz's method (look below) works for http://forum.xda-developers.com/showpost.php?p=3068310&postcount=60 (blackhole solution).
both have no problems with nocurtains-mod. baah, too much confusion about the manila files...
Actually the background is 480x636 (image 1), because of the top curtain hole in background4alltabs.
So, to keep the aspect ratio, what you have to do is more simple:
1) cut you 480x800 (image 2) to 480x636 (image 3) keeping 52 px from bottom (bottom bar) and 112 from top (top bar+top curtain)
2) stretch to 460x512 (image 4)
3) add a 52px transparent (or whatever: black, white... It will be invisible anyway) canvas to the right (image 5)
voilà, you have a pic for Manila Editor, and once installed on Blackstone, Manila will resize it back to the original 480x636, without distortion and without shifting a single pixel. You can verify this by using the original 480x800 as background for the home tab (image 1): switching tabs, you'll notice the image is still the same: no movements, no distortions.
do you guys have a problem with a black hole at the top of the background in sound settings on the settings tab ?
check this!
hi bbonzz,
i tried your version and it does not match. check the attachment.
manila stretched the logo and it ended up as an egg.
the best way is to compare the original (800x480) as homescreen-background against the manila version background in the other tabs. that was the game i was playing. after several try&errors i found it. the mapping-coordinates for the manila-background in my tf3d background4alltabs is 700x480. 50px less reserved for the top-taskbar and 50px less reserved for the softbutton-bar at the bottom.
manila stretches the left space of the 512x512 texture (512x460) to 700x480 perfectly and the aspect ratio of the original is back.
by the way, the black hole is still a problem, but doesn't bother me.
maybe it depends on which 5b9aa261 are you using: on my HD (with the "corrected and not the original 5b9aa261), using the same try&error way, i have the perfect fit with the 480x636 thing, as you see in the screenshot. Later i'll try with your attachment
ok, i forgot to mention that "nocurtains" is installed on my hd. maybe thats the reason why you got 636 px instead of 700 px.
4a087e41_manila
Hi sir AlecDelorean and other member can you make me a 4a087e41_manila with my attach file, thanks advanced...
please test this
hi p_elmenzo,
do yo have the 2 files from background4alltabs already installed?
if yes, here you go. don't forget to backup you original manila files.
don't blame me if something goes wrong
and please compare your original pic as background for the homescreen against the new background in the other tabs. if anything moves, or looking stretched, send me a screenshot.
4a087e41_manila
Thank you very much AlecDelorean...
Grazie Mille AlecDelorean...
4a087e41_manila
Hi, again AlecDelorean i have a small problem when i change my tab the background image has change maybe the pixel of the image.
i know, its a problem of the image-compression/conversion in manila-editor. when i have time, i add a little grain in photoshop to trick the compression-algorithm.
4a087e41_manila
Ok Thanks a lot...
here you go again
ok, did some tests. i don't know much about the converting process of the manila editor, but it seems it reduces a lot of bandwidth of the colorspace combined with very rude compression. so by example - gradients loose a lot of quality, instead of other more colorful pictures where the difference of every neighbor pixel is higher. maybe its the 3d-texture method htc is using, they try to save as much memory as they can. an interesting thing to notice (compare your screenshots with the original pic), there is an converting-process included in tf3d by itself, but only for the homescreen, when you choose an own picture for the homescreen background - tf3d crops it, adds grain and compression.
enable your background of the homescreen back to standard, because the manila-background is the background4alltabs now and you can't see the difference anymore if you switch from homescreen-tab to the others.
4a087e41_manila
Hi, AlecDelorean do you have the original file of 4a087e41_manila and 5c9aa261_manila? thanks a lot.
haha
tired of messing around with the backgrounds?
you need only one. 4a087e41_manila is a new image file for background4alltabs, 5c9aa261_manila is a script that was changed.
Hey AlecDelorean, can you do this for me as well.. Thanks!
I have just one question...
HOW do i get rid of the black curtain on top of the screen??
please please please say me how!!!
In nearest future we wont use this method. A real background for all pages done.
mun_rus said:
In nearest future we wont use this method. A real background for all pages done.
Click to expand...
Click to collapse
Our saviour is back! Hope your feeling well now..
@ ArchonX
ArchonX said:
I have just one question...
HOW do i get rid of the black curtain on top of the screen??
please please please say me how!!!
Click to expand...
Click to collapse
hey ArchonX,
this is the version of NoCurtains that is working for me:

[Q] WP7 Starmenu in WM6

Is Possible to use this Mod of the WM6 startmenu in our minis?
Here's the link
http://www.xda-developers.com/windows-mobile/windows-phone-7-start-menu-for-wm-6-5-x/
-kOS- said:
Is Possible to use this Mod of the WM6 startmenu in our minis?
Here's the link
http://www.xda-developers.com/windows-mobile/windows-phone-7-start-menu-for-wm-6-5-x/
Click to expand...
Click to collapse
Yes, but this is for WVGA screen, just adjust the values for HVGA
m!k3 said:
Yes, but this is for WVGA screen, just adjust the values for HVGA
Click to expand...
Click to collapse
Plss smeone help me how to make it work...i installed and turned off my phone and turned it back on but nothing happened...
m!k3 how to adjust the values for HVGA???
in the cpr file, all values are set for WVGA (480*800)
Test this cab and say me if you see a difference!
good, i see the difference, but this is very ugly lol
I can re set the value for hvga
Enjoy!
Plz feedback
Edit: 2nd cab is with any bug correction
Hello ppl,
I used it, it works really nice. 3kb cab file... so simple..
.. here are some pics as looks on my system.
I used a dull gray backgound for pictures..
You can drag and drop the elements in the position you want in order to set up order.. that works pretty fine.
Now, question is, any possibility to have bigger characters on the screen ? as this looks too small.. or at least to have them in one line only ? not white / yellow thing as on the screen ? only white and bigger - similar to windows default theme ? maybe more spaced.. but definitely larger characters.
Brgds,
Radu
tzoller said:
Hello ppl,
I used it, it works really nice. 3kb cab file... so simple..
.. here are some pics as looks on my system.
I used a dull gray backgound for pictures..
You can drag and drop the elements in the position you want in order to set up order.. that works pretty fine.
Now, question is, any possibility to have bigger characters on the screen ? as this looks too small.. or at least to have them in one line only ? not white / yellow thing as on the screen ? only white and bigger - similar to windows default theme ? maybe more spaced.. but definitely larger characters.
Brgds,
Radu
Click to expand...
Click to collapse
Yes it's possible, the white or the yellow?
v2.. biggest fonts
hi,
if you ask me, i would like to have white letters only.
similar size, a little smaller than theme.
ideea would be to look consistent with theme default.
maybe...the "loupe" effect is it possible?
regards,
radu
tzoller said:
hi,
if you ask me, i would like to have white letters only.
similar size, a little smaller than theme.
ideea would be to look consistent with theme default.
maybe...the "loupe" effect is it possible?
regards,
radu
Click to expand...
Click to collapse
What's the "loupe" effect?
This a simple css not a app. The fonts it's the original windows.
Just the white font it's possible. In same place but little smaller?
Hello again Mike,
Here are two pictures of actual look and what i think would look better.
Is about taking out the yellow writing all together, it does not make sense to have same thing written twice, it looks cluttered.
Unless, let's say, if there is a folder which has more than one icon inside it, like for example the Tools or Settings folder. There will have to have the big white letter for title and in yellow letters, below, the content of the folder.
Size of the yellow letter seems fine for me.
As for the white letter, maybe one single size increase, like from Tahoma12 to Tahoma 13 ( and/or bolded ) so that would look closer to original windows default theme. But, not too much as it looks now, "Microsoft My Phone" is very long and would go out of the screen on the right side..
My ideea would be to have same aspect once navigating in between main theme and control panel.
"Loupe" effect, is the highlight ( or magnify lens ) that is placed on the active icon, like the effect for the clock tab, in the main theme. Or can you replace this with a underline for the title... i do not know if this is even possible..
regards,
Radu
PS: i would be really happy if i knew to tinker code here, not to bother you..
LE : started reading the post in original thread, maybe the yellow text can remain but made smaller to resemble tooltip description... small text that you really need to look closer to understand the meaning of the title if not displayed correctly...Somehow to differentiate title from description and create impression of separate "paragraphs", if that is right term.
tzoller said:
Hello again Mike,
Here are two pictures of actual look and what i think would look better.
Is about taking out the yellow writing all together, it does not make sense to have same thing written twice, it looks cluttered.
Unless, let's say, if there is a folder which has more than one icon inside it, like for example the Tools or Settings folder. There will have to have the big white letter for title and in yellow letters, below, the content of the folder.
Size of the yellow letter seems fine for me.
As for the white letter, maybe one single size increase, like from Tahoma12 to Tahoma 13 ( and/or bolded ) so that would look closer to original windows default theme. But, not too much as it looks now, "Microsoft My Phone" is very long and would go out of the screen on the right side..
My ideea would be to have same aspect once navigating in between main theme and control panel.
"Loupe" effect, is the highlight ( or magnify lens ) that is placed on the active icon, like the effect for the clock tab, in the main theme. Or can you replace this with a underline for the title... i do not know if this is even possible..
regards,
Radu
PS: i would be really happy if i knew to tinker code here, not to bother you..
LE : started reading the post in original thread, maybe the yellow text can remain but made smaller to resemble tooltip description... small text that you really need to look closer to understand the meaning of the title if not displayed correctly...Somehow to differentiate title from description and create impression of separate "paragraphs", if that is right term.
Click to expand...
Click to collapse
WOW lol
Sorry your post is complexe for me, my english is not better for understand you lol
For the code, no prob use the 2 files in attachement. For edit use notepad++ and replace the original in windows folder and softreset.
Tahoma 13 is the font of titanium? it's not a probleme for replace the font in start menu.
Thank you man, that's what i want, also i see this become a very useful post.... nice!!
Hello Mike,
Maybe i'm too dumb for this...
Can't edit file in pda... is opened already ??
Nor can copy/paste - have no rights...
Can you manage to make the package once again, but without yellow characters, at all ?
Regards,
Radu
tzoller said:
Hello Mike,
Maybe i'm too dumb for this...
Can't edit file in pda... is opened already ??
Nor can copy/paste - have no rights...
Can you manage to make the package once again, but without yellow characters, at all ?
Regards,
Radu
Click to expand...
Click to collapse
Ok,
Without the yellow fonts and portrait and landscape.
Hello M!k3,
It works, very nice and very simple.
Thanks for patience.
Here are some pictures in real life.
regards,
radu

{Team Rejectz} THEME/DESIGN CHEAT SHEET{moved to theme sec sorry} {Still Working On}

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
INDEX​1. 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 Short Cuts
Adobe Fireworks Shortcuts
Adobe Fireworks Shortcuts
Using Adobe Flash To Make Bootanimations, Banners, and Sigs
Using Adobe Flash To Make Bootanimations, Banners, and Sigs
lorjay589 said:
Using Adobe Flash To Make Bootanimations, Banners, and Sigs
Click to expand...
Click to collapse
This is damn near the best post for theming I've ever seen! Simply awesome!. Please put this in the theming section for other young devs and themers alike. This should be a sticky!

{Team Rejectz} THEME/DESIGN CHEAT SHEET {Still Working On}

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
INDEX​1. 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.

Categories

Resources